記事の前後リンク(新しい投稿/前の投稿)を表示する方法


公式テーマContempo・Soho・Emporio・Notableでは、記事ページから前後の記事に移動するリンクがありません。

一般的なブログには良くある機能ですし、他の公式テーマにもある機能なので必要だと思う方が多いと思います。

本記事ではそんな前後リンク(新しい投稿/前の投稿)を表示させる方法を解説します。

少し手順が多いので、HTML編集に慣れてから試すのをオススメします。



HTML編集

先ずはHTML編集での作業になります。


HTMLの編集手順

左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。

それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。



HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。

HTMLの編集が終わったらプレビュー画面で確認して、保存をします。


手順①:ページネーションタグの追加

HTML編集画面右上のウィジットに移動を選択します。



そこから投稿ウィジットを選択します。

Emporioの場合は【Blog1】になります。



表示された30行くらい下に<b:include name='super.main'/> があります。

その直ぐ下に<b:include cond='data:view.isPost' name='postPagination'/>を書き加えます。



手順②:「新しい投稿」リンク生成コードの追加

手順①同様に投稿ウィジット【Blog1】を表示させ、<b:includable id='previousPageLink'>で検索します。

(全体で同じコードが2つありますがBlog1内にある方になります。)


検索したコードの後に続く

<b:comment>We don&#39;t show previeus page links in Emporio.</b:comment>

<a class='blog-pager-newer-link flat-button ripple' expr:href='data:newerPageUrl' expr:title='data:messages.newerPosts'><data:messages.newerPosts/></a>

に書き換えます。

(書き換え前のコードはテーマによって若干異なります。)


<b:includable id='previousPageLink'><b:comment>We don&#39;t show previeus page links in Emporio.</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>



手順③:「その他の投稿」を「前の投稿」に変更

手順①同様に投稿ウィジット【Blog1】を表示させ、<b:includable id='nextPageLink'>で検索します。

(全体で同じコードが2つありますがBlog1内にある方になります。)


その後に続くコードのmorePosts(その他の投稿)をolderPosts(前の投稿)に書き換えます。


                    <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>



トップページにページネーションを追加している場合

ページネーション(ページャー)の追加方法「その他の投稿」をコメントアウトしましたが、これを元に戻さないと「前の投稿」が表示されません。

ただそのまま戻してしまうとトップページのページネーションに干渉してしまうので、「記事ページだけ」という条件コードを追加する方法にします。


前項の手順③のコードの下に<data:messages.olderPosts/>があります。

コメントアウトしていたらそれを外し、<b:if cond='data:view.isPost'>~</b:if>で囲みます。


            <b:if cond='data:view.isPost'>
            <data:messages.olderPosts/>
            </b:if>



これでトップページのページネーションには表示されず、記事ページだけ「前の投稿」が表示されるようになります。



CSSの追加

続いてCSSの追加でリンクの位置や文字の大きさを調整します。


CSSの追加方法

左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。

そこから【詳細設定】の【CSSを追加】を選択します。



【カスタムCSSを追加】にCSSを入力できます。

後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。


手順④:前後リンク配置CSS

以下のようなCSSを追加してリンクの位置や文字の大きさを調整します。


.blog-pager-older-link{
margin-bottom:1em; /*下余白*/
margin-right:1em; /*右余白*/
float:right; /*右寄せ*/
font-size:1.2em!important; /*文字の大きさ*/
}
.blog-pager-newer-link{
margin-bottom:1em; /*下余白*/
margin-left:1em; /*左余白*/
float:left; /*左寄せ*/
font-size:1.2em!important; /*文字の大きさ*/
}

余白と文字の大きさはお好みで変更してください。



記事の前後リンク表示完了!

上記の手順で、記事の前後リンクは表示できます。


なぜ古いテーマにはあるのに新しいテーマでは省いてしまったのか謎ですね。

ただ個人的にはブログの前後リンクをあまり使わないので、不要かなとも思いつつ……。

まぁあっても邪魔にならない位置なので、今回を機にそのまま表示させています。


本記事は下記のブログを参考にさせて頂いております。


参考ブログ様

ふじろっく【ページネーション(前後記事リンク)を表示させる】

些細な日常【Bloggerブログの記事ページに新しい投稿や前の投稿のページネーションを付ける】


にほんブログ村 ブログブログ ブログサービスへ にほんブログ村 ブログブログ ブログノウハウへ