*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

TOP >  Template >  カスタマイズ >  個別記事ページに同じカテゴリーの前後ページリンクを付ける

個別記事ページに同じカテゴリーの前後ページリンクを付ける

確か、2019/09 中旬以降の更新で全てのテンプレートに標準で付けたと思いますが、それ以前のテンプレートに不備だった『同一カテゴリーの前後ページリンク』を付けるカスタマイズです。
9月上旬にユーザー様よりお問い合わせ頂いた件で、更新以前のユーザー様にも有益なカスタマイズなので記事にしようと思っておりました。
遅くなりましたが、この度 回答しているものを掲載させて頂きます。

記事を読む際に、更新日で辿ってもカテゴリーで辿っても、表示されるページは個別記事ページです。
この"個別記事ページ"に仕込んであるページ送りが 2019/09 中旬以前にDLされたテンプレートだと『更新日順』のみなので、記事の後、コメント入力欄(投稿可の場合)の前に下記のように表示されます。

ページ送り
↑更新以前のものは、こんな感じに表示されています。

…なので、更新日順とカテゴリー順の両方付ければ閲覧されている方が選べて良いのでは?と、『更新日順』と『カテゴリー順』の両方を付けるカスタマイズです。

ページ送り1
↑こんな感じに変更するカスタマイズです。

ページ送り2
↑カラム幅が狭い場合の表示はこんな感じ。




先ず、HTML編集枠内半分位までスクロールした所に下記のような箇所が有ります。
(検索は[Ctrl+Fキー]で<!-- トップページ ここまで -->と入力。枠内に1ヶ所有り)その2,3行下に、

<!--permanent_area-->
<!--ページ移動-->
<div class="page_navi">
<!--preventry-->≪ <a href="<%preventry_url>" title="前のページへ"><%preventry_title></a><!--/preventry--> | <a href="<%url>" title="TOPページへ">Home</a> | <!--nextentry--><a href="<%nextentry_url>" title="次のページへ"><%nextentry_title></a> ≫<!--/nextentry-->
</div>
<!--/ページ移動-->
<!--/permanent_area-->


という部分が有ります。この青文字部分を削除し、下記(オレンジの部分)をコピーして同じ場所に貼りつけて下さい。

<!--permanent_area-->
<!--ページ移動・更新順-->
<div class="page_navi">
<div style="font-size:12px;"><a href="<%url>" title="TOPページへ">更新日順</a></div>
<ul class="entry-navi">
<li class="entry-prev"><!--preventry--><a href="<%preventry_url>" title="New"><%preventry_title></a><!--/preventry--></li>
<li class="entry-next"><!--nextentry--><a href="<%nextentry_url>" title="Old"><%nextentry_title></a><!--/nextentry--></li>
</ul>
<!--/ページ移動・更新順-->

<!--topentry-->
<!--ページ移動・同カテゴリ-->
<div style="font-size:12px;">カテゴリ:[<a href="<%topentry_category_link>" title="CategoryTOPへ"><%topentry_category></a>]</div>
<ul class="entry-navi">
<li class="entry-prev"><!--prevcategoryentry--><a href="<%prevcategoryentry_url>" title="New"><%prevcategoryentry_title></a><!--/prevcategoryentry--></li>
<li class="entry-next"><!--nextcategoryentry--><a href="<%nextcategoryentry_url>" title="Old"><%nextcategoryentry_title></a><!--/nextcategoryentry--></li>
</ul>
</div>
<!--/ページ移動・同カテゴリ-->
<!--/topentry-->
<!--/permanent_area-->


次に、下段のスタイルシート編集枠内、一番下に下記(緑の部分)をコピーして貼り付けて下さい。

@media screen and (min-width:600px) {
.entry-navi{
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
.entry-prev,.entry-next{
max-width:45%;
}
}

.entry-navi{
margin:0 auto 20px;
width:100%;
font-size:12px;
}
.entry-prev{
list-style:none;
margin:0 5px 0 15px;
}
.entry-next{
list-style:none;
margin:0 15px 0 5px;
}
.entry-prev a{
padding:0 10px;
display: block;
position: relative;
max-width: 100%;
text-align: left;
}
.entry-prev a:before {
display: block;
content: "";
position: absolute;
top: 50%;
left: -3px;
width: 10px;
height: 10px;
margin: -7px 0 0 0;
border-top: solid 2px #666;
border-right: solid 2px #666;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.entry-next a{
padding:0 10px;
display: block;
position: relative;
max-width: 100%;
text-align: right;
}
.entry-next a:after {
display: block;
content: "";
position: absolute;
top: 50%;
right: -3px;
width: 10px;
height: 10px;
margin: -7px 0 0 0;
border-top: solid 2px #666;
border-right: solid 2px #666;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}


後は更新ボタンを押して頂ければ完了です。
カスタマイズをする場合は、テンプレートの複製を作って作業すると安心です。(^_^)
(コメントにて質問を頂いたページはこちら↓)
重要!テンプレート al_responsive2c-r をご利用の方へ



Last Modified : 2019-11-30

Comments






非公開コメント

aki Re: Super源さん 様へ

お返事頂き有難うございます。(^-^)

関連記事や広告の表示位置は、記事本文を絡めて表示順が決まっていますので、それを何とかするJSが下記URLに出ております。
是非ご参考に。
https://vanillaice000.blog.fc2.com/blog-entry-990.html

p.s. 先般ご相談の件、改めて御礼申し上げます。有難うございました。m(__)m
返信は不要です。
2020-01-26-04:14aki [ 返信 * 編集 ]

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

おお!(゚o゚) akiさんのところも、似たような感じですか?(^^;

このリンクをつけてから、今日で2日目ですが、これはこれで(検索エンジンからの訪問者などに)効果がありそうなので、今後も使わせていただくことにしました。(^^)v

また、情報ありがとうございます。(^^)
早速覗いてみますね。(^^)v

ただ、、、、先ほど、久々に私のブログをアンドロイドで見てみたところ、記事下のところが、何かゴチャゴチャしてますねー。(@_@)ウーン

ということで、まずはここをスッキリさせたいと思います。(爆)

それではまた!(^0^)//
2020-01-25-18:27Super源さん [ 返信 * 編集 ]

aki Re: Super源さん 様へ

ご報告及びコメント、誠に有難うございます。m(__)m

私のテンプレートは昔からの流用で入れていなかったのですが、テンプレート変数にカテゴリ内での次の記事と前の記事へのリンク変数が追加されたのは、実は5年も前の事なんですよね。(^^ゞ
…で、質問やご要望もございましたので、やっと修正・更新で入れました。
作る際の変数並び等は一緒なのでデザイン似ちゃいましたが、下記のサイト様にも同様の事が書かれております。
(こちらはFont Awesomeですが当方はCSSで矢印作ってます。一応言い訳。)
https://hatenachips.blog.fc2.com/blog-entry-476.html

同じカテゴリーの記事が続くと、どうしても上下段とも同じ記事タイトルになっちゃうんですよね。(;'∀')…うちも同じです。
上記URLの記事では、巡ってきたページによって移動モードが切り替わるJS(jQuery)を掲載していらっしゃいます。
Super源さんご利用のテンプレートもjQueryのCDNが入っておりますので、自動切り替えのカスタマイズ如何ですか?(もし導入されたら教えて下さいね。)(^-^)
2020-01-23-23:25aki [ 返信 * 編集 ]

実装してみました。(^^)

akiさん、こんばんは。( ^-^)/
これ、いいですね!(^^)v
ということで、早速実装してみました。

が…、私のブログは、基本的に同じカテゴリーの連続投稿が多いためか、上下2段に同じリンクが並ぶことが多い、意味の良く分からないカスタマイズとなりました。【><】

たとえば、、、、。
以下からスタートして、”>”でページを送ってみてください。

https://www.zatsugaku-jiten.net/blog-entry-1770.html

(上下どちらの”>”を押しても、)数ページの間、ダブルで同じリンクが続きます。

しばらくこのままにしておきますので、良かったらご覧ください。(^^)

以上、”私のところではこのようになりました”という、1ユーザーとしてのごご報告でした。m(__)m
2020-01-23-21:39Super源さん [ 返信 * 編集 ]