FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

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

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
関連記事
[ 4904 ]
こんにちは^^
おひさしぶりです。

記事総数が1200を超え、移動が大変になっていたので
とても助かりました!
全体ページ移動の「HOME」はどうしても残しておきたかったので
今回はそのままありますが、装備できました^^
(外部ファイル化すると なぜか上手く行かないので内部に置いたままですが・・^^;)

いたおさん、空があんなに高いのどんぱんさん、
ありがとうございました
[ 2009/07/12 11:39 ] [ 編集 ]
[ 4905 ] > sionさん
お久しぶりです、sionさん^^

よくよく調べてみると、このスクリプトは内部でFC2変数を利用しているため、外部ファイル化ができないものでした。

試しもせずにJavascriptの外部ファイル化を紹介してしまいました。申しわけありません。 m(__)m

sionさんのおかげで早めに気付けて良かったです。ありがとうございます^^
[ 2009/07/12 23:56 ] [ 編集 ]
[ 5716 ] 参考にさせて頂きました。
記事が増えてきたので、ジャンプする方法の1つとして
使わさせて頂きました。
[ 2009/08/29 12:15 ] [ 編集 ]
[ 5718 ] > Hiroさん
記事が多いときに便利ですよね。
トラバありがとうございます^^
[ 2009/08/29 12:46 ] [ 編集 ]
[ 5961 ] 外部ファイル化してみました
いたおさん、おひさしぶりです^^

「ページナビ」スクリプトの外部ファイル化について記事にしまたので、よろしかったらご参考にてしください。

トラックバックさせていただきましたので、そちらからどうぞ。
[ 2009/09/10 08:06 ] [ 編集 ]
[ 5970 ] > hatenaさん
お久しぶりです、hatenaさん。
トラックバックありがとうございました^^

早速記事に追記してこちらからもトラックバックさせていただきました。

これでFC2変数を含んだjavascriptも外部ファイル化できます。素晴らしいアイデアをありがとうございました。
m(__)m
[ 2009/09/10 21:26 ] [ 編集 ]
[ 6014 ] 改訂版も 参考にさせて頂きました。
いたお様 お世話になっております。
FC2変数を含んだjavascriptも外部ファイル化についても
あわせて参考にさせて頂きました。
有難う御座いました。
[ 2009/09/12 17:35 ] [ 編集 ]
[ 6019 ] > Hiroさん
hatenaさんのおかげで更に便利になりました^^
[ 2009/09/12 20:38 ] [ 編集 ]
[ 7109 ]
これで、よくあるひとつひとつの数字の後ろに、□ 見たいなのを表示する方法をご教授いただけないでしょうか?

うまく説明が出来ないのですが、yahooで検索したときのページナビ風にしたいのです。

よろしくお願いします。
[ 2009/11/22 23:06 ] [ 編集 ]
[ 7120 ] > uiry47さん
記事に掲載したのでこちらを参考にしてください。

ページ送りナビゲーションに枠を付ける
http://10plate.blog44.fc2.com/blog-entry-327.html
[ 2009/11/23 14:47 ] [ 編集 ]
[ 7322 ] 送りナビが機能しません。
こんにちわ。
ここに書かれている送りナビのソースを、
ブログにて使わせて頂きたいのですが、
上記の説明通りにHTMLを当てはめてブログを見ると、
記事単位でのページ送りナビが機能致しません。

※テンプレートは共有を使わせて頂いています(a--004というテンプレートです)
ブログトップに3つ4つと記事が出てしまいます。

素人で何も解っていないのが常ですが、
教えて頂けないでしょうか。
よろしくお願い致します。

[ 2009/12/08 11:00 ] [ 編集 ]
[ 7331 ] > クレさん
記事単位で機能しないのは仕様のようです。
対応できるページの詳細は制作者「どんぱんさん」のサイトにあるのでそちらでご確認ください。

空があんなに高い: ページ移動スクリプト
http://dongpan.blog95.fc2.com/blog-entry-255.html
[ 2009/12/08 22:45 ] [ 編集 ]
[ 7343 ] >いたおさん
仕様でしたか解りました。
そちらのサイトで確認してみます。

助かりましたありがとうございます。
クレ
[ 2009/12/09 11:07 ] [ 編集 ]
[ 8555 ] お世話様です
いたお様、いつもお世話様です。
このページ送りナビは最近導入しとても便利に使わせていただいております。

ただ、以前まではサイトマップ(全記事表示)は1ページに全部の記事が表示されていたのですが、このページ送りナビ導入後はサイトマップまで数ページに分割されていることに気付きました。

でも、サイトマップは1ページに全体を表示させたいと思っていまして、自分でいろいろ試しましてみたのですがうまくいかず困っております。

「ページ送りナビを使用し且つサイトマップは1ページ内で」というやり方を是非お教え下さい。
お忙しいと思いますが、よろしくお願いします。
[ 2010/02/26 22:19 ] [ 編集 ]
[ 8562 ] しん@なでしこスポーツ動画さん
ページ送りナビ導入が原因で数ページ分割になったのではないと思います。スクリプトの

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

を入れた部分で動くものですから。サイトマップの「次へ→」のリンク先は /?all&p=2 ですからシステム側が出しているものだと思います。

ブログの記事が多いので一定数を超えたからそうなったのではないでしょうか。google で fc2 全記事一覧 1ページ表示数 って検索したら以下のページが参考になります。

http://yosoilue.blog74.fc2.com/blog-entry-792.html

2000件表示が500件表示になってるみたい。うちも確認したら分割されていました。
[ 2010/02/27 15:37 ] [ 編集 ]
[ 8597 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/03/05 17:42 ] [ 編集 ]
[ 8724 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/07/27 23:48 ] [ 編集 ]
[ 9172 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2013/07/16 02:03 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

記事の表示件数 [2]
以前、便利ナビに[ 当月の記事一覧 ]を付け、月内の記事を参照し易くしましたが、 前月より以前の記事を参照するには、右サイドバーの「バ...
FC2変数を利用しているスクリプトの外部ファイル化
以前の記事 記事リストにページナビゲーションを追加 で、どんぱんさんがページ移動スクリプト - 空があんなに高い で公開されているページナ...
[2009/09/10 00:41] hatena chips
-
管理人の承認後に表示されます
[2016/10/30 19:37]
ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
ユーザータグ


△ ページトップへ戻る