ページナビ（ページ移動スクリプト）の設置方法【ありのごとくあつまりて】

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

この記事に含まれるタグ（Keyword） :
FC2ブログページナビ javascript ナビゲーション

ページナビ（ページ移動スクリプト）の設置方法

2009/12/01 (火) カテゴリー：ブログカスタマイズ上級

外部スクリプトを利用して、FC2ブログのカテゴリーエリアなどに ページ移動用のリンク を設置する方法を紹介します。これを使うと一番最後のページにも一気にワープできるようになり、「古い記事から」「新しい記事から」という設定に殆ど左右されずにブログを読むことができるようになるので凄く便利です！！

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

1 2 3 4 5 6 .. .. 20 　← 実際のリンク見本※

↑ 上のエリアに対応し、このブログでも月別ページ以外で実装しています。（※月別ページは全件表示にしているので外しています。）

ページナビ参照元

共有プラグイン名：ページナビ ，作者：どんぱん [dongpan] さん
[ 参照・参考：空があんなに高い: ページ移動スクリプト ]

[ 参照・参考：ページ送りナビゲーション - FC2ブログのテンプレート工房 ]
[ 参照・参考： FC2変数を利用しているスクリプトの外部ファイル化 - hatena chips ]

外部スクリプトを使ったページナビ設置例

このサイトでのページナビ（ページ移動用リンク）の設置方法を載せておきます。カスタマイズした点は、FC2ブログのエリア変数を入れて、必要のないページではスクリプトを読み込ませないようにしてあることと、数字のリンク部分に少し幅を持たせている点などです。

1.　テンプレートの <head> ～ </head> 部分

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

<script type="text/javascript" src="http://blog-imgs-35.fc2.com/a/r/i/arinogotokuatumarite/t_pagenavi.js"></script>
<script type="text/javascript"><%nextpage_url>';
prevpageurl = '<%prevpage_url>';
n = '<%total_pages>';
//--></script>

↑ 太字部分 が入っていれば機能しますが、エリア変数を追加しています。（個別記事ページでもなく全記事一覧ページでもなくコメント編集ページでもなくトップページでもなく月別・日別ページでもないページという指定です。）トップページでも機能させたい場合は  と  を外し、月別ページでも機能させたい場合は  と  を外してください。

2.　ページナビを表示したい場所に ↓太字スクリプトを追加

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

（中略）
<ul>

<li><a href="#entry<%topentry_no>" title="この記事の先頭へ"><%topentry_title> [<%topentry_year>/<%topentry_month>/<%topentry_day>]</a>
</li>
</ul>
<div style="float:right">
  <a href="<%prevpage_url>" title="前のページへ">←　前のページ</a>  total <%total_pages> pages  <a href="<%nextpage_url>" title="次のページへ">次のページ　→</a>  
</div>

<script type="text/javascript">
pagenavi(5);
</script><br style="clear:both" />


↑ ソースは上の図にあるように便利ナビと併用する場合の一例で、太字スクリプト部分 が入っていれば機能します。トップページでも機能させたい場合は  と  を外し、月別ページでも機能させたい場合は  と  を外してください。

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）の中身

参考まで。（t_pagenavi.js をダウンロードして使う場合には、1. のアドレス部分をアップロードしたファイルのアドレスに変更して使ってください。）赤文字部分が外部スクリプトで使用する場合の変更箇所です。ソースは一部私好みに（数字のリンク部分に少し幅を持たせて、title="" で表示されるヘルプチップを全てのリンクに追加）してあります。

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

./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 だなんて、かなり紛らわしいですよね。 どんぱんさんのこのスクリプトはその辺りの問題も全てクリア出来ているので本当に良く出来ているなぁ．．．とただただ感心・感謝しています！

キーワード検索： FC2ブログページナビ javascript ナビゲーション

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

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

2009/12/01 ～ | Comment (33) tweet? | ↑ ページ先頭へ ↑ |

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

この前の記事：カレンダー代用ナビ付月別アーカイブ
この次の記事：カテゴリーリストに「現在地表示機能」を

33 Comment

こんばんわ

記事を参考にさせていただき、うちにも導入してみました。

とてもわかりやすく、手軽に対処できました。ありがとうございます。トラバさせていただきました。

やっすぃぃぃー | 2009/12/26 (土)　[ 編集 ] No.198

ページナビ便利ですよね♪

やっすぃぃぃーさん、またお役に立てて良かったです。
これ、私もすごくお気に入りで、ちょっと寄り道してみたくなる機能ですよね（？？）

共有テンプレートには付けていない機能なのでこれを読んだテンプレユーザーさんも是非！！（・・・って、登録よりも後に付けた機能だし、ちょっともったいぶってマス）

paruparu | 2009/12/26 (土)　[ 編集 ] No.199

paruparuさんへ

こんばんわ・・・。ある程度ブログを利用してくるといろいろと手を加えたくなるものですよね。その作業が記事になっていると今後やってみようと思う方々の手助けとなり、とても有益な情報源となります。

ブログを開設している方々がみなＰＣに明るい方ばかりではないでしょうし、わかりやすく読みやすい記事であるということはさらに重要ですよね。

実際、わかりやすく読みやすい記事を書くのは難しい・・。

paruparuさんもがんばってください～

やっすぃぃぃー | 2009/12/26 (土)　[ 編集 ] No.200

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

- | 2010/05/21 (金)　 No.513

非公開コメントさんへ

もう、問題は解決済みでしょうか？　私が確認したところでは
ページナビ，便利ナビ，追記の折りたたみどれも問題なく機能しているようです。
確認したのは Sleipnir と Firefox です。
どこか特定のページでしたらそのページを教えてください。

ちなみに、私はやっすぃぃぃーさんではないですよ～^^

paruparu | 2010/05/21 (金)　[ 編集 ] No.515

早速やってみましたよー♪
ただ･･･夜中に作業したので、きちんと出来上がってるのか不安（汗）
ちゃんと表示されてるから大丈夫なのかなぁ･･･。

そして遠慮なくＵＲＬを載せさせてもらいました！（笑）
ありがとうでーす！！！

るしあ | 2010/05/28 (金)　 No.532

るしあさんのサイトはトップページに記事を載せないパターンなので
次は page-0.html に繋げてあげないと繋がりが変になってしまうのですが．．．変数部分はともかく、このスクリプト自体はトップページでは入れない方が良いかもしれません。

  を補ってもらえばOKなのですが、場所は分かるかしら？　（私にもちょっと判りづらいので．．．）

paruparu | 2010/05/28 (金)　[ 編集 ] No.533

難しい事は全く分かりませんが（笑）
 　入れました！
トップページのは　ちゃんと消えました！
これでおｋかしら　どうでしょう？！

お手間かけてしまって　ごめんなさいね○┓ﾍﾟｺ

るしあ | 2010/05/28 (金)　 No.534

確認しました！

OKです^^　多分、その方が自然なので。。。
一般的ブログ　トップページ≒page-0.html　→　page-1.html
このテンプレ　トップページ（記事無）　→　page-0.html　→　page-1.html

後者には小細工が必要なので．．．ちょっとややしいですよね。

paruparu | 2010/05/28 (金)　[ 編集 ] No.535

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

- | 2010/08/25 (水)　 No.671

非公開コメントさんへ

ページとソース拝見しました。今はまだ断定できませんが、取り敢えず
ページナビに関するスクリプトが 2つ入ってしまっているようなので、

** ページナビ for FC2ブログ　という部分のスクリプトを削除してみてください。
この部分は外部スクリプト（t_pagenavi.js）にしているものなので設定は不要です。

~~これでダメなら別の原因かもしれないので、またコメントください。~~

追記：
環境設定の変更 → ブログの設定 → 拡張表示設定
この設定がトータルページ数の表示に影響している可能性もあるかもしれません。
以前、ある方のサイトで同様の症状を見かけたことを思い出しました。

表示単位　1ページ内の表示を「日付単位」でまとめるになっていないか確認してみてください。もしかしたら関係している可能性もあるので、「記事単位」にすれば使える場合も。。。

追記：↑ やっぱり、これが関与しているみたいです。検索したら出てきました。

環境設定の変更→ブログの設定→拡張表示設定の
表示単位が「日付単位」だと機能しません。「記事単位」である必要があります。
http://10plate.blog44.fc2.com/blog-entry-233.html
ページ送りナビゲーション - FC2ブログのテンプレート工房　より引用

paruparu | 2010/08/25 (水)　[ 編集 ] No.673

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

- | 2010/08/26 (木)　 No.674

お問い合わせ

ユーザータグ一覧を1つの記事に表示する方法で質問した者です。
いつもご指導いただきありがとうございます。

ページ数が増えてきたので、今回はこれに挑戦したものの
案の定行き詰ってしまいましたｗ

まずは日付順ページに設置したいんですが、
表示してくれません。

・ 内に設置
・拡張表示設定で記事設定確認済み

<script type="text/javascript">
pagenavi(5);
</script>
の設置場所は内
でいいんですよね？

やっぱりテンプレートが崩れてるから表示されないんですかね？
また一から作りなおす気力がなくて
できればそれは避けたいのですが・・・。

お手数かけますが、よろしくお願いします。

posse | 2011/01/14 (金)　 No.895

posseさんへ

＞（略）の設置場所は内

記事の説明 2. に書いた通りなので、むしろその逆です。
日付順のページだけであればデータエリアだけを指定してあげれば良いと思いますが、タグ別などでも使うと思うので、記事の設定をそのまま利用した方が後々簡単かもしれません。

エリア変数の詳細は http://arinogotokuatumarite.blog19.fc2.com/blog-entry-98.html
等を参照してみてください。

＞テンプレート編集画面の「タグのハイライト：ON」
＞このボタン表示される時と表示されない時ってないですか？

これ、今調べてみたら確かに表示されないこともあるみたいですね。重くて読み込めずにタイムアウトになっているのかも。。。あまり使わないので気づきませんでした。
テンプレートを弄ったり必要な時だけONにしてチェックで十分だと思いますよ。

paruparu | 2011/01/15 (土)　[ 編集 ] No.897

ありがとうございました。

ご指導のおかげでなんとか設置することができたようです。
また機会がございましたらよろしくお願いします。

ではまた勉強がてらサイト内をうろちょろしてきますｗ

posse | 2011/01/16 (日)　 No.899

厚く御礼申し上げます！！

paruparuさん

ご無沙汰しております。

”ページ移動スクリプト”お借りいたしました。

なんとかうまく入り満足しております。

ありがとうございました！！

ツネイチ | 2012/02/03 (金)　 No.1264

ツネイチさん、こんにちは。

前回は記事を紹介していただきありがとうございます。
対策の効果はどうですか。。？
またちょっとお役に立てたようで良かったです。

paruparu | 2012/02/04 (土)　[ 編集 ] No.1265

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

- | 2012/05/09 (水)　 No.1381

非公開コメント Mさんへ

チェックしてみましたが、ページナビとは直接関係ないところで、原因があるようです。
実際にはこれにエリア変数が入っていると思いますが、

コメント編集エリアで見ると、↓ 下のソースの部分に余計な「コメント開始タグ 
<div id="benri_navi_area">



<div id="benri_navi_area">

paruparu | 2012/05/09 (水)　[ 編集 ] No.1383

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

- | 2012/05/09 (水)　 No.1384

設置させていただきました。ありがとうございます。
さて、ページ送りの数字を、四角で囲ったり、フォントを変えたりするには、どのようにCSSをいじれば良いのでしょうか。
もし、知っていたら、教えてください。
よろしくお願いします。

hikkolin | 2013/01/24 (木)　 No.1578

hikkolinさんへ

＞ページ送りの数字を、四角で囲ったり、フォントを変えたりするには

まず js ファイルを一部修正します。（※半角スペース部分は↓ソースでは省略）

dot = '<a href=¥"' + base + (i - 1) + ext + '¥" title=¥"' + i + '¥"> .. </a>'
（中略）
if (i == c) {
document.write('<b class=¥"navi_b¥"> ' + i + ' </b>');
} else {
document.write('<a href=¥"' + base + (i - 1) + ext + '¥" title=¥"' + i + '¥" class=¥"navi_link¥"> ' + i + ' </a>');
}

など、適当なクラス名（赤文字部分）を追加してください。
（※ドット部分も装飾したい場合には、それにも適当なクラス名を追加）

スタイルシートの設定はお使いのテンプレートによって調整が必要ですが、
例えばこんな感じで設定してみてください。

/*ページナビの表示中ページ*/
.navi_b {
border: 1px solid #ccc;
padding: 1px;
margin-right:3px;
background:#ccc;
}
/*ページナビのリンク*/
.navi_link {
border:1px solid #ccc;
padding:1px;
margin-right:3px;
}

paruparu | 2013/01/25 (金)　[ 編集 ] No.1581

丁寧な解説ありがとうございます。
ですが...うまくいきませんでした...
ページ送りが、表示されません。
document.write('<b> ' + i + ' </b>');
} else {
document.write('<a href=\"' + base + (i - 1) + ext + '\" title=\"' + i + '\"> ' + i + ' </a>');
}
のあとに、これ↓を追加すれば良いのですか？
document.write('<b class=¥"navi_b¥"> ' + i + ' </b>');
} else {
document.write('<a href=¥"' + base + (i - 1) + ext + '¥" title=¥"' + i + '¥" class=¥"navi_link¥"> ' + i + ' </a>');
}

あと、UTF-8で保存して、アップロードしたのですが、クラス名のところが、"ツ"と文字化けしてしまいました。
エンコーディングは、何にすれば良いですか？
教えてください。

お手数かて、申し訳ありません。

hikkolin | 2013/01/25 (金)　 No.1582

先ほど、質問をしたのですが、エンコードをEUC-jpにしたら、解決しました。
ありがとうございました。

hikkolin | 2013/01/25 (金)　 No.1583

hikkolinさんへ

載せたコードを全部追加するのではなく該当場所に
(半角スペース)class=¥"navi_b¥"
等のクラス名部分のみを追加してください。

※FC2ブログ（ファイルアップロード）の性質上、同名ファイルの上書きはキャッシュが邪魔して長時間反映されない場合があります。 jsファイルは上書きより別名でアップロードし直した方が確実かもしれません。

jsファイルのエンコードは、日本語を使っている訳ではないので、この状態のままのソースであればエンコードは何でもOK だと思います。一応、開いたものを utf-8 で保存し直してみたものでも確認してみましたが、私の環境では文字化けはしませんでした。

paruparu | 2013/01/25 (金)　[ 編集 ] No.1584

はじめまして。初めてのコメントになります。
いつも、タグの表示の仕方や重複対策など色々参考にさせてもらっています。
paruparu 様の重複対策を実践してから、重複エラーは減っていたのですが最近タイトルタグの重複が増えてきたので、ページナビ、便利ナビを導入しようとしたのですが、記載している通りコードを入れても上手くいきません。
使用しているテンプレートには既に、カテゴリページ内にそのカテゴリの記事一覧表示できるようコードが入っており、ページ切り替えしてページを開けるようになっています。
この部分を削除してparuparu様のコードを入れればよいのでしょうか？
お手数ですが、助言のほうよろしくお願いします。

ユラリカ | 2013/02/21 (木)　 No.1608

ユラリカさんへ

はじめまして。ブログ拝見しました。
今はカテゴリー別ページのみ便利ナビが既に設定されている状態ですね。
ソースは概ね ↓ のような感じでしょうか。。



（使っていないようなので削除してOKかも。。）



<div id="lists-in-category" class="round categories">
<h2 class="entry-title">「 <%sub_title> 」カテゴリ記事一覧</h2>
｛便利ナビのソース｝

<ul id="pager2" class="round">
｛ページ送り用のソース｝
</ul>
</div>



ーーーーーーーーーーーーーーーーー
これを以下のように変更すると良いかと思います。
エリア変数は外側でまとめて設定しています。トップページや月別ページなども含めていますので、不要であれば  を加えて調整してください。

１．<head> スクリプト（この記事の 1. のソース）
２．<body> 該当場所のソースを↓に



<div id="lists-in-category" class="round categories">
｛便利ナビのソース（これまでのものでOK）｝

｛ページナビ用のソース（この記事の 2. のソース, エリア変数は外側で設定済み）｝
</div>



だいたいこんな感じでOKかなと思います。
バックアップを取ってから作業してくださいね。

paruparu | 2013/02/21 (木)　[ 編集 ] No.1609

アドバイスありがとうございます

こんにちは。
早速のお返事ありがとうございます。
paruparu様の助言を参考に変更してみたのですが、カテゴリーの記事一覧のところに同じ内容が２つ表示されてしまいます。
色々入れる場所を変えてみたのですが変化はありませんでした。
お手数ですがアドバイスお願いします。

ユラリカ | 2013/02/22 (金)　 No.1610

上のソースで　　～　
となっている部分のソースを（エリア変数ごと）変更してください。ただし、
＞｛便利ナビのソース（これまでのものでOK）｝
ですので、この部分のみ以前からのソースを使ってください。

エリア変数はソースを見ても表示されないので、正確な位置は管理画面で確認してもらうしかないのですが、今は該当部分に余計な  と  が入ったままだと思いますので、それを削除してください。

paruparu | 2013/02/22 (金)　[ 編集 ] No.1611

ありがとうございます

こんばんは。
のソースを消して、もう一度入れたら設定できました。
分かりやすく教えていただきありがとうございます。
これを気に、タイトルタグの重複が減るようテンプレートを見直してみることにします。
本当にありがとうございました。

ユラリカ | 2013/02/22 (金)　 No.1612

いつもお世話になっています

paruparuさんのサイトにはとてもお世話になっています。

あれやこれやと頑張ってやっています。
こちらの便利ナビを導入して設置も上手くいき表示もされるようになりました

HOME（TOP）から→新しい記事から云々→目次記事下に１，２，３、とナビ表示OK
そこから、HOME（TOP）に戻るとなぜか
新着記事のリストが「古い記事順」で表示されてしまいます

なにかが抜けたのでしょうか？原因がさっぱり分かりません

便利ナビ導入前にやったこと、ファンクション強調ボタンを除きました
恐れ入ります、お手すきな時で構いませんのでよろしくお願いいたします

もしも　HTMLファイルとCSSファイル（管理画面用）が必要でしたら
メールいたします。

うずら | 2013/10/29 (火)　[ 編集 ] No.1709

うずらさん、こんにちは。

最新記事一覧が古い順になってしまっていますね。
自分で設定を変更していないのであれば不具合だと思います。（順番が設定と逆になってしまう不具合は私も何度か経験してます...）

管理画面で環境設定→記事の設定で最新記事の一覧の項目を確認してみてください。ちゃんと 新しい順 になっているという場合、一度その辺りの設定をガチャガチャ弄って更新を押してみたり、新規記事を投稿すれば何故か正常に戻ることが多いようです。
それでもダメな場合は、FC2に問い合わせをして修正してもらってください。

paruparu | 2013/10/29 (火)　[ 編集 ] No.1710

paruparuさまへありがとうございます

すぐにお返事くださりありがとうございます
いつも本当に尊敬します

管理画面であれこれやって記事投稿しても駄目な時には
FC2に問い合わせを入れようと思います

うずら | 2013/10/29 (火)　[ 編集 ] No.1711