Top Page › Template › カスタマイズ › ページネーションを上にも付ける

ページネーションを上にも付ける

2020-04-29 (Wed) 17:13

いつもご愛顧頂き、誠に有難うございます。
他のページに移動するためのページネーションを、下段だけでなくページ上部にも付けるカスタマイズです。
「上にも付けたい」というご要望がございましたので、他の方にも使えるように記事として掲載させて頂きます。
頂いたご要望コメントの有る記事↓

全記事一覧(Title list)にコメント数を表示

いつもご愛顧頂き、誠に有難うございます。エントリーページでの記事や個別記事ページにコメント数が出ておりますが、これを全記事一覧(Title list)ページにも表示したいというご要望がございましたので、コメント数の表示を追加するカスタマイズを掲載致します。標準で付帯~というお話も頂きましたが、コメントを受け付けていない方には不要な装備だとも考えられ、カスタマイズという形でご案内させて頂きます。m(__)m先ず、件...


ページネーションとは、丁付け・ページ割りという意味の英単語です。Webでは、ページの掲載量が多い時に複数ページに分割して各ページへのリンクを並べ、移動を容易にしたものをこのように言います。
全記事表示タイプのブログや要約表示掲載数の多いブログ等、ページネーションの有る下段まで降りる事無く他のページに移動したい場合に重宝すると思いますので、必要な方はカスタマイズをご利用下さいませ。

当方のテンプレートに装備されておりますスクリプトは、許可を頂いてこちらのものをお借りしております。(下記ブログカードのページ内コメントに有った、上下に設置するカスタマイズ方法です。)

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

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




① 先ず、テンプレートHTML編集枠内に有る<!--プラグイン3-->という文字列を探します。
PCのキーボードで『Ctrl+Fキー』を押して開いた窓に<!--プラグイン3-->と入れて該当箇所を探します。
2ヵ所見付かると思いますので、上部に有る方の上に下記オレンジ文字を追加します。

この位置に追加
<!--プラグイン3-->

若しくは下記のようになってる場合は

この位置に追加
<div class="menu3">
<!--プラグイン3-->


↓下記を追加
<!-- ページネーション ここから -->
<div class="pagenation">
<ul>
<!--not_permanent_area--><!--not_edit_area--><!--prevpage--><li class="pagenation_prev"><a href="<%prevpage_url>" title="前ページ">« Prev</a></li><!--/prevpage--><!--/not_edit_area--><!--/not_permanent_area-->
<li style="margin-left:0;"><div class="pagenavi"></div></li>
<!--not_permanent_area--><!--not_edit_area--><!--nextpage--><li class="pagenation_next"><a href="<%nextpage_url>" title="次ページ">Next »</a></li><!--/nextpage--><!--/not_edit_area--><!--/not_permanent_area-->
</ul>
</div>
<!-- ページネーション ここまで -->


② 次に、PCのキーボードで『Ctrl+Fキー』を押して開いた窓に<!-- ページネーション ここから -->と入れて該当箇所を探し、枠内下方に有るものに上記と同じものを貼り換えます。
(結果、同じページネーション表示部分が、上下の2ヵ所になります。)


③ 同じくテンプレートHTML編集枠内下段にまとめて記述しておりますJavaScript群の中から下記のものを探します。
PCのキーボードで『Ctrl+Fキー』を押して開いた窓にfunction pagenaviと入れて該当箇所を探します。
すると1ヵ所見付かりますので、その文字列
function pagenavi
から8行下の
pagenavi("pagenavi", 7);
までを下記に変更します。(コピペ可)

function pagenavi(a,e){var n="<%total_pages>";if(""!=n){var r="<%current_page_num>",t="<!--nextpage--><%nextpage_url><!--/nextpage-->";""===t&&(t="<!--prevpage--><%prevpage_url><!--/prevpage-->");var p=".html",s=-1;t.slice(-5)===p?s=t.lastIndexOf("-"):(p="",s=t.lastIndexOf("="));var l=t.slice(0,s+1);n=Number(n);var i,g,v,f=1==r?"<span>1</span>":'<a href="<!--not_category_area-->'+l+0+p+'<!--/not_category_area--><!--category_area--><!--page_area--><%firstpage_url><!--/page_area--><!--/category_area-->">1</a>',c=e-4;for(e>=n?(i=2,g=n-1):c/2+2>=r?(i=2,g=e-2):r>n-c/2-1?(i=n-e+3,g=n-1):(i=r-Math.floor(c/2),g=i+c-1),i>2&&(f+='<a href="'+l+((v=Math.ceil(i/2))-1)+p+'" title="'+v+'" class="dot">…</a>'),s=i;g>=s;s++)f+=s==r?"<span>"+s+"</span>":'<a href="'+l+(s-1)+p+'">'+s+"</a>";n-1>g&&(f+='<a href="'+l+((v=Math.ceil((g+n)/2))-1)+p+'" title="'+v+'" class="dot">…</a>'),n>1&&(f+=r==n?"<span>"+n+"</span>":'<a href="'+l+(n-1)+p+'">'+n+"</a>");var h=document.getElementsByClassName(a);h[0].innerHTML=f,h[1].innerHTML=f}}pagenavi("pagenavi",7);

HTML編集枠内の改変はここまで。
続いてスタイルシート編集枠内を変更します。

④ PCのキーボードで『Ctrl+Fキー』を押して開いた窓に#pagenaviと入れて該当箇所を探します。
複数個所見付かりますので、そのすべてを

#pagenavi

.pagenavi

のように、セレクタの( # )シャープを( . )ドットに変更します。
(必ず『半角英数』で。youth_respでは12ヵ所、それ以外のテンプレートでは7か所有るので、全て変更して下さい。)


後は更新ボタンを押して適用させて下さい。
不具合が有った時のために、複製を作っておくと安心です。

【 記事更新しました 】 FC2ブログのエイリアス機能(カスタムURL)の実装に伴い『カテゴリーURLの変更』が有ったため不具合が発生しましたので、'20/05/30にJavaScriptを修正致しました。(記事内JSも修正済みです。)

ページネーションの不具合について

実はFC2運営に問い合わせていた件だったのですが、結論が出ましたので記事に致します。…というか、下記の記事を読んでいたので「うわっ!ひょっとして!?」と検証してみたら、うちのページネーションも該当していたという。ページ送りに不具合か【FC2独自変数】独自変数に不具合が生じているのではないか、という仮定のもとに書いています。具体的な内容としては リスト型ページ送りで1ページ目に戻った際に正しいページが表示さ...



最終更新日 : 2020-05-29

Comments

いただきました

Stay Home 中、お疲れ様です。
さっそくいただきました。
ct_responsive3cでは以前教えていただいたもののままですが、youth_resp3c の全文表示と要約表示の両方に設置しました。
04/29現在、youth_resp3c の要約表示にしてあります。
04/30には全文表示に切り替えるつもりです。
ありがとうございました
2020-04-29-19:18  呑兵衛あな
[ 返信 * 編集 ]

ごめんなさい

色々とテンプレートに細工する方法を考えていただき、教えていただき、たいへん恐縮なのですが。
現在利用しているlivedoorからFC2に引越しするのは見送ることに決めました。
livedoorブログからアナウンスがあり、6月にはhttps化するとのことです。
これまでもズルズルと引き延ばされていたので眉唾かもしれないと思うところもあるのですが。
データを移動させる場合に「タグが移動できない」事が判った事が大きな理由です。
御世話になりっぱなしで申し訳ありません。
Akiさんの増々の御発展を祈念しております。向後は、単なる訪問者としてお邪魔しますのでよろしくお願いします。
冗談ですが、Akiさん。
livedoorブログのテンプレートを作ってくださいよ。
ファンクラブより
2020-04-29-19:35  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

呑兵衛あな 様、こんばんは。(^_^)

> 現在利用しているlivedoorからFC2に引越しするのは見送ることに決めました。
…そうですか…。
沢山のご助言とご提案を頂き、そして見過ごしていた不具合等も修正できました。
未熟な制作者に色々とお付き合い頂いたのでとても残念です。

> 御世話になりっぱなしで申し訳ありません。
…いえいえ、とんでもございません。
私と致しましては感謝するばかりです。本当に有難うございました。

> Akiさんの増々の御発展を祈念しております。向後は、単なる訪問者としてお邪魔しますのでよろしくお願いします。
…閲覧されている方にしか分からないもの等、何かお気付きがございましたら、今後も何なりとお教え下さいませ。

> 冗談ですが、Akiさん。livedoorブログのテンプレートを作ってくださいよ。
…それは難しいお話ですが^^;、そう言って頂けるのはデザイナー冥利に尽きます。
有難うございます。そして…
> ファンクラブより
…このお言葉、とても嬉しいです。(^-^)

巷の不穏な話題は尽きませんが、どうぞお身体をお大事に。
これからも何か機会がございましたら、いつでも話題に参加して下さいませ。m(__)m
2020-04-29-22:33  aki
[ 返信 * 編集 ]






非公開コメント