外部スクリプトを利用して、FC2ブログのカテゴリーエリアなどに ページ移動用のリンク を設置する方法を紹介します。 これを使うと一番最後のページにも一気にワープできるようになり、「古い記事から」 「新しい記事から」 という設定に殆ど左右されずにブログを読むことができるようになるので凄く便利です!!
↑ 上のエリアに対応し、このブログでも月別ページ以外で実装しています。(※月別ページは全件表示にしているので外しています。)
ページナビ 参照元
共有プラグイン名:ページナビ ,作者:どんぱん [dongpan] さん
[ 参照・参考 : 空があんなに高い: ページ移動スクリプト ]
[ 参照・参考 :
ページ送りナビゲーション - FC2ブログのテンプレート工房 ]
[ 参照・参考 :
FC2変数を利用しているスクリプトの外部ファイル化 - hatena chips ]
外部スクリプトを使ったページナビ設置例
このサイトでの ページナビ(ページ移動用リンク) の設置方法を載せておきます。 カスタマイズした点は、FC2ブログのエリア変数を入れて、必要のないページではスクリプトを読み込ませないようにしてあることと、数字のリンク部分に少し幅を持たせている点などです。
1. テンプレートの <head> ~ </head> 部分
【 参照 : 直接編集OK 整形済みコピー用ソース 】
<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area-->
<!--not_index_area--><!--not_date_area-->
<script type="text/javascript" src="http://blog-imgs-35.fc2.com/a/r/i/arinogotokuatumarite/t_pagenavi.js"></script>
<script type="text/javascript"><!--
nextpageurl = '<!--nextpage--><%nextpage_url><!--/nextpage-->';
prevpageurl = '<!--prevpage--><%prevpage_url><!--/prevpage-->';
n = '<%total_pages>';
//-->
</script>
<!--/not_date_area--><!--/not_index_area-->
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->
↑ 太字部分 が入っていれば機能しますが、エリア変数を追加しています。(個別記事ページ でもなく 全記事一覧ページ でもなく コメント編集ページ でもなく トップページ でもなく 月別・日別ページ でもないページ という指定です。) トップページでも機能させたい場合は <!--not_index_area--> と <!--/not_index_area--> を外し、月別ページでも機能させたい場合は <!--not_date_area--> と <!--/not_date_area--> を外してください。
2. ページナビを表示したい場所 に ↓太字スクリプト を追加
【 参照 : 直接編集OK 整形済みコピー用ソース 】
<!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area-->
<!--not_index_area-->
(中略)
<ul>
<!--topentry-->
<li><a href="#entry<%topentry_no>" title="この記事の先頭へ"><%topentry_title> [<%topentry_year>/<%topentry_month>/<%topentry_day>]</a>
</li><!--/topentry-->
</ul>
<div style="float:right">
<!--prevpage--><a href="<%prevpage_url>" title="前のページへ">← 前のページ</a> <!--/prevpage--><!--nextpage-->total <%total_pages> pages <a href="<%nextpage_url>" title="次のページへ">次のページ →</a> <!--/nextpage-->
</div>
<!--not_date_area-->
<script type="text/javascript">
pagenavi(5);
</script><br style="clear:both" />
<!--/not_date_area-->
<!--/not_index_area-->
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area-->
↑ ソースは上の図にあるように 便利ナビ と併用する場合の一例で、太字スクリプト部分 が入っていれば機能します。トップページでも機能させたい場合は <!--not_index_area--> と <!--/not_index_area--> を外し、月別ページでも機能させたい場合は <!--not_date_area--> と <!--/not_date_area--> を外してください。
pagenavi(5); この部分の数値は自由に設定できるので、現在のページの 前後各(数)ページ にページ番号を表示するかを指定します。
※共有テンプレート ari_seoシリーズ で使う場合、<div style="float:right"> 部分に相当する箇所は <p class="t_right p_mokuji"> となっていますので この部分を、<p class="f_right p_mokuji"> と書き変えればOKです。
このスクリプトだけでも、ページ送りが出来るようになりますが、通常のページ送りのリンクも残しておくのが安全です。検索ロボット(クローラ)や スクリプトOFF環境への配慮 etc
追記 : 2010/08/25
このページナビ は、環境設定の変更 → ブログの設定 → 拡張表示設定 で
表示単位 1ページ内の表示を「記事単位」でまとめる としてある場合に 正しく機能します。 1ページ内の表示を「日付単位」でまとめる と設定している場合、ページ数の表示 が正しく反映されないようなのでご注意ください。
参考まで。(t_pagenavi.js をダウンロードして使う場合には、1. のアドレス部分を アップロードしたファイルのアドレス に変更して使ってください。)赤文字部分 が 外部スクリプト で使用する場合の変更箇所です。 ソースは一部 私好みに (数字のリンク部分に少し幅を持たせて、title="" で表示されるヘルプチップを全てのリンクに追加) してあります。
【 参照 : 直接編集OK 整形済みコピー用ソース 】
function pagenavi(w)
{
if (n == '')
return;
url = nextpageurl;
add = -1;
if (url == '') {
url = prevpageurl;
add = 1;
}
ext = '.html';
if ((i = url.indexOf('/page-')) != -1) {
c = url.substring(i + 6, url.length - 5);
base = url.substring(0, i + 6);
} else if (url.indexOf('/category') != -1
|| url.indexOf('/blog-date-') != -1) {
i = url.lastIndexOf('-');
c = url.substring(i + 1, url.length - 5);
base = url.substring(0, i + 1);
} else if ((i = url.indexOf('page=')) != -1) {
c = url.substring(i + 5);
base = url.substring(0, i + 5);
ext = '';
} else {
c = 0;
add = 0;
base = '';
ext = '';
}
n = Number(n);
if (n < 1) n = 1;
c = Number(c) + add + 1;
if (c < 1) c = 1;
if (c > n) c = n;
if (w < 0) w = 0;
ww = 2 * w + 1;
for (i = 1; i <= n; i++) {
dot = '<a href=¥"' + base + (i - 1) + ext + '¥" title=¥"' + i + '¥"> .. </a>'
if ((c - w <= i && i <= c + w) || i == 1 || i == n
|| (i == 2 && c - w - 1 == i) || (i == n - 1 && c + w + 1 == i)) {
if (i == c) {
document.write('<b> ' + i + ' </b>');
} else {
document.write('<a href=¥"' + base + (i - 1) + ext + '¥" title=¥"' + i + '¥"> ' + i + ' </a>');
}
} else if (i < c - w) {
if (i - 1 <= (c - w - 2) % ww) {
if (i - 1 == Math.floor(((c - w - 2) % ww + 1) / 2))
document.write(dot);
} else if ((c - i) % ww == 0)
document.write(dot);
} else if (i > c + w) {
if (n - i <= (n - c + w) % ww) {
if (n - i == Math.floor(((n - c + w) % ww + 1) / 2))
document.write(dot);
} else if ((i - c) % ww == 0)
document.write(dot);
}
}
}
./blog-category-23.html と ./category23-0.html
余談ですが、FC2ブログで使えるアドレスには 異なるアドレスで全く同じページが表示される というものがいくつもあることをご存知ですか? 例えば、カテゴリーの名前を選択した時に最初に表示されるページは ./blog-category-カテゴリー番号.html となりますが、 2ページ目の ./categoryカテゴリー番号-1.html へ進んだ後、「前のページへ」などの (変数を使った) リンクで戻るページは ./categoryカテゴリー番号-0.html となります。 (ちなみに、通常使いませんが ./blog-category-カテゴリー番号-0.html としても同じページが表示されます。)
しかも、2ページ目が ./categoryカテゴリー番号-1.html だなんて、かなり紛らわしいですよね。 どんぱんさん の このスクリプトはその辺りの問題も全てクリア出来ているので本当に良く出来ているなぁ...と ただただ感心・感謝しています!
申し訳ありません。 お探しの記事は現在、この ユーザータグ (Keyword) を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。