■ ページング機能で今のページに印をつける

posted at 2006-05-17 00:44
seesaaの機能拡張でページング機能がついた。今まではカテゴリとか選ぶとダダーッと1ページで表示されてたのが小分けに!

上と下の方にページ数が出るわけですが、そこで自分が見てるページに印をつけようという試み

こんな感じ↓
ページ印

スタイルシートで、「.navi」と「.navi a」を書き換えてもできるけど余計なものにも印をつけそうなので、ここいらでHTML編集!


1. 記事画面を修正する

記事を表示する部分を修正します。
[デザイン]→[コンテンツ]→[記事]→[コンテンツHTML編集] でHTML編集画面を開く。



2. HTMLを追記する

ページが表示されるのは、[ 月の過去ログ ]と[ カテゴリ ]表示の場合。上下に2箇所あるので合計4箇所を修正。赤文字の箇所を追加。

まず上の過去ログ。18行目あたり。
<% if:archive_page_name eq 'month' -%>
<% if:pager.need_pager -%>
<div class="navi">
<% if:pager.previous_page %><a href="<% archive.page_url(pager.previous_page) %>"><% /if %>&lt;&lt;<% if:pager.previous_page %></a><% /if %><% loop:list_pager %> <% if:current_page ne pager_number %><a href="<% archive.page_url(pager_number)%>"><% else -%><span class="navipage"><% /if %><% pager_number %><% if:current_page ne pager_number %></a><% else -%></span><% /if %>&nbsp;<% /loop %><% if:pager.next_page %><a href="<% archive.page_url(pager.next_page) %>"><% /if %>&gt;&gt;<% if:pager.next_page %></a><% /if %>
</div>
<% /if -%>
<% /if -%>


次は上のカテゴリ。27行目あたり。
<% if:page_name eq 'category' -%>
<div class="navi">
<a href="<% blog.page_url %>">top</a> / <% category.name %>
</div>
<% if:pager.need_pager -%>
<div class="navi">
<% if:pager.previous_page %><a href="<% category.page_url(pager.previous_page) %>"><% /if %>&lt;&lt;<% if:pager.previous_page %></a><% /if %><% loop:list_pager %> <% if:current_page ne pager_number %><a href="<% category.page_url(pager_number)%>"><% else -%><span class="navipage"><% /if %><% pager_number %><% if:current_page ne pager_number %></a><% else -%></span><% /if %>&nbsp;<% /loop %><% if:pager.next_page %><a href="<% category.page_url(pager.next_page) %>"><% /if %>&gt;&gt;<% if:pager.next_page %></a><% /if %>
</div>
<% /if -%>
<% /if -%>


次は下のカテゴリ。90行目あたり。
<% if:page_name eq 'category' -%>
<% if:pager.need_pager -%>
<div class="navi">
<% if:pager.previous_page %><a href="<% category.page_url(pager.previous_page) %>"><% /if %>&lt;&lt;<% if:pager.previous_page %></a><% /if %><% loop:list_pager %> <% if:current_page ne pager_number %><a href="<% category.page_url(pager_number)%>"><% else -%><span class="navipage"><% /if %><% pager_number %><% if:current_page ne pager_number %></a><% else -%></span><% /if %>&nbsp;<% /loop %><% if:pager.next_page %><a href="<% category.page_url(pager.next_page) %>"><% /if %>&gt;&gt;<% if:pager.next_page %></a><% /if %>
</div>
<% /if -%>
<% /if -%>


最後に下の過去ログ。98行目あたり。上の続き。
<% if:page_name eq 'archive' -%>
<% if:archive_page_name eq 'month' -%>
<% if:pager.need_pager -%>
<div class="navi">
<% if:pager.previous_page %><a href="<% archive.page_url(pager.previous_page) %>"><% /if %>&lt;&lt;<% if:pager.previous_page %></a><% /if %><% loop:list_pager %> <% if:current_page ne pager_number %><a href="<% archive.page_url(pager_number)%>"><% else -%><span class="navipage"><% /if %><% pager_number %><% if:current_page ne pager_number %></a><% else -%></span><% /if %>&nbsp;<% /loop %><% if:pager.next_page %><a href="<% archive.page_url(pager.next_page) %>"><% /if %>&gt;&gt;<% if:pager.next_page %></a><% /if %>
</div>
<% /if -%>
<% /if -%>
<% /if -%>


以上が完了したら保存して再構築。


3. スタイルシートに追加する

今いるページの時に表示するスタイルを追加します。
[デザイン]→[スタイルシート]→[今使ってるスタイル] でスタイルシート編集画面を開く。

今いる場合のスタイルは、[ .navipage ]で設定するようにしたので、追記。
僕は背景をオレンジ色にしたかったので
.navipage {
   background-color:#ffbb02;
   padding:2px;
}

と追記。


以上で終了。フォントの大きさを変えたり種類を変えたりしてもいいかも。
posted by hirotomo | ☁ | permalink | Comment(0) | TrackBack(0) | カスタマイズ
comments

post a comment
name: [必須入力]

e-mail:

URL:

保存しますか?

comment:

認証コード: [必須入力]


・画像の中の文字を半角で入力してください



・半角英数字のみのコメントは投稿できません