2012年06月07日
ファンブログのページ送りナビゲーションをページの上部にも設置してみよう！
ページ送りナビゲーションとはメインページとアーカイブページの下部に設置されています << 前へ
>> 次へ
と表示されるナビゲーションリンクのことです。今回はこのページ送りナビゲーションをページの上部にも設置する方法を説明します。
ページの最後にあるこのナビゲーションを連続して使用するには、送られたページごとにページの最後までスクロールしないといけません。読者さんにはかなり面倒な作業になりますので、同じナビゲーションをページの上部に設置することでユーザビリティをアップさせることができます。
<< 前へ
>> 次へ
2012年06月07日
Petit Customization Diary
ページの最後にあるこのナビゲーションを連続して使用するには、送られたページごとにページの最後までスクロールしないといけません。読者さんにはかなり面倒な作業になりますので、同じナビゲーションをページの上部に設置することでユーザビリティをアップさせることができます。
同じものを設置するのだからページ下部のページ送りナビゲーションの Html コードをコピーして、表示させたい場所に貼り付ければ良いと思われがちですが、この方法ではひとつ問題があります。
このページ送りナビゲーションは <div id="nextprev"> という id 属性値が指定されてますので、そのままコピーして貼り付けますと id 属性値が重複してしまいます。実際に問題が顕在化することは少ないと思いますが、同じ id 属性値が重複することは NG なので、違う id 属性値、class 属性値で指定して css で装飾する必要があります。
HTML はある程度わかるけど、HTML と CSS の関係は少し苦手という方のために、貼るだけでページ下部のナビゲーションと同じように表示される装飾の記述を追記した Html コードをご用意しましたのでお試しくださいませ。
▼ 今日のおみやげ ▼
元気のミナモト！≫ FC2 Blog Ranking ≪ 応援お願いします。
ボックス内にマウスを置きますとコードが全て選択されます。右ボタン⇒コピー でお持ち帰りください。
上記 Html コードを「メイン」と「アーカイブ」の HTML に貼り付けます。作業をする前に 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> </Blog... </div><!-- pagenavi --> <BlogEntries> <div class="entry">「プレビュー(P)」を押し、記事の上に >> 次へ と表示されていましたら「保存(S)」を押してください。
これで「メイン」への設置は完了しましたので、引き続き「アーカイブ」のHTMLの同じ場所に「Html コード」を貼り付けて「プレビュー(P)」を押して確認し、「保存(S)」を押せば貼り付け作業は完了です。
<div style="
text-align: center; /*中央揃え*/
color: #666; /*文字色*/
line-height: 1.6; /*行間設定*/
">
※ 行揃えは center を left か right に変更してください。
※ 文字色のカラーコード #666 を変更しますと << >> 記号の色が変更されます。
※ margin や padding を指定しますと、ナビゲーションが非表示の時でも指定されてしまい無駄なスペースが空いてしまいますので、調整用に行間設定（line-height）を追記してあります。行の高さ 1.6 を変更することで、上下に隙間を作ることができます。
いかがでしたでしょうか？こちらの Html コードをサイドバーの項目に貼ってサイドバーにページ送りナビゲーションを表示させることも可能です。記事の上に設置したくない方はこちらの方法をお試しください。
こちらの記事ではページ送りナビゲーションの設置方法を説明しましたが、記事タイトル一覧を表示させますと記事タイトル一覧とページ送りナビゲーションが一緒に表示されますので、よりユーザビリティがアップします。
※ 上記Htmlコードはコピー＆ペーストでそのままご利用になれます。
※ Htmlコードのご使用につきましては、利用者の自己責任にてお願いします。
【カスタマイズ：リンク編の最新記事】
この記事へのコメント