Contempo や Emporio 等の新テーマでデフォルトでは表示されない前後記事リンクを表示させます。
テーマ編集は必ず予めバックアップを取ってから行って下さい。
導入手順
①ページネーションタグの追加
まず下準備として記事ページにページネーションを表示させるためのタグを追加します。
テーマのHTML編集にて「Blog1」を検索で探します(編集画面内をクリックでアクティブな状態にして Ctrl + F で検索できます)。
その30~40行ぐらい下(テーマによって位置が異なる)にあるタグ
<b:include name='super.main'/> のすぐ下に
<b:include cond='data:view.isPost' name='postPagination'/> をコピペで挿入します。
②「新しい投稿」のリンク作成
<b:includable id='previousPageLink'> を検索で探します(※2ヶ所ありますが、下の方だけでOKです)
<b:includable id='previousPageLink'><b:comment>Don't show</b:comment></b:includable>
を丸ごと以下の様に書き換えて下さい。
<b:includable id='previousPageLink'><a class='blog-pager-newer-link flat-button ripple' expr:href='data:newerPageUrl' expr:title='data:messages.newerPosts'><data:messages.newerPosts/></a></b:includable>
これでトップページや記事ページにページネーションが表示されます。
もし過去記事リンクの表示を「その他の投稿」から「前の投稿に」変えたい場合は
<b:includable id='nextPageLink'> を検索で探し(※2ヶ所ありますが、下の方だけでOKです) 以下のように変更します。
要は more を older に変えるだけです。
<b:includable id='nextPageLink'><a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
<data:messages.morePosts/>
</a>
</b:includable>
↓
<b:includable id='nextPageLink'> <a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.olderPosts'> <data:messages.olderPosts/> </a> </b:includable>
③CSS でリンクの位置を調整
このままの状態だとそれぞれのリンクが近すぎて使いづらいので、それぞれ両サイドに寄せます。
]]></b:skin> を検索で探し、そのすぐ上に以下のCSSを追記します。
.blog-pager-older-link{ float:right; } .blog-pager-newer-link{ float:left; }
float の right と left を逆にすると表示も左右逆にできます。
CSSを次のようにすることで、それぞれのリンクをもう少し内側に寄せて、文字サイズを一回り大きくしたり出来ます。
.blog-pager-older-link{ float:right; margin-right:1em; font-size:1.2em!important; } .blog-pager-newer-link{ float:left; margin-left:1em; font-size:1.2em!important; }
参考にさせて頂いた記事
些細な日常Bloggerブログの記事ページに新しい投稿や前の投稿のページネーションを付けるブログにBloggerの公式テーマのContempoを使うと記事ページに新しい投稿や前の投稿のページネーションが付いてなかった。他のSohoとEmporioとNotableも同じなんだ。付ける方法が見付かったので、喜ばしく取り入れてみた。https://www.nagahitoyuki.com/2018/07/set-up-pagination-of-newer-posts-and-older-posts-on-blogger-blog-article-page.html
コメントを投稿
別ページに移動します2 件のコメント (新着順)
ふじやん
>mさん
お役に立てたようで何よりです!
m
おかげ様で解決しました!
初心者の私にもわかりやすい内容で、大変助かりました。