ブログのページナビゲーション（便利ナビ）【ありのごとくあつまりて】

FC2ブログカスタマイズ，共有テンプレート，素材リンク集，フリーソフトの紹介など。迷子にならないブログ作りを目指し．．．何か1つでもお役に立てる情報を提供できたらいいなぁと思っています。

この記事に含まれるタグ（Keyword） :
便利ナビページナビ FC2ブログテンプレート変数空リンク非表示

ブログのページナビゲーション（便利ナビ）

2008/09/19 (金) カテゴリー：ブログカスタマイズ中級

このブログで使っているページナビゲーションを紹介します。これは、FC2ブログの共有プラグインとして公開されている myhurt さんの「便利ナビ（Benri-Navi）」をベースに作ったものですが、1ページに複数記事を表示している状態でも記事タイトルを素早く確認することができるようになるので、アクセシビリティがかなり向上するかと思います。　

カテゴリー別ページ，月別ページ，日別ページ，検索結果ページ，タグ検索結果ページ， ./page-0.html　./page-1.html ... で実装しています。

ページナビ（ページ移動スクリプト）　
一番最後のページまで簡単にジャンプできます！

追記：
現在、月別ページ以外では 便利ナビ と ページナビ を併用しています。
[ ページナビ（ページ移動スクリプト）の設置方法 ]

※↓ 以下、便利ナビの記事続きになります。

FC2ブログで用意されているエリア変数を使う方法なので、これをマスターすればブログの可能性はもっと広がるかも？？私もこれを機にブログ中級者になれたような気がしてます。
[ 関連記事： FC2ブログのエリア変数　表示されるページ見本 ]

また、月別の記事表示などで「次の月へ」などというリンクを辿っていると未来の月などの空ページが表示されてしまうことがあるかと思いますが、それを防ぐ方法 空リンク非表示 も使っているので、それも一緒に紹介します。
[ 参考： FCafe　月別参照空リンク制御 ]

便利ナビの応用＋空リンク非表示

※私が実際に使っているソースとは一部異なりますが、なるべくそのまま使えるように解りやすくしたつもりです。このままでも使えるとは思いますが、見た目の設定などは各自で行う必要があります。また、作業前にはバックアップをとっておくこと（テンプレートの複製を作っておく等）をお奨めします。

追記： 2009/07/12　
適用中のテンプレートではなくてもトップページ以外を簡単に確認するための方法（便利なプレビュー用リンク）を紹介しています。是非、使ってみてください。
[ 関連記事：複製テンプレートでトップページ以外を確認 ]

1.　<head>～</head> 部分に記入

【参照：直接編集OK　整形済みコピー用ソース】

月別の記事ページで空リンク（←ブログ開設より前の月または未来の月→）を表示させないため（空リンク非表示）に必要です。


<style type="text/css">
.n { display:none; }
.p ,.p<%archive_year><%archive_month> { display:inline; }
</style>


2.　 より上に記入

【参照：直接編集OK　整形済みコピー用ソース】

より上の便利ナビを表示させたい場所に以下↓ を記入。


<div id="benri_navi_area">

このページの記事目次　（カテゴリー: <%sub_title>）
このページの記事目次　（ <a href="<%prev_month_link>" title="前の月" class="n p<%prev_year><%prev_month>">← </a><b><%now_year>年<%now_month>月</b><a href="<%next_month_link>" title="次の月" class="n p<%next_year><%next_month>"> →</a> ）
このページの記事目次　（<b><%sub_title></b> の検索結果）
このページの記事目次　（タグ: <%sub_title>）
このページの記事目次

<ul>

<li><a href="#entry<%topentry_no>" title="この記事の先頭へ"><%topentry_title> [<%topentry_year>/<%topentry_month>/<%topentry_day>]</a></li>

</ul>

<div style="text-align:right">
<a href="<%prevpage_url>" title="前のページへ">←　前のページ</a>  
<a href="<%nextpage_url>" title="次のページへ">次のページ　→</a>  
</div>

</div>


トップページにも記事を表示させている場合には  と  を除けばOKです。

3.　 の下、記事タイトルの前に記入

【参照：直接編集OK　整形済みコピー用ソース】

の下、記事タイトル（通常は<h2>）の前に記入。
<h2><%topentry_title></h2>　←こういう部分の上
記事タイトルに id="" や name="" がある場合それを利用してもOKです。

<a id="entry<%topentry_no>" name="entry<%topentry_no>"></a>

FC2ブログのエリア変数を理解できればいくらでもアレンジできて楽しいかも。

キーワード検索：便利ナビページナビ FC2ブログテンプレート変数空リンク非表示

お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL　http://arinogotokuatumarite.blog19.fc2.com/blog-entry-36.html

2008/09/19 ～ | Comment (5) tweet? | ↑ ページ先頭へ ↑ |

@arinogotoku

paruparu (arinogotoku) on Twitter
ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

CATEGORY : テンプレ・FC2マニア » ブログカスタマイズ中級

この前の記事： title="" で記事やコメント冒頭文を表示する
この次の記事：楽天，Infoseek ポイント山分けキャンペーン

5 Comment

初めまして。

初めまして。FC2ブログテンプレート・HP無料素材を配布しておりますakiと申します。
この度、当方作成のテンプレートをご利用されている方からのお問い合わせで、こちらの「便利ナビ」利用法をコメントにて掲載させて頂きましたのでご報告致します。
また、勝手ながらリンクさせて頂きました。(^^ゞ
当方まだまだFC2ブログでは初心者なのでとても有益な記事でした。有難うございました。
これからの更新も楽しみにしております。

aki | 2009/01/08 (木)　[ 編集 ] No.31

aki さん、はじめまして。
ホームページ拝見させていただきました。キレイなテンプレートですね。
このカテゴリーの記事は結構時間をかけて作っているので、お役に立ててこうしてコメントいただけるとすごく嬉しいです。

リンクもありがとうございます。こちらこそ、これからも宜しくおねがいします♪♪

paruparu | 2009/01/08 (木)　[ 編集 ] No.32

お尋ね致します。

こんばんは。

ページナビを全記事表示（アーカイブ）にも付けたいのですが
可能でしょうか？
１ページの表示件数が５００件で総記事数がそれを超え
６ページに亘るため、実装出来れば便利だと思いまして。

Hiro | 2010/08/01 (日)　[ 編集 ] No.639

Hiroさんへ

表示させたいのは　 1　2　3　…　６　というページナビ（ページ移動スクリプト）
のことですよね。 <%total_pages> という変数からページ数を計算しているようなので試しに機能するかテストしてみたのですが．．．私の場合は出力されませんでした。

<%total_pages> ← マニュアルには「どこでも有効」ってなっていますが、全記事一覧ページでは無反応でした。一応、Hiroさんのサイトでも <%total_pages> が表示されるか試してもらって表示できなければ設置は難しいのかも。。。

トータル何ページがそこでもカウントできれば
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-94.html
~~のソースのエリア変数さえ調整すれば機能しそうなんですけどね。。。~~

それにしても... もうすぐ 3000件なんて！！凄いですね！

追記：
よく考えたら <%total_pages> は（全記事一覧ページの 500件単位なら）当分の間は 6 だと思うのでエリア変数を加えて手書きするという方法もありましたね。

?all&p=2　← あと問題はこれでした。このエリアだけ 2ページ目が p=2 なんですね。。。他のエリアとは違うパターンで。。。どのように書き変えたら機能するのか私には想像がつきませんでした。機能的には実現可能な感じもしますが、お力になれず申し訳ありません。