ファンブログのページ送りナビゲーションをページの上部にも設置してみよう！

ファンブログカスタマイズ：リンク編投稿日：2012年06月07日 00:03

ページ送りナビゲーションとはメインページとアーカイブページの下部に設置されています <<　前へ >>次へと表示されるナビゲーションリンクのことです。今回はこのページ送りナビゲーションをページの上部にも設置する方法を説明します。

<<　前へ >>次へ

2012年06月07日

Petit Customization Diary

ページの最後にあるこのナビゲーションを連続して使用するには、送られたページごとにページの最後までスクロールしないといけません。読者さんにはかなり面倒な作業になりますので、同じナビゲーションをページの上部に設置することでユーザビリティをアップさせることができます。

同じものを設置するのだからページ下部のページ送りナビゲーションの Html コードをコピーして、表示させたい場所に貼り付ければ良いと思われがちですが、この方法ではひとつ問題があります。
このページ送りナビゲーションは <div id="nextprev"> という id 属性値が指定されてますので、そのままコピーして貼り付けますと id 属性値が重複してしまいます。実際に問題が顕在化することは少ないと思いますが、同じ id 属性値が重複することは NG なので、違う id 属性値、class 属性値で指定して css で装飾する必要があります。

HTML はある程度わかるけど、HTML と CSS の関係は少し苦手という方のために、貼るだけでページ下部のナビゲーションと同じように表示される装飾の記述を追記した Html コードをご用意しましたのでお試しくださいませ。

▼ 今日のおみやげ ▼

お持ち帰りの際は「コメント」などを残していただけますと励みになります。
元気のミナモト！≫ FC2 Blog Ranking ≪ 応援お願いします。

<!-- pagenavi -->
<div style="text-align: center; color: #666; line-height: 1.6;">
<BlogIfPagePrevious><<　<a href="{$BlogPagePrevLink$}">前へ</a>&nbsp;&nbsp;&nbsp;</BlogIfPagePrevious><BlogIfPageNext>>><a href="{$BlogPageNextLink$}">次へ</a></BlogIfPageNext>
</div><!-- pagenavi -->

ボックス内にマウスを置きますとコードが全て選択されます。右ボタン⇒コピーでお持ち帰りください。

上記 Html コードを「メイン」と「アーカイブ」の HTML に貼り付けます。作業をする前に HTML のバックアップをとっておくことを推奨します。

► CSSやHTMLファイルのバックアップの方法

「メイン」の HTML を開いたら <div id="entries"> という記述を探してください。上から少しスクロールすればすぐ見つかります。

持ち帰った「Html コード」を <div id="entries"> と <BlogEntries> の間に貼るのですが、そのまま貼ると記述してある元のソースとコードが繋がってしまう恐れがありますので、コードを貼る前に直下にカーソルを置き、3～4回改行して行間を広げてください。改行して間を広げた真中あたりの行頭にカーソルを置いてコードを貼れば上下に空きができますので、貼ったコードと元から記述されていたソースとの区別がつきますから安全に作業が行えます。

</div><!-- /header -->
<div id="main" class="clr">

<div id="wrapper" class="clr">  ◄ 3カラムのみの記述

<div id="content">
<div id="entries">

<!-- pagenavi -->
<div style="text-align: center; color: #666; line-height: 1.6;">
<BlogIfPagePrevious><<　<a href="{$BlogPagePrevLink$}">前へ</a>&nbsp;&nbsp;&nbsp;</Blog...
</div><!-- pagenavi -->

<BlogEntries>
<div class="entry">

「プレビュー(P)」を押し、記事の上に　>>次へ　と表示されていましたら「保存(S)」を押してください。
これで「メイン」への設置は完了しましたので、引き続き「アーカイブ」のHTMLの同じ場所に「Html コード」を貼り付けて「プレビュー(P)」を押して確認し、「保存(S)」を押せば貼り付け作業は完了です。

※ 行揃えは center を left か right に変更してください。
※ 文字色のカラーコード #666 を変更しますと <<　>> 記号の色が変更されます。
※ margin や padding を指定しますと、ナビゲーションが非表示の時でも指定されてしまい無駄なスペースが空いてしまいますので、調整用に行間設定（line-height）を追記してあります。行の高さ 1.6 を変更することで、上下に隙間を作ることができます。

► 記事の行間を広くする方法： CSS

いかがでしたでしょうか？こちらの Html コードをサイドバーの項目に貼ってサイドバーにページ送りナビゲーションを表示させることも可能です。記事の上に設置したくない方はこちらの方法をお試しください。

こちらの記事ではページ送りナビゲーションの設置方法を説明しましたが、記事タイトル一覧を表示させますと記事タイトル一覧とページ送りナビゲーションが一緒に表示されますので、よりユーザビリティがアップします。

► ファンブログのメインページとアーカイブページに記事タイトル一覧を設置してみよう！

※ 上記Htmlコードはコピー＆ペーストでそのままご利用になれます。
※ Htmlコードのご使用につきましては、利用者の自己責任にてお願いします。

≪　前の記事に戻る　｜　次の記事を読む　≫