FC2ブログのテンプレート工房
ページ送りナビゲーション
前へ 1 2 3 4 5 6 7 8 9 10 次へ
というようなページ送りナビゲーションがあります。
空があんなに高いのどんぱんさんが公開されている共有プラグイン「ページナビ」が、この機能を実現してくれています。
このコードを用いてページ送りナビゲーションをテンプレートの任意の箇所に表示させる方法を紹介します。
【参考記事】
空があんなに高い: ページ移動スクリプト
FC2変数を利用しているスクリプトの外部ファイル化 - hatena chips
HTMLの<head>～</head>内に以下を加えてください。
【2009/07/12 追記】
申しわけありません、外部ファイル化はできません。
（スクリプト内でFC2変数を利用しているため）
<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>
| <%now_year>年<%now_month>月
<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のようなページ送りナビゲーションが表示できます。
ただし環境設定の変更→ブログの設定→拡張表示設定の
表示単位が「日付単位」だと機能しません。「記事単位」である必要があります。
日付単位で記事を表示する カスタマイズとは重複できませんのでご了承ください。
≪ fullmoon_howling, white_eagle, standard_wide_white の不具合 | HOME | white_eagle、fullmoon_howling から画像を取り除く ≫
よくよく調べてみると、このスクリプトは内部でFC2変数を利用しているため、外部ファイル化ができないものでした。
試しもせずにJavascriptの外部ファイル化を紹介してしまいました。申しわけありません。 m(__)m
sionさんのおかげで早めに気付けて良かったです。ありがとうございます＾＾
「ページナビ」スクリプトの外部ファイル化について記事にしまたので、よろしかったらご参考にてしください。
トラックバックさせていただきましたので、そちらからどうぞ。
トラックバックありがとうございました＾＾
早速記事に追記してこちらからもトラックバックさせていただきました。
これでFC2変数を含んだjavascriptも外部ファイル化できます。素晴らしいアイデアをありがとうございました。
m(__)m
FC2変数を含んだjavascriptも外部ファイル化についても
あわせて参考にさせて頂きました。
有難う御座いました｡
うまく説明が出来ないのですが、yahooで検索したときのページナビ風にしたいのです。
よろしくお願いします。
ここに書かれている送りナビのソースを、
ブログにて使わせて頂きたいのですが、
上記の説明通りにHTMLを当てはめてブログを見ると、
記事単位でのページ送りナビが機能致しません。
※テンプレートは共有を使わせて頂いています（a--004というテンプレートです）
ブログトップに３つ４つと記事が出てしまいます。
素人で何も解っていないのが常ですが、
教えて頂けないでしょうか。
よろしくお願い致します。
対応できるページの詳細は制作者「どんぱんさん」のサイトにあるのでそちらでご確認ください。
空があんなに高い: ページ移動スクリプト
http://dongpan.blog95.fc2.com/blog-entry-255.html
このページ送りナビは最近導入しとても便利に使わせていただいております。
ただ、以前まではサイトマップ（全記事表示）は1ページに全部の記事が表示されていたのですが、このページ送りナビ導入後はサイトマップまで数ページに分割されていることに気付きました。
でも、サイトマップは1ページに全体を表示させたいと思っていまして、自分でいろいろ試しましてみたのですがうまくいかず困っております。
「ページ送りナビを使用し且つサイトマップは1ページ内で」というやり方を是非お教え下さい。
お忙しいと思いますが、よろしくお願いします。
<script type="text/javascript"><!--
pagenavi(5); //--></script>
を入れた部分で動くものですから。サイトマップの「次へ→」のリンク先は /?all&p=2 ですからシステム側が出しているものだと思います。
ブログの記事が多いので一定数を超えたからそうなったのではないでしょうか。google で fc2 全記事一覧 1ページ表示数 って検索したら以下のページが参考になります。
http://yosoilue.blog74.fc2.com/blog-entry-792.html
2000件表示が500件表示になってるみたい。うちも確認したら分割されていました。
≪ fullmoon_howling, white_eagle, standard_wide_white の不具合 | HOME | white_eagle、fullmoon_howling から画像を取り除く ≫
【共通】
- ブログのサイトマップ
- 背景に画像を使う
- 背景画像をランダムに変える
- タイトル画像をランダムに変える
- 画像をランダムに変える
- 続きを閉じるの使い方
- 一部の文字やリンクの色を変える
- カレンダーの更新日を目立たせる
- プラグインカテゴリ３を常に表示
- 記事文末に広告等を挿入する
- 別枠リンク集の作り方
- 記事タイトル前にアイコン
- プラグインタイトル前にアイコン
- ブログタイトル下に横カレンダー
- 記事を左カラムに表示する
- 記事の日付を消す
- 新着記事に新着表示を付ける
- 便利なトラックバックURL表示
- 記事の行間を変える
【lightframe】
【standard】
- サイトの幅を変える
- 文字の大きさを変える
- 色を変える
- リンクのスタイルを変える
- もう一つのリンク集の作成
- タイトルを画像にする
- ヘッダー背景を画像にする
- タイトルを中央に配置する
- 記事を枠で囲む
- トップのみ３、他２カラム
【スマホ用】
Author:いたお
更新は非常にマイペースです
現在休止中です
いたおの他の運営サイト
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。
※スクロールさせる文字やプラグインのHTMLをここに
- 05/21 のぶ
- 05/09 sakurai
- 05/05 だいきゅ
- 05/02 たにもっさん
- 05/02 sakurai
- 05/02 sakurai
- 05/01 たにもっさん
- 05/01 sakurai
- 04/30 たにもっさん
- 04/30 たぬき
- 04/29 sakurai
- 04/29 ひろ
- 04/29 たにもっさん
- 04/29 たにもっさん
- 04/29 たぬき
- 04/28 sakurai
- 04/28 たにもっさん
- 04/28 たにもっさん
- 04/26 sakurai
- 04/24 たにもっさん
- 04/22 sakurai
- 04/22 AAA
- 04/22 通りすがり
- 04/22 zz
- 04/22 たにもっさん
- 04/22 AAA
- 04/17
- 04/17 Theresa Sullivan
- 04/15
- 04/14 sakurai
- ギルゲエム:コメントを含めた検索を出来るようにしました (03/29)
- 納豆帝国のtemplate改悪履歴:コメントにアイキャッチ（キャラアイコン）をつける (11/23)
- まとめwoネタ速neo:まとめtyaiました【タイトルを画像にする (10plate_sp_white)】 (05/02)
- まとめwoネタ速neo:まとめtyaiました【スマホ用テンプレート「10plate_sp_white」の修正】 (05/02)
- ブログ作成探偵事務局:トップページに最新記事を表示させないようにする（FC2） (04/08)
- まとめwoネタ速suru:まとめteみた.【トップページのみ３カラム、他を２カラムにする。(lightframe)】 (04/02)
- まとめwoネタ速suru:まとめteみた.【一時休止のお知らせ】 (03/30)
- 南加州空即是色:模様替え (03/01)
- 神々の領域（ｷﾘｯ:メニューバー (02/25)
- 実践レポート★アフィリエイトの足跡★:ブログのカスタマイズ (11/25)
おひさしぶりです。
記事総数が1200を超え、移動が大変になっていたので
とても助かりました！
全体ページ移動の「HOME」はどうしても残しておきたかったので
今回はそのままありますが、装備できました＾＾
（外部ファイル化すると なぜか上手く行かないので内部に置いたままですが・・＾＾；）
いたおさん、空があんなに高いのどんぱんさん、
ありがとうございました