以下の内容はhttp://10plate.blog44.fc2.com/blog-entry-233.htmlより取得しました。


ページ送りナビゲーション

Googleの検索結果ページ末尾には
前へ 1 2 3 4 5 6 7 8 9 10 次へ
というようなページ送りナビゲーションがあります。

空があんなに高いのどんぱんさんが公開されている共有プラグイン「ページナビ」が、この機能を実現してくれています。

このコードを用いてページ送りナビゲーションをテンプレートの任意の箇所に表示させる方法を紹介します。

【参考記事】
空があんなに高い: ページ移動スクリプト
FC2変数を利用しているスクリプトの外部ファイル化 - hatena chips

HTMLの<head>~</head>内に以下を加えてください。
または外部ファイル化する場合は、赤い箇所以外を外部ファイルに加えてください。
【2009/07/12 追記】
申しわけありません、外部ファイル化はできません。
(スクリプト内でFC2変数を利用しているため)


【2009/09/10 追記】hatena chipsを運営するhatenaさんが、このjavascriptを外部ファイル化する方法を紹介してくれました。
FC2変数を利用しているスクリプトの外部ファイル化
外部化したい場合はhatenaさんの記事か、この記事文末にある追記を参考にしてください。


<script type="text/javascript"><!--
/** ページナビ for FC2ブログ
* /page-1.html
* /category2-1.html
* /blog-date-200807-1.html
* /?tag=%A5%D1%A5%F3%A5%C0&page=1
* /?q=%A5%D1%A5%F3%A5%C0&page=1
*/
function pagenavi(w)
{
if ((n = '<%total_pages>') == '')
return;
url = '<!--nextpage--><%nextpage_url><!--/nextpage-->';
add = -1;
if (url == '') {
url = '<!--prevpage--><%prevpage_url><!--/prevpage-->';
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 + '\">' + 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);
}
}
}
//--></script>


次にページ送りを表示したい箇所に以下を挿入してください。

<script type="text/javascript"><!--
pagenavi(5); //--></script>


数値は現在ページの前後にいくつページ送りを表示するか設定するものです。お好みにあわせて数値を変えてください。

挿入するべき箇所はテンプレートによって変わってくると思いますが、当サイトが提供している共有テンプレートであれば、次のような箇所に挿入するのがお勧めです。

【便利ナビに表示したい場合】

<!--▼▼ カテゴリ、月別、検索結果ナビゲーション ▼▼-->

<!--▼カテゴリー別記事ナビゲーション▼-->

<!--prevpage-->
<a href="<%prevpage_url>">≪前ページ</a>
<!--/prevpage-->

<script type="text/javascript"><!--
pagenavi(5); //--></script>


<!--nextpage-->
<a href="<%nextpage_url>">次ページ≫</a>
<!--/nextpage-->

<!--▲カテゴリー別記事ナビゲーション▲-->

<!--▼月別記事ナビゲーション▼-->

<a href="<%prev_month_link>">≪前月</a>
| &nbsp;<%now_year>年<%now_month>月&nbsp;

<script type="text/javascript"><!--
pagenavi(5); //--></script>


|
<a href="<%next_month_link>">翌月≫</a>

<!--▲月別記事ナビゲーション▲-->

<!--▼検索結果ナビゲーション▼-->

<!--prevpage-->
<a href="<%prevpage_url>">≪前ページ</a>
<!--/prevpage-->

<script type="text/javascript"><!--
pagenavi(5); //--></script>


<!--nextpage-->
<a href="<%nextpage_url>">次ページ≫</a>
<!--/nextpage-->

<!--▲検索結果ナビゲーション▲-->

<!--▲▲ カテゴリ、月別、検索結果ナビゲーション ▲▲-->


【ページ末尾に表示したい場合】

<!--permanent_area-->
<!--▼ページナビゲーション(個別記事)▼-->
<p class="page_navi">
<!--preventry--><a href="<%preventry_url>" title="前ページへ戻る">≪<%preventry_title></a> <!--/preventry-->
| <a href="<%url>" title="<%blog_name>">HOME</a> |
<!--nextentry--><a href="<%nextentry_url>" title="次ページへ進む"><%nextentry_title>≫</a><!--/nextentry-->
</p><!--page_navi-->
<!--▲ページナビゲーション(個別記事)▲-->
<!--/permanent_area-->

<!--not_permanent_area-->
<!--▼ページナビゲーション(全体ページ)▼-->
<p class="page_navi">
<!--prevpage--><a href="<%prevpage_url>" title="前ページへ戻る">≪前ページ</a> <!--/prevpage-->
| <a href="<%url>" title="<%blog_name>">HOME</a>

<script type="text/javascript"><!--
pagenavi(5); //--></script>


|
<!--nextpage--><a href="<%nextpage_url>" title="次ページへ進む">次ページ≫</a><!--/nextpage-->
</p><!--page_navi-->
<!--▲ページナビゲーション(全体ページ)▲-->
<!--/not_permanent_area-->


これでGoogleのようなページ送りナビゲーションが表示できます。

ただし環境設定の変更→ブログの設定→拡張表示設定の
表示単位が「日付単位」だと機能しません。「記事単位」である必要があります。
日付単位で記事を表示する
カスタマイズとは重複できませんのでご了承ください。

【2009/09/10 追記】このjavascriptを外部ファイル化したい場合は、スクリプトを一部変更する必要があります。

【変更前】

if ((n = '<%total_pages>') == '')
return;
url = '<!--nextpage--><%nextpage_url><!--/nextpage-->';
add = -1;
if (url == '') {
url = '<!--prevpage--><%prevpage_url><!--/prevpage-->';
add = 1;
}


【変更後】

if (n == '')
return;
url = nextpageurl;
add = -1;
if (url == '') {
url = prevpageurl;
add = 1;
}


変更したスクリプトの行頭( <script type="text/javascript"><!-- ) と行末 ( //--></script> ) を除いたものを外部ファイルに加え、HTMLの<head>~</head>内に、次の記述を加えてください。

<script type="text/javascript"><!--
/* ページナビ用変数 */
prevpageurl = '<!--prevpage--><%prevpage_url><!--/prevpage-->';
nextpageurl = '<!--nextpage--><%nextpage_url><!--/nextpage-->';
n = '<%total_pages>';
//--></script>


これで外部ファイル化することが出来ます。
hatenaさん、ありがとうございました。 m(__)m
関連記事



以上の内容はhttp://10plate.blog44.fc2.com/blog-entry-233.htmlより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.13