ありのごとくあつまりて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 整形済みコピー用ソース

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

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

2. <!--topentry--> より上に記入

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

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

<!--Benri-navi ver1.1 (plugin) S-->
<!--not_index_area--><!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area-->
<div id="benri_navi_area">

<!--category_area-->このページの記事目次 (カテゴリー: <%sub_title>)<!--/category_area-->
<!--date_area-->このページの記事目次 ( <a href="<%prev_month_link>" title="前の月" class="n p<%prev_year><%prev_month>">←&nbsp;</a><b><%now_year>年<%now_month>月</b><a href="<%next_month_link>" title="次の月" class="n p<%next_year><%next_month>">&nbsp;→</a> )<!--/date_area-->
<!--search_area-->このページの記事目次 (<b><%sub_title></b> の検索結果)<!--/search_area-->
<!--tag_area-->このページの記事目次 (タグ: <%sub_title>)<!--/tag_area-->
<!--not_category_area--><!--not_date_area--><!--not_search_area--><!--not_tag_area-->このページの記事目次<!--/not_tag_area--><!--/not_search_area--><!--/not_date_area--><!--/not_category_area-->

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

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

</div>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area--><!--/not_index_area-->
<!--Benri-navi ver1.1 (plugin) E-->

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

3. <!--topentry--> の下、記事タイトル の前に記入

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

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

<a id="entry<%topentry_no>" name="entry<%topentry_no>"></a><!-- benri_navi -->

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

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

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 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 などから見てください。

5 Comment


初めまして。

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

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


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

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

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


お尋ね致します。

こんばんは。

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

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


Hiroさんへ

表示させたいのは  1 2 3 … 6  というページナビ (ページ移動スクリプト)
のことですよね。 <%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 なんですね。。。他のエリアとは違うパターンで。。。 どのように書き変えたら機能するのか 私には想像がつきませんでした。 機能的には 実現可能な感じもしますが、お力になれず申し訳ありません。

paruparu |  2010/08/01 (日) [ 編集 ] No.641


承認待ちコメント

このコメントは管理者の承認待ちです

- |  2015/09/05 (土)  No.1765

コメントを投稿する 記事: ブログのページナビゲーション (便利ナビ)


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback