MS Access Tips/Sample and VBA and Blog customize etc...

FC2ブログ用の軽量なページネーションを作ったよ

FC2用の軽量なページネーションを作ったよ

今まで使っていたページネーションの仕様に少し不満があったので自作のものに置き換えました。割りと満足できるものになったのでスクリプトを公開します。

難易度:

不満点1 幅が固定されない

今までは、どんぱんさんの下記のスクリプトを使わせて頂いていました。高機能で、設置も簡単なものです。

空があんなに高い: ページ移動スクリプト

設置した時の記事

記事リストにページナビゲーションを追加 - hatena chips

今までのページネーション

今までのページネーション

画像を見てもらえれば分かりますが、間のドット(.)にまでリンクが張ってあります。

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

設置も簡単で表示したい場所に関数を記述するだけです。

現在ページの前後に表示するページ番号の数を引数で指定する仕様になっています。不満点は、この部分です。トップページの場合は、引数5の場合、上記の画像のようにバランスがいいのですが、途中ページだと、下図のようにちょっと幅をとりすぎます。

途中ページだと幅を取り過ぎ

かといって、引数の数値を減らすとトップページが物足りなくなります。

引数3の場合
トップページが物足らない

タッチデバイスへの対応も考慮すると、ボタンのサイズや間隔を大きくしたいのでなかなか深刻です。

不満点2 ドットの途中ページヘのリンク

これは、2クリックで目的のページヘ移動できる優れた点なのですが、そのために、引数を減らして表示ボタン数を減らすと、ドット数が増える、という仕様になっており、なかなか思い通りの幅に指定できないことになります。

また、タッチデバイスでは小さすぎて、クリック出来ないなんてことにもなります。

不満点3 document.write で書きだしている

かつてはこれが普通でしたが、HTML5の仕様書では「強く非推奨(strongly discouraged)」とされています。

HTML5でdocument.writeは使ってはいけない? | 3streamer blog

他にないか探してみた

調べてみると下記が設置も簡単で軽量ということらしい。jQueryのプラグインで汎用的に使えるものです。FC2プログのテンプレートや他のサイトでもわりと使用されているようです。

simplePagination.js - A simple jQuery pagination plugin and 3 CSS themes.

FC2プログへの設置方法
ページ送りを設置しました(FC2ブログにsimplepagination.js) - 小モノート(PC&イラスト スキルアップメモ)

ダウンロードしてみると、シンプルという割には結構jsファイルのサイズが大きいですね。9.51KB、圧縮しても5.69KBあります。ちなみに、上記のページ移動スクリプトは1.78 KB(圧縮後 1.06 KB)です。

汎用性を持たせるためには結構大きくなるのですね。また、シンプルと言っても、結構、いろいろな設定や機能もあるようです。FC2プログ専用で、自分に必要な機能だけに絞ったらもっと軽量にできそうです。

ちなみにページネーション(pagination )という用語は今回、調べてみて初めて知りました。

目指す仕様

不満点1の解消

現在ページの前後何ページを表示するかを指定するのではなく、全体の幅(表示するリンク数)を指定するようにする。幅が固定されるのでプログのレイアウトに合わせて設定できる。

不満点2の解消

途中リンクの数を1つに固定する。2クリックで目的のページへ飛べるというのはできなくなりますが、幅を固定するためには必須です。

また、一つだけなら、他のリンクと同じ幅にできるので、タッチデバイスへの対応も問題なくなります。

不満点3の解消

document.write での書き出しを、innerHTMLを利用する方法に変更する。

jQuery を導入済みなら、

スタイルシートでデザインを施して最終的に設置したものが下図です。

最終的に配置したもの

先頭ページ、途中ページ、最終ページにかかわらず幅は一定です。(幅を11に設定した例です。)両端と途中の間の[…]にもちょうど真ん中のページヘのリンクを設定しています。

設置法

テンプレートのHTMLのページネーションを表示したい場所にタグを設置します。HTML5対応なら navタグがいいでしょう。特定するために id を付加しておきます。

下記のスクリプトをHTMLに設置します。</body> の直前辺りが推奨です。

2016.10.06追記: ドットのリンクURLが表示のページとずれているというバグを修正しました。

pagenaviの第1引数は設置したタグのid名、第2引数は表示するアイテム数(幅)を設定します。アイテム数は7以上にしてください。5にすると、前後ページへのリンクが表示されませんので、ナビゲーションとして意味がなくなります。

スクリプト圧縮済みのコードは下記

2016.10.6追記: 上記の圧縮済みのコードに間違いがありましたので修正しました。

サイズは圧縮前でも 1.49 KB、圧縮後は 847 bytesです。FC2ブログに特化して、機能を絞り込むことでここまで軽量にできました。

CSSでデザインする

テンプレートのCSSに設定してください。

最低限のスタイルを設定したサンプル

CSSデザインサンプル

当プログに設置したのは下記のCSSです。

サンプルページ
ページネーション サンプル

2015.05.10追記: 共有プラグインに申請していましたが、本日、公開されました。

拍手する

14 Comments

名無し says...""

こんばんは、とても素敵なプラグインをありがとうございます。
是非使わせていただきたいです。
ところで、
<nav id="pagenavi"><nav>
の部分の末尾は<nav>でなく</nav>でよろしいのでしょうか?
素人なのでなにぶん良くわからず申し訳ないです

2015.11.23 17:32 | URL | #P5A/LIJ6 [edit]
hatena says..."re:"

> ところで、
> <nav id="pagenavi"><nav>
> の部分の末尾は<nav>でなく</nav>でよろしいのでしょうか?

ミスですので、さっそく修正しました。
ご指摘ありがとうございました。

2015.11.23 21:53 | URL | #5uE6dEgY [edit]
M says..."不具合の報告"

とても美しく素晴らしいモノを作って頂きましてとても喜んでいたのですが
今日、検索結果がゼロの表示がおかしいのに気が付きましてご報告致します
その他にも、要するに表示ページがゼロの時にscriptがむき出しに表示されて見苦しいことになってるのであります

もちろん私には直すことが出来ないのでこうやってご報告申し上げ
対処して頂けたら嬉しいなあと思いこうして書き込みさせて頂きました


どうぞよろしくお願い致します

2016.10.04 15:06 | URL | #- [edit]
hatena says..."re:不具合の報告"

> とても美しく素晴らしいモノを作って頂きましてとても喜んでいたのですが
> 今日、検索結果がゼロの表示がおかしいのに気が付きましてご報告致します
> その他にも、要するに表示ページがゼロの時にscriptがむき出しに表示されて見苦しいことになってるのであります

表示するページがない場合(検索件数が0のときなど)は、何も表示しない設定になっています。また、正しく設置されてれば script が見えてしまうということもないはずです。

このブログや他に設置していただいているブログでもそのような不具合は出ていません。

正しく設置できてないのだと思われます。実際に不具合が出ているページを見ないと原因を指摘するのは難しいです。

差し支えなければ、不具合の出ているページのURLを提示してもらえませんか。

2016.10.04 15:48 | URL | #5uE6dEgY [edit]
M says...""

お返事ありがとうございます
なるほど、私の方に問題があったのですね
大変良く理解出来ました お騒がせしてごめんなさい

また、不具合のあるページはアダルトなもので、そんなものを見て頂く度胸は私にはありません

それで今日も自分で何とかしようと一旦scriptを消去して入れ直しましたらば、今度は動かなくなっていまドツボにハマってます

思い当たることは以下の様なscriptを書いてトップページ部分に記述したことです
<script>
$( function() {
var AC = <!--archive-->+<%archive_count><!--/archive-->;
var x = Math.ceil(AC / 15);
$( '#CountPages' ) . text( 'ただいま総記事数 ' + AC + '件、一覧ページにして' + x + 'ページあるタコ') ;
} );
</script>
これを↓に出力してます
<div style="font-size:18px" id="CountPages"></div>

jqueryはひと月前にインストールしたものでまだ最新のモノだと思います
スクリプトがコンフリクトしてるのか、またFC2に意地悪されてるのか、私の知識では何も分かりません

質問が変わって我ながら図々しいとは思いますが、何か、今まで動いていたスクリプトを入れ直した途端に動かなくなる原因で
思い当たる様なことがございましたら、一言でも頂ければうれしいです

図々しい上に長文になりましたこと お許し下さい
失礼します

2016.10.05 18:15 | URL | #- [edit]
syumatu says..."dot…表示の仕様について"

こんにちは。
プラグイン自体は前から知っていましたが、
今頃実装てみました。とてもいいですね!

少し気になるのが、例えば第2引数を’7’にした場合、
全8ページの4ページ目を表示すると、
①…③④⑤…⑧となり②が表示されないようです。
5ページ目だと⑦が…になります。
個人的には…が1つしかない場合はページ表示したいです。

仕様通りだと思いますが、変更される予定はありますか?
ないようなら頑張ってみようかと思います。

2016.10.05 19:28 | URL | #SFo5/nok [edit]
hatena says..."re: M さんへ"

> 思い当たることは以下の様なscriptを書いてトップページ部分に記述したことです

コードを見る限りは関係なさそうです。

> jqueryはひと月前にインストールしたものでまだ最新のモノだと思います

jQuery はこのスクリプトで使用していないので、関係ないです。

> 思い当たる様なことがございましたら、一言でも頂ければうれしいです

<script type="text/javascript"> </script> で囲まれている部分は、現在のブラウザなら表示されることはないはずです。

HTML の最後の </body> の直前に、この記事のスクリプトをコピーして貼り付ける。

ページネーションを表示したい場所に、下記のタグを記述する。

<nav id="pagenavi"></nav>

これで表示されるはずです。それでだめなら、実際のページを見ないと思い当たることはないですね。

2016.10.05 23:19 | URL | #5uE6dEgY [edit]
hatena says..."re:dot…表示の仕様について"

> 仕様通りだと思いますが、変更される予定はありますか?

気になるといえば気になりますが、
逆にご希望の仕様にすると左右非対称になるので
それが気になるともいえます。

> ないようなら頑張ってみようかと思います。

とりあえず自分のコードを見直してみましたが、
もう既に忘れていてコードを解読できません。
もう一度コードを解析して、変更して、動作確認すると
なると結構な時間がかかりそうで、
それを押して変更するというモチベーションはちょっと
現状でないですね。

syumatuさんが頑張ってできたなら、
こちらに公開されていだだけるとうれしいですヽ(=´▽`=)ノ

2016.10.05 23:34 | URL | #5uE6dEgY [edit]
syumatu says..."re:re:dot…表示の仕様について"

> 現状でないですね。
了解しました。

Javascript初心者なので公開などは出来ませんw

ざっと見た感じ、
if (s > 2) pn += '<a href="' + base + (t= Math.ceil(s / 2)) + ext + '" title="' + t + '" class="dot">…</a>';
挿入場所は固定のはずなので
ここともう一か所に手を入れると動きそうかな?
と思ってますが、とりあえず頑張ってみます!

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

2016.10.06 08:51 | URL | #SFo5/nok [edit]
hatena says..."Mさんへ"

URLを記載したコメントは削除させていただきました。

URLは保存してありますので、コードを見て原因が分かればコメントしますのでしばらくお待ち下さい。

2016.10.06 12:07 | URL | #5uE6dEgY [edit]
M says..."解決しました"

顔から火が噴きそうなくらい恥ずかしいことをやってしまいました
でもまだ見て頂いて無い様で慌てて今言訳じゃない謝罪文を書いてます
何言ってるか分かりませんが、昨日指摘されたそのscriptタグで囲ってあれば漏れ出すことは無いと書かれていたことがドンピシャの大当たりで、何がどうしてどうなったのやら、使わせて頂いてるスクリプトの最初の<script>タグが゛抜けておりました
わたしは間抜けです 取り敢えず取り急ぎこれ以上迷惑をかけない様に解決しましたと言うことをご報告致します
お騒がせしたことをお詫び致します
そしてわたしの晒した恥ずかしのURLの削除をよろしくお願い致します
出来たらもう私丸ごと削除して頂きたいと思います
それから最初に質問させて頂いた不具合も見事に治ってます
阿呆ですわたしは穴があったら入りたいです
本当にお騒がせしました ごめんなさい 失礼します

2016.10.06 12:18 | URL | #- [edit]
hatena says...""

URLのHTMLコードを見てみました。スクリプトの前の <script type="text/javascript"> タグがありませんでした。

で、確認してみたら、記事内の「スクリプト圧縮済みのコード」もタグが抜けていました。今、修正しておきましたので、もう一度コピーし直して、現在のものに上書きしてください。

あるいは、FC2のプラグイン設定からダウンロードしたものを使用してください。

2016.10.06 12:21 | URL | #5uE6dEgY [edit]
hatena says..."re:解決しました"

すれ違いで解決していたのですね。
URLのコメントは削除しておきました。

このページに記載してあったコード自体が間違っていたのが原因だと思いますので、ご迷惑をおかけしたのをお詫びします。

2016.10.06 12:32 | URL | #5uE6dEgY [edit]
hatena says..."syumatuさんへ"

仕様変更のコード拝見させていだ抱きました。ありがとうございました。
公開したくないということだったのでコメントは削除しておきました。

削除した湖面でご指摘の件について

> 1.…(dot)hover時の表示番号と選択時のページ番号が違う
> FC2ブログのプラグインも同じ動作でした。

あっ、そうですね。ご指摘ありがとうございます。

1ページ目がURLでは page-0.html なので、一つずれるというのを失念していたようです。
修正しておきます。


> 2.変数 t が未宣言?

確かにvar宣言してないですね。グローバル変数になってしまいますのでしておいたほうがいいですね。
これを記事のコードを修正しておきます。

ご指摘ありがとうございました。自分ではなかなか気づかないことでした。

2016.10.06 21:18 | URL | #5uE6dEgY [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/479-4d2fad68
該当の記事は見つかりませんでした。