ページネーション(前後記事リンク)を表示させる

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&#39;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