Top Page › Template › カスタマイズ › 全記事一覧(Title list)にコメント数を表示

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

2020-04-08 (Wed) 01:12

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

先ず、件数を表示する場所と位置を確保するために、記事リストを1行のものは2行に、記事タイトル末尾が縮小時に省略されていくタイプも2列に変更します。
(この変更は、全記事一覧ページをバリデーションチェックした時のエラーや警告が消える良策ですので、是非行って下さい。)
【関連記事】 文法チェックツールの『エラー』を無くす ← ②③④の部分。

ご利用テンプレートのHTML編集枠内から、全記事一覧を表示する部分を探します。
該当箇所を見付ける場合は、PCのキーボードで『Ctrl+Fキー』を押して開いた窓に
<!-- 全記事リスト開始 -->
を入れて検索します。
すると、HTML編集枠内に1ヵ所有るので、そこから <!-- 全記事リスト終了 --> までの間を下記のHTMLに貼り換えて下さい。(テンプレート名をクリックで展開します。)
テンプレートのスタイルシート編集枠上部に有る更新日が 20/03/28 以前の方のみ下記を貼り換えして下さい。











ここからは更新日が 20/03/28 以降の方も対象です。
次に、貼り換えしたソースの後ろの方に有る

[<%titlelist_category>]</a></p>
</div>
<!--/titlelist-->

↓この</a>と</p>の間にオレンジ文字部分を追加して下さい。

[<%titlelist_category>]</a><span style="opacity:0.5;display:inline-block;"> &#x1f4ac; <%titlelist_comment_num></span></p>
</div>
<!--/titlelist-->

すると、このような表示になります。
コメント吹き出し
この『吹き出し』の形をしている部分が、機種依存文字を『数値文字参照』にしたもので、上記の文字列で言うと &#x1f4ac; の部分です。(16進数)

文字参照は、マークアップ言語の文書において、直接記述できない文字や記号を表記する際に用いられます。
HTML文字参照には『文字実体参照』と『数値文字参照』が有り、『文字実体参照』には無いものも有るので、その場合『数値文字参照』を使います。
『数値文字参照』には10進数と16進数の2種類有り、そのどちらを使っても(機種依存文字等を)文字化けせずに表示する事が出来ます。
(そのまま変換して表示される機種依存の絵文字でも表示されますが、エンコードによって文字化けする場合も有るので、文字参照を使った方が安心です。)

吹き出しの形は他にも有りますので、お好みの方をご利用下さい。
ふきだし
数値文字参照の場合
💭 16進数 &#x1f4ad; 10進数 &#128173;
💬 16進数 &#x1f4ac; 10進数 &#128172;
(PCとSPでは見え方が異なるので、どんな風に表示されるかは表示してご確認下さい。)
吹き出しiPhone
↑iPhoneのスクリーンショット
吹き出しAndroid
↑Androidのスクリーンショット




最終更新日 : 2020-04-20

Comments

No Subject

毎度です。
本件、20/04/06と併せて修正しました。
やっぱし、センスが良いですね。
ゴッチャンです
2020-04-08-09:27  呑兵衛あな
[ 返信 ]

aki

Re: 呑兵衛あな 様へ

いつもお世話になっております。
修正・更新ばかりでお手数をお掛け致します。m(__)m

先程、SPで見た場合のスクリーンショットを(小さい画像ですが)掲載致しました。
やっぱりちょっと違いますね。^^;
ただ、このように段々と絵文字間(PC/SP)で差異が無くなってくれば、色々使えそうです。
因みに投稿日付の所に有る鉛筆マークも文字参照を使っています。
2020-04-08-23:30  aki
[ 返信 * 編集 ]

akiさん、こんばんは!( ^-^)/

いつも、テンプレートの修正、お疲れさまです。
実は、テンプレートで今までずーーっと気になってたことが1つあります。

それは、ブログ下部にもうけられたページナビの仕様です。
一度2ページ以降を選択してページ移動したあと、TOPに戻る(「1」ページを「選択する)と、/page-0.htmlとなります。
確かに、FC2ではTOPペジとpage-0.htmlは同義ですが、ここは”/”に統一した方がよいのではないかと。(^^)

が、akiさんもお忙しいと思いますので、この度、私Super源さんが修正させていただきました。(^^)v
(実は、だいぶ前にできてたのですが、(^^; なかなかこちらに来れなくてすみませんm(__)m ペコリン)

これを読んでご興味をもたれた方がいらっしゃるかもしれないので、該当jsの修正部分を記述します。
テンプレートHTML編集の最後の方にあるfunction pagenavi();部分を、以下のものに入れ替えると、上記の仕様に修正されます。(^^)

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

まぁ、要は<a href="'+s+0+p+'">1</a>の部分を変えればOKなのですが、そのような修正は間違いのもとなので…。【><】
また、圧縮プログラム解析にちょっと時間がかかってしまったことも、ここに来るのが遅れた理由だったりします。(^^;

それでは、もしよかったらお使いください。
またお邪魔します!(@^^)/~~~
2020-04-12-18:14  Super源さん
[ 返信 * 編集 ]

aki

Re: Super源さん 様へ

いつも陰ながら見守って頂き、感謝致しております。m(__)m

ご提案&改JS、誠に有難うございます♪
> 確かに、FC2ではTOPページとpage-0.htmlは同義ですが、ここは”/”に統一した方がよいのではないかと。(^^)
…そうなんですよね。FC2的にそういう仕様だからと思っておりましたし、このJS自体が借り物で(勿論先方には利用許諾を頂いております)当方にどうにかする技量もございませんのでそのままでした。
因みに、こちらのJSです。(これをJS Minifierで圧縮しております。)
https://hatenachips.blog.fc2.com/blog-entry-479.html(hatena chips様)

自身のブログに適用してみました。
良いですねぇ~♪page-0にならないってだけで、すごく気持ちもスッキリです。(^-^)
是非、テンプレートで利用させて下さい。勿論記事にも。m(__)m

…で、1つだけ修正させて下さい。
HTML5ではデフォルトでtype="text/javascript"なので<script>とさせて下さい。
(type="text/javascript"を入れますと、バリデーションでWarningが出るもので…^^;)
如何でしょうか?というか、修正案使わせて下さい。m(__)m
2020-04-12-21:30  aki
[ 返信 * 編集 ]

<script>タグの件、了解しました。(^^)

akiさん、こんにちは。( ^-^)/
おっ!(゚o゚)採用ですか?\(^o^)/ ヤッタァ
<script>タグの件、了解しました。(^^)
どうぞ、お使いくださいね。
気に入っていただけたようで、何よりです。(^^)
それではまた。m(__)m (@^^)/~~~
2020-04-13-10:14  Super源さん
[ 返信 * 編集 ]

Re: Super源さん 様へ

はじめまして
早速利用させていただきました。
ゴッチャンデス
2020-04-13-13:34  呑兵衛あな
[ 返信 ]

aki

Re: Super源さん 様へ

あ、ちょっと待って下さいね~。
一つ気が付いたもので。(・_・;)
カテゴリーや月別表示の際に1ページ目に戻れません。
トップページになってしまいます。

何か良い方法、有りますか?
2020-04-13-14:02  aki
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんにちは。
少し見てもらいますので、お返事が来るまでもうちょっとお待ち下さいませ。m(__)m
2020-04-13-14:04  aki
[ 返信 * 編集 ]

Re: aki 様へ

なるほど、巻き戻しました。
2020-04-13-14:55  呑兵衛あな
[ 返信 ]

akiさん、こんばんは。( ^-^)/

ご指摘の症状、確認しました。
これは…、修正には、ちょっと時間がかかりそうです。
が、現在私は、プログラミングに十分時間が取れる状態ではありません。【><】

なので、申し訳ありませんが、この件はしばらく保留とさせて下さい。【><】

以上、よろしくお願いいたします。
2020-04-13-15:19  Super源さん
[ 返信 * 編集 ]

aki

Re: Super源さん 様へ

お忙しい所、お返事有難うございます。m(__)m

> なので、申し訳ありませんが、この件はしばらく保留とさせて下さい。【><】
いえいえこちらこそ、いつも気にして頂いて感謝しかございません。
私自身がJS書けませんので、もしいつか出来るようならまたお声を掛けて下さいませ。(^-^)

有難うございました。m(__)m
2020-04-13-15:29  aki
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

私自身が出来ないので、有志の方々にいつも助けてもらっております。
申し訳ございません。そして、訪問有難うございます。
またいらして下さいね。
2020-04-13-15:33  aki
[ 返信 * 編集 ]

ページナビ用修正パッチをつくりました

akiさん、こんにちは。( ^-^)/
ページナビの件ですが、あれから閃いたものがありまして、プログラムを修正するのではなく、「パッチを充てる」という考え方で、短時間で目的の動作をするものをつくることができました。(^^)v
ということで、以下に書き込みますね。

<script>
function pagenavi(a,e){var t="<%total_pages>";if(""!=t){var r="<%current_page_num>",n="<!--nextpage--><%nextpage_url><!--/nextpage-->";""===n&&(n="<!--prevpage--><%prevpage_url><!--/prevpage-->");var p=".html",l=-1;n.slice(-5)===p?l=n.lastIndexOf("-"):(p="",l=n.lastIndexOf("="));var s=n.slice(0,l+1);t=Number(t);var f,g,i,c=1==r?"<span>1</span>":'<a href="'+s+0+p+'">1</a>',h=e-4;for(e>=t?(f=2,g=t-1):h/2+2>=r?(f=2,g=e-2):r>t-h/2-1?(f=t-e+3,g=t-1):(f=r-Math.floor(h/2),g=f+h-1),f>2&&(c+='<a href="'+s+((i=Math.ceil(f/2))-1)+p+'" title="'+i+'" class="dot">…</a>'),l=f;g>=l;l++)c+=l==r?"<span>"+l+"</span>":'<a href="'+s+(l-1)+p+'">'+l+"</a>";t-1>g&&(c+='<a href="'+s+((i=Math.ceil((g+t)/2))-1)+p+'" title="'+i+'" class="dot">…</a>'),t>1&&(c+=r==t?"<span>"+t+"</span>":'<a href="'+s+(t-1)+p+'">'+t+"</a>"),document.getElementById(a).innerHTML=c}}
pagenavi("pagenavi", 7);var url=document.URL;var tpg='page-0.html';if(url.indexOf(tpg)>0)location.href=url.replace(tpg,'');
</script>

要は、現在のスクリプトの最後に、

var url=document.URL;var tpg='page-0.html';if(url.indexOf(tpg)>0)location.href=url.replace(tpg,'');

を追加するだけです。

動作としては、移動先ページが"/page-0.html"となった場合のみ、TOPページへジャンプします。
しばらくこれを使っていただければと思います。(^^)
というより、ページナビの"1"が押される頻度を考えたら、これで十分な気も?(爆)

それでは、もしよかったらお使いください。(^^)

それではまた!m(__)m
2020-04-15-10:09  Super源さん
[ 返信 * 編集 ]

aki

Re: Super源さん 様へ

こんにちは♪
お忙しい所 早速のコメント、有難うございます。m(__)m

> 動作としては、移動先ページが"/page-0.html"となった場合のみ、TOPページへジャンプします。
…なるほど。移動時にreplaceのラグが少し有りますが、難しい改変をするより末尾に追加なら簡単ですね!

> というより、ページナビの"1"が押される頻度を考えたら、これで十分な気も?(爆)
…確かに、ページトップに戻る方法はナビの"1"だけじゃないですもんね。タイトルからやパンくず付いてるテンプレならそこからでも。(^-^)
実は自身でも色々挑戦していたのですが(リンク出力する部分とかをFC2のエリアタグで括ってみたり)まぁ、私みたいな素人が簡単に調整出来たら、初めから製作者様もそのように作ってます。^^;
…では、恐れ入りますが(元の作者様もいらっしゃるので)テンプレートへの導入では無く、カスタマイズ記事として是非♪掲載させて頂きます♪

急かしてしまったようで申し訳ございませんでした。そして、有難うございました!(^o^)丿
早速利用させて頂きます♪
2020-04-15-16:17  aki
[ 返信 * 編集 ]

akiさん、こんにちは。( ^-^)/

スクリプト、きちんと動作したようで、良かったです。(^O^)
まずは問題解決ですね。(^-^)ヨカッタ。

いえいえ。(^^)
言い出しっぺの私には、責任がありますので…。【><】

タイムラグについては、このスクリプトがページナビ表示後に動作するため、どうしても大きくなってしまいます。

この部分を<head>直下におけば、最小限に抑えることができます。

具体的には、追加スクリプト部分を削除し、以下を<head>のすぐ下(htmlの4行目あたり)に置きます。(^^)

<script>var url=document.URL;var tpg='page-0.html';if(url.indexOf(tpg)>0)location.href=url.replace(tpg,'');</script>

ただ、ここまでやってしまうと、もはやパッチではなくなってしまう気もしますが。(爆)

ではまた。m(__)m
2020-04-16-09:51  Super源さん
[ 返信 * 編集 ]

No Subject

>> 確かに、FC2ではTOPページとpage-0.htmlは同義ですが

この話題、なるほどと思いながら眺めています。
改めてlivedoorブログを見直すと、TOPページに戻る為のHTMLが記述されており、「page-0.html」に飛ぶ記述ではありませんね。
しかし、goo等、ページナビ自体が無いレンタルブログも多いようですし、FC2ブログのテンプレートでも有る・無しがある事を知りました。改めて見ると「FC2総合インフォメーション」にもページナビが付いていないんですね。
そんな中で、akiさんの物は恰好良く使い易いと思っています。

livedoorブログに馴染んだ私としては、ページナビが付いているのが当然の事として思っていましたが、なるほどです。

そんなところで、2020-04-16-09:51付けSuper源さん版を利用したいと思うのですが、ついでに、ページナビを「ブログ下部+上部」に付けたいとと思いました。
それについて、御意見・アドバイスを頂ければ幸いです。
2020-04-16-14:36  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: Super源さん 様へ

こんばんは♪お返事頂き有難うございます。

> スクリプト、きちんと動作したようで、良かったです。(^O^)>
> この部分を<head>直下におけば、最小限に抑えることができます。
…<body>直前でも十分早いですね。Net環境にもよるのかな?^^;

> ただ、ここまでやってしまうと、もはやパッチではなくなってしまう気もしますが。(爆)
…でも、page-0が気になる方には朗報ですよね。知らない方は「何で0ページなの?」と思っているでしょうから。
ただ、限定的にせざるを得ない点が有る事に気が付きました。
「エリア(モード)変数<!--index_area-->を使って、記事ページの前にインデックスページ(表紙)を作っていない事」!
でないと、ページ送りで1を選んだらもれなく表紙として作ったページに飛んで、そこからまた始めなくてはいけなくなってしまうという…^^;。
文言がまとまったら記事にさせて頂きますね♪

この度は提案頂き有難うございました。(^-^)
2020-04-16-22:09  aki
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんばんは。コメント有難うございます。

> >> 確かに、FC2ではTOPページとpage-0.htmlは同義ですが
…FC2ブログの代表ページURLは https://○○.blog.fc2.com/(今は.netや.xxxも有り)で、且つ、ページネーション等を使ってページを移動した場合、1ページ目はpage-0.htmlと表示されます。
同じページなのに2つのURLが存在するのは、トップにエンターページを作りたいという要望のためのものだと思われます。(FC2のエリアタグで、インデックスエリアでのみ表示するという変数が有ります。)
なので、インデックスエリアの変数を使ってエンターページを作っていらっしゃる方も居り、作ってない方は同じ内容のものがインデックス=0ページとして表示されます。
また、インデックスエリア変数はそのタグで囲われている部分をトップページでのみ表示する(2ページ以降は表示しない)ので、告知用のメッセージボードに使うなどトップページ以外で表示させたくない部位に使う事が出来ます。

> しかし、goo等、ページナビ自体が無いレンタルブログも多いようですし、FC2ブログのテンプレートでも有る・無しがある事を知りました。改めて見ると「FC2総合インフォメーション」にもページナビが付いていないんですね。
…元々FC2ブログにページネーションは有りません。有志の方がカスタマイズ記事を書いてくれたり、プラグイン化してくれてたりしています。
当方のページネーションも、スタイルは自身でデザインしていますが、hatena様が2015年に記事にされたものを使わさせて頂いております。(テンプレートでの使用は、連絡して許諾を頂いております。)
https://hatenachips.blog.fc2.com/blog-entry-479.html

> そんなところで、2020-04-16-09:51付けSuper源さん版を利用したいと思うのですが、ついでに、ページナビを「ブログ下部+上部」に付けたいとと思いました。
> それについて、御意見・アドバイスを頂ければ幸いです。
…トップページ全文表示でご利用なら、下までスクロールするのは大変なので、上にも有って良いのではないでしょうか。
ただ、その場合script,html,cssが若干変わりますし、テンプレートによってhtml内の挿入位置が違うので、先ずは ct_responsive を使うのか youth_responsive を使うのかをお考え下さいませ。
宜しくお願い致します。m(__)m
2020-04-16-23:13  aki
[ 返信 * 編集 ]

Re: aki 様へ

>ただ、その場合script,html,cssが若干変わります...

なかなか、面倒な事になるんですね~
本件の依頼は取り下げます。
2020-04-17-15:15  呑兵衛あな
[ 返信 ]

aki

Re: 呑兵衛あな 様へ

こんばんは。お返事有難うございます。m(__)m

> なかなか、面倒な事になるんですね~
> 本件の依頼は取り下げます。
…そうですか。一応JSもCSSも用意は出来ているので、上にも付けたくなったらいつでもお声掛け下さい。

今後とも宜しくお願い致します。
2020-04-17-20:09  aki
[ 返信 * 編集 ]

Re: aki 様へ

2020-04-17-15:15にて、「本件の依頼は取り下げ」と申しましたが、気が変わりました。
「一応JSもCSSも用意は出来ている」との事ですので、akiさんには御手数掛ける事になり恐縮ですが、よろしく御願いします。また、

>先ずは ct_responsive を使うのか youth_responsive を使うのかをお考え下さいませ。
については、 ct_responsive で御願いします。
2020-04-18-09:42  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

こんにちは。お返事頂き有難うございます。m(__)m

使用・不使用は、複製を作って作業をし見栄えと使い勝手をご確認頂いてからご判断下さい。(^-^)
不要なら付いていないものにお戻し下さい。

> ct_responsive で御願いします。
…では先ず、HTML編集画面です。
枠内を1/6程スクロールした所に有る

<div id="content">

<div class="menu3">
<!--プラグイン3-->


という部分を下記のように変更します。(コピペ可)

<div id="content">
<!-- ページネーション ここから -->
<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>
<!-- ページネーション ここまで -->

<div class="menu3">
<!--プラグイン3-->



次に、同じく枠内を3/4程スクロールした所に有るページネーションも同様に変更します。(コピペ可)

<!-- ページネーション ここから -->
<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>
<!-- ページネーション ここまで -->



次に、HTML下段に有るJavaScript部分を下記に変更します。(コピペ可)

<script>
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="'+l+"0"+p+'">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);
/* 7 display links. -reference source web page- https://hatenachips.blog.fc2.com/blog-entry-479.html */
</script>

Super源さん様のPatchを導入する場合は、指示のように(編集枠最上部に有る)<head>から</head>内に下記JSを入れて下さい。(コピペ可)

<script>var url=document.URL;var tpg='page-0.html';if(url.indexOf(tpg)>0)location.href=url.replace(tpg,'');</script>


次に、スタイルシート編集枠の最下部に下記を追加して下さい。(コピペ可)

/* ページネーション */
.pagenavi{
line-height:30px;
font-size:1.0em;
text-align:center;
}
.pagenavi a,.pagenavi span{
margin:2px;
padding:0 11px;
background:#fff;
border:1px solid #666;
border-radius:3px;
text-decoration:none;
transition:all 0.3s;
display:inline-block;
}
.pagenavi span{
font-weight:bold;
background:#eee;
}
.pagenavi a.dot{
text-decoration:none;
border:1px solid #666;
}
.pagenavi a:hover{
border-color:#000;
background:#e2eff8;
color:#000;
font-weight:bold;
}



解説を一つだけ。
HTML,JavaScript,CSS を変更しているのは、ページネーションが1つだけの時はid名で問題無いのですが、2ヵ所になるとid名が使えなくなるのでclass名に変更しなければいけないためです。
(id名は1ページに一度しか使えませんが、class名は何度でも使えるため。)
以上です。コピペのみなので難しくないと思いますが、ご不明な点が有りましたらご連絡下さいませ。m(__)m

2020-04-18-16:23  aki
[ 返信 * 編集 ]

Re: aki 様へ

御手数を掛けております。
改造してみましたが、教えていただいた内容では、ページナビのボタンが白抜きになります。
これを、未改造と同じボタンの色にしたいのです。
御教授ください。
2020-04-18-17:54  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

お返事有難うございます。

> これを、未改造と同じボタンの色にしたいのです。
…スミマセン。黒背景だというのを失念しておりました。
では、スタイルシートに追加する部分を下記のように変更して下さい。(コピペ可)

/* ページネーション */
.pagenavi{
line-height:30px;
font-size:1.0em;
text-align:center;
margin:5px;
}
.pagenavi a,.pagenavi span{
width:40px;
margin:2px 1px;
background:#0e3d58;
border:2px solid #ccc;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
text-decoration:none;
transition:all 0.3s;
display:inline-block;
}
.pagenavi span{
font-weight:bold;
background:#0b2b3e;
}
.pagenavi a.dot{
text-decoration:none;
border:2px solid #ccc;
}
.pagenavi a:hover{
border-color:#fff;
background:#0e7874;
color:#fff;
font-weight: bold;
}

お手数をお掛け致します。宜しくお願い致します。m(__)m
2020-04-18-18:17  aki
[ 返信 * 編集 ]

Re: aki 様へ

御手数を御掛けしました。
ばっちりです。
2020-04-18-18:27  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

> 御手数を御掛けしました。
> ばっちりです。

…無事に表示出来たようで何よりです。(^-^)
因みに、idをclassに変えた事により、表示出来る数はひとつでもふたつでも、幾つでも良い事になります。
まぁ、そんなに沢山付ける事も無いでしょうが、ひとつに戻したい時は上部に追加した
<!-- ページネーション ここから -->
~~
<!-- ページネーション ここまで -->
を削除すれば、JSを変更しなくても下のみの表示になります。
この度のカスタマイズ、お気に召しましたら末永くご利用下さいませ。m(__)m
2020-04-18-20:08  aki
[ 返信 * 編集 ]






非公開コメント