空があんなに高い
歌って踊れるプログラマーを目指して

プロフィール
どんぱん
Author: どんぱん

最近の記事とコメント
トラックバックリスト
カテゴリ
ユーザータグ
過去ログ
メールフォーム

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--/--/--(--) | スポンサー広告

ページ移動スクリプト

FC2ブログ用のページ移動スクリプトを書いてみた。
「ページナビ」という名前で共有プラグインとして公開。申請から公開まで、10日かかった。
次のページに対応する:
・ページ別:  /page-1.html
・カテゴリ別: /category2-1.html
・月別:    /blog-date-200807-1.html
・日別:    /blog-date-20080808-1.html
・検索結果: /?q=%A5%D1%A5%F3%A5%C0&page=1
・タグ検索結果: /?tag=%A5%D1%A5%F3%A5%C0&page=1

テンプレの好きな場所にこういうふうに書くと:
<script type="text/javascript"><!--
pagenavi(2); //--></script>
表示はこんなふうになる:
1 . 7 8 9 10 11 ... 25
このようにたとえば引数に2を指定すると、現在ページの前後各2ページまでページ番号を表示する。

表示しているページ番号と先頭ページまたは末尾ページとの間が2つ以上あいている場合に、「...」のように省略表示をする。この「.」それぞれにもリンクが張ってあり、クリックするとそのページ近辺に飛ぶ。2回のクリックで目的のページ番号に飛べるように作ってある。

肝心な関数のソースは、テンプレの<body>タグの下あたりに書く:
<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>

追記:
聖斗*SEYTOさんからコメントを頂きましたが、
全○ページ中、○ページ目
のように現在のページ番号だけを表示したいときは、次のように書けばOKです。
<script type="text/javascript"><!--
function currpage(prev, next)
{
  url = next;
  add = -1;
  if (url == '') {
    url = prev;
    add = 1;
  }
  if ((i = url.indexOf('/page-')) != -1) {
    c = url.substring(i + 6, url.length - 5);
  } else if (url.indexOf('/category') != -1
    || url.indexOf('/blog-date-') != -1) {
    i = url.lastIndexOf('-');
    c = url.substring(i + 1, url.length - 5);
  } else if ((i = url.indexOf('page=')) != -1) {
    c = url.substring(i + 5);
  } else {
    c = 0;
    add = 0;
  }
  c = Number(c) + add + 1;
  document.write(c);
}
//--></script>
全<%total_pages>ページ中、<script type="text/javascript"><!--
currpage('<!--prevpage--><%prevpage_url><!--/prevpage-->',
  '<!--nextpage--><%nextpage_url><!--/nextpage-->');
//--></script>ページ目
今回はテンプレート用変数を、関数の引数に入れてみました。こうすると、関数本体を外部ファイルに切り離すことができます。

追記:
まつぼさんからコメントを頂きました。
ブログのページ送りの構成が「《前ページ(古)  次ページ(新)》」 の場合に、
《前 1...... 46 47 48 49 50 》
のように右端を最新ページにするには、以下の赤字の部分(4箇所)を修正してください。
<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 = n; i >= 1; i--) {
    dot = '<a href=\"' + base + (i - 1) + ext + '\" title=\"' + (n - i + 1) + '\">.</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>' + (n - i + 1) + '</b> ');
      } else {
        document.write(' <a href=\"' + base + (i - 1) + ext + '\">' + (n - i + 1) + '</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>
関連記事
スポンサーサイト
どんぱんさん、はじめまして。hatena と申します。

ページ移動スクリプト、Myブログで利用させていただいてます。
非常に便利なスクリプトを公開していただきありがとうございます。

事後報告になりますが、このスクリプトを使ったブログカスタマイズを紹介する記事も書かせていただきました。よろしかったでしょうか。もし不都合がありましたら、お知らせください。
hatena 2009/06/12(金) [編集]
hatenaさん、はじめまして。
ページ移動スクリプトのご紹介ありがとうございます。
思うとおりに動くようになるまでは、いくらか苦心したので、使っていただけると報われます。
どんぱん 2009/06/13(土) [編集]
はじめまして、どんぱんさん。いたおと申します。

素晴らしいスクリプトを公開していただきありがとうございます。この機能の要望は多いけど実現が難かしいと思っていたので、どんぱんさんのスクリプトを拝見したときは本当に嬉しかったです。

事後報告になって申しわけありませんが、この機能を紹介する記事を掲載させていただきました。もしご不都合があればお知らせください。

恐縮ですがトラックバックも送らせていただきました。
いたお 2009/07/09(木) [編集]
いたおさん、はじめまして。
ご紹介いただいてありがとうございます。
こんな機能がほしいと思って探したらなさそうだったので作ったわけですが、見た目の地味さのわりに、結構手ごたえがある課題でした。
もし動作がイメージと違っていましたらお教えください。今後の参考にさせていただきます。
どんぱん 2009/07/10(金) [編集]
どんぱんさん、はじめまして。
記事が多くなってきましたので「ページ移動スクリプト」を導入しました。ありがとうございました。
Hiro 2009/08/29(土) [編集]
Hiroさん、はじめまして。
注意点として挙げられていた、「FC2変数を使っているので外部ファイル化できない」点と、「ブログの設定で表示単位を日付単位にしたときに使えない」点は、おっしゃるとおりですね。
<%total_pages>変数は、日付単位のときに期待通りのページ数にならないようです。
どんぱん 2009/08/29(土) [編集]
どんぱんさん、はじめまして。
「ページ移動スクリプト」 本当に便利なスクリプトで、一番最後のページにダイレクトにアクセスできるところなどがすごく気に入り 1ヶ月前くらいから導入させていただきました。
hatenaさん や いたおさん の記事も参考に外部スクリプト化し、恐れ多くも私もブログに紹介記事を書かせていただきました。 本当にありがとうございます!
paruparu 2009/12/02(水) [編集]
paruparuさん、はじめまして。
丁寧に紹介していただいて、ありがとうございます。
外部スクリプトにする方法、参考になりました。こうすると記述がだいぶすっきりしますね。
どんぱん 2009/12/03(木) [編集]
どんぱんサン、初めましてo
FC2で拝見して、自分のやりたいものに一番近かったため
DL後に改造して使用させていただくことに致しましたo
記事にする際にトラックバックと紹介をさせていただいたのですが、
あまりにも見た目が変わってしまっていますので
「この改造はダメ」とのことがあれば遠慮なくお申し付けくださいませo
それでは用件だけですが失礼致しますo
プラグイン、ありがとうございました!
聖斗*SEYTO 2010/02/08(月) [編集]
聖斗*SEYTOさん、はじめまして。
そういえばFC2ブログでは、現在のページ番号の変数が用意されてませんでしたね。(だから本プラグインがややこしくなっていたのでした。)
ページ番号だけを表示するスクリプトを追記しましたので、参考になさってください。
どんぱん 2010/02/11(木) [編集]
お忙しいところ、お返事くださってありがとうございます><
返事が遅くなってすみません><
追加でページ番号表示のみのスクリプトまでありがとうございます!
最近少し忙しいので、時間ができ次第 改めて参考にさせていただきます!
本当にありがとうございました!
聖斗*SEYTO 2010/03/08(月) [編集]
このコメントは管理人のみ閲覧できます
- 2010/11/22(月)
はじめましてこんばんわ。
どんぱんさんのページ移動スクリプトが便利なので利用させてもらっています。
ただ、一つ気になる点で
1 2 3 4 5 ......... 200
という風に膨大なページ風を持ったブログで利用すると..........の数が数えきれないほどになってしまいました。もしよかったら改良するヒントをもらえると助かります。
Syao 2011/05/14(土)
Syaoさん、こんばんは。
たとえば以下のように大きめの数字を指定すると、...の数が少なくなります。
お試しください。
<script type="text/javascript"><!--
pagenavi(10); //--></script>
どんぱん 2011/05/14(土) [編集]
どうもはじめまして。
Amaichi と申します o(_ _)o

ページ移動スクリプト、私のブログでも利用させていただきました!
すごく便利で素晴らしいです。
どうもありがとうございました!
Amaichi 2011/11/22(火)
スクリプト拝借いたしました。
非常に気に入っています。感謝しています!
ガリ松 2012/02/18(土)
どんぱんさん、はじめまして。
Googleのウェブマスターツールでカテゴリ別と月別アーカイブに「タイトルタグの重複」という指摘が出でいたので、タイトルにページ番号を入れて差別化したいと思い、その方法を探してました。

こちらの「全○ページ中、○ページ目」というスクリプトが思っているものにぴったりだったので、使用させていただきました。
少し変更して、「タイトル 1/2ページ」と表示するようにさせていただきました。

ありがとうございます。FC2に現在のページ番号を表示する関数がなかったので助かりました。

記事数が増えてきたら、「ページ移動スクリプト」にもトライしたいと思います。
cadkeel 2012/07/03(火)
cadkeelさん、はじめまして。
長い関数を分解するなら、現在ページ取得部分を切り出せばいいのですね。
参考にさせていただきます。ありがとうございます。
どんぱん 2012/07/03(火) [編集]
bodyに
肝心な関数のソースは、テンプレの<body>タグの下あたりに書く:
のコードを入力したらうまくいきました。
質問なのですが
たとえば私のブログの場合総ページ数が90ページです。
それで表示なのですがトップページの場合、1.2.3.4.5.6.....90 次ページ≫となっています。
この最初に見えている数字つまり1~6の数字を10まで見れるようにしたいのですがどこのコードをいじればいいのでしょうか?
理想の形(トップページを開いた状態で)→ 1.2.3.4.5.6.7.8.9.10....次ページ≫
はじめまして 2013/03/01(金) [編集]
pagenavi(9);
と書くと1~10が表示されます。
(現在の1ページ±9ページという意味です。)
どんぱん 2013/03/02(土) [編集]
はじめまして。
ほぼ初心者ながらも、ちまちまカスタマイズしながらFC2ブログを楽しんでいる者です。
どんぱん様のページ移動スクリプト、とても魅力的で、ぜひ使わせていただきたいと、いそいそと取り入れてはみたのですが、私のブログではページ送りが
 《前ページ(古)  次ページ(新)》
となっているため、
 《前 1 2 3 4 5 ......50 》
となった場合、1 がトップページ(最新)だと少々おかしいのです。
これを、逆に
 《前 1...... 46 47 48 49 50 》
とはできませんでしょうか……
最新ページを<%total_pages>にしたいのです。
わがまま申して申し訳ありませんが、ご一考よろしくお願いいたします。

まつぼ 2013/08/10(土)
まつぼさん、はじめまして。
右端が最新ページになるように変更する方法を、記事に追記しました。
意図と違うところがありましたら、ご指摘お願いします。
どんぱん 2013/08/11(日) [編集]
どんぱん様、ありがとうございますっ!!
なんと手早い作業、神業!感服いたしました。
さっそく試したところ、ドンピシャ、理想どおりでございました!
お忙しいところ、面倒な事を手掛けていただきまして、本当に感謝しております。
修正個所を改めて見ても、まったく何が何だかわからないど素人のワタクシめです。これからも何かあるごとに、ちょいちょい覗かせていただきますね。
本当にありがとうございました!\(^0^)/
まつぼ 2013/08/11(日)

ページナビ使わせていただいてます。
最近ページ数が増えて2行に表示されるようになってしまいました。
ドットの数を減らすにはどうしたらいいでしょう?
ももたろう 2013/10/12(土) [編集]
ももたろうさん
pagenavi(2);のカッコの中の数字を大きくすると、1ドットあたりの記事数が増えるので、
ドットの数か減ります。
どんぱん 2013/10/12(土) [編集]
すみません、
pagenavi(2);のカッコの中の数字を大きくすると、
表示されるページの数が増えて文字列が余計長くなり2行に表示されてしまうのですが・・
ももたろう 2013/10/12(土) [編集]
ももたろうさん
現在のスクリプトの作りでは、これ以上ドット数を減らせないようになっています。
表示を短くするもう一つの案は、ドットの部分のフォントの大きさを小さくすることです。
スクリプトの
> dot = '<a href=\"' + base + (i - 1) + ext + '\" title=\"' + i + '\">.</a>'
の行を
> dot = '<a href=\"' + base + (i - 1) + ext + '\" title=\"' + i + '\"><font size="-2">.</font></a>'
のように変えると、フォントによっては狭く表示されるようになると思います。
もし狭くならなかったら、フォントをいろいろ変えてみて試してみるのはどうでしょう。

ちなみに、設置するブログのページ数はどれくらいあるでしょうか。
ページ数が多い方は少なからずいらっしゃるようなので、今後の参考にさせていただきたいと思います。
どんぱん 2013/10/13(日) [編集]
ページ数は373です。
ページナビのスクリプトが<div style="font-size:11px;">で
囲んであるので、以前自分で付け足したと思われます。10pxだと小さすぎです。
表示部分のwidthが555なのでNext≫が2行目になってしまいます。
現在は仕方なく
≪Prev Top Next≫
1 .......................... 180 181 182 183 184 185 186 ........................... 373
という風に2行に表示しています。
これでもいいんですけどね。
そうかドットの数と数字で表示する数が連動してるのですね。
ももたろう 2013/10/13(日) [編集]
このコメントは管理人のみ閲覧できます
- 2016/03/23(水)

※任意
※任意


※入れておくと後で編集できます
管理者のみ閲覧可

help

この記事のトラックバックURL:
以前の記事 ページトップに記事リスト表示 で記事リストを表示させましたが、その下に、下図のようなページナビゲーションを設置する方法を紹...
hatena chips 2009/06/12(金)
Googleの検索結果ページ末尾には 前へ 1 2 3 4 5 6 7 8 9 10 次へ というようなページ送りナビゲーションがあります。 空があんなに高いのどんぱん...
FC2ブログのテンプレート工房 2009/07/09(木)
以前、便利ナビに[ 当月の記事一覧 ]を付け、月内の記事を参照し易くしましたが、 前月より以前の記事を参照するには、右サイドバーの「バ...
『映画な日々』 cinema-days 2009/08/29(土)
上のはJUGEMで作ってみたブログの画像なんですが、 前々からこの『現在何ページ目』ってのを表示させたかったんですけど、 FC2ブログでは『...
DEVIL DRUG 2010/02/08(月)
改訂以前、拙作テンプレの通常ブログ画面、検索、月別アーカイブページのページナビゲーションはE - テンプレートのエリハラ様のオープンソースをお借りしておりましたが、今回、どんぱん様の共有プラグイン「...
Novel テンプレート 2011/05/24(火)
テンプレートカスタムしました。 こちらのブログの管理者どんぱんさんのソースを拝借させていただきました。 FC2ブログには数字が表示されたページ移動リンクが恐らく無くて、めちゃ探したんですがようやく落ち着きました。 感謝しています! 見た目的には・?...
ガリ松の映画批評 2012/02/18(土)
本ブログのテンプレートをカスタムしました。 ページ下部にあるページ移動リンク変わりましたよ。 こちらのブログに記載されているスクリプトを拝借させていただきました。管理者のどんぱんさん、感謝しています! FC2ブログには数字が表示されたページ移動リン?...
ガリ松の映画批評 2012/02/18(土)
前の記事はこちら。 ✔「銀輪記」リニューアル[1] ✔「銀輪記」リニューアル[2] ~ページナビゲーション?をなんとかするぞ~ Googleの検索ページの下に表示されるこれ。 こ
「銀輪記」 自転車旅の記憶!! 2013/04/25(木)
カレンダー
2017/04
- - - - - - 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 - - - - - -
ページナビ
twitter
スケジュール
ピンイン入力
四声数字を四声記号に変換します
(a,e,i,o,u,v(=ü); 1,2,3,4)

リンク集
Copyright 2017 空があんなに高い Some rights reserved.
Photo by Rain Drop // Template by chocolat* // Powered by FC2
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。