スキップしてメイン コンテンツに移動

Bloggerブログの記事ページに新しい投稿や前の投稿のページネーションを付ける

Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableでは記事ページに新しい投稿や前の投稿のページネーションがデフォルトで付いてないけれどもhtml編集のカスタマイズによって付ける方法が見付かって些細な日常で取り入れてみた。

些細な日常の記事ページに表示された新しい投稿と前の投稿のページネーションのリンク

ソースコードでは最初からページネーションのスペースが取られていて表示しないようにしているだけだからブログの記事ページに設置するための考え方は一から始めるよりは速やかなのが助かる。

ページネーションを取り入れる二つの手順

  1. テンプレートに設定する
    • 必要なリンクを生成する
  2. テンプレートに配置する

独自タグでページネーションを設定する方法

2017年の公式テーマはインデックスページに「その他の投稿」や「前の投稿」がデフォルトで付いている。ブログの投稿ガジェットのページネーションのソースコードから出力されていて実際には「新しい投稿」や「ホーム」も含まれていて表示されないようになっている。

<b:includable id='postPagination'>
  <div class='blog-pager container' id='blog-pager'>
    <b:include cond='data:newerPageUrl' name='previousPageLink'/>
    <b:include cond='data:olderPageUrl' name='nextPageLink'/>
    <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
  </div>
</b:includable>

四つのテーマで共通してソースコードのBlog1のwidgetに含まれている。

Bloggerの独自タグの<b:includable></b:includable>は他から参照できる部分で、付けられたidが他の独自タグの<b:include/>のnameで呼ばれてソースコードに出力される。

ページネーションのpostPaginationのidのincludableはそれ自体にincludeのnameを持っているからやはり他のincludableの内容を呼び込んでいるんだ。

postPaginationの三種類の参照先

previousPageLink
新しい投稿のリンクを生成する
nextPageLink
その他の投稿や前の投稿のリンクを生成する
homePageLink
ホームのリンクを生成する

デフォルトで反映するのは<b:include cond='data:olderPageUrl' name='nextPageLink'/>だけになっている。インデックスページでContempoとEmporioとNotableは「その他の投稿」、Sohoは「前の投稿」だ。ページネーションのソースコードが同じなのにどうして出力される内容が違うのかはそれ自体が持っているIncludeの「nextPageLink」の参照先のincludableの記述が違うのに由来している。

ブログの投稿ガジェットのソースコードにはページネーションに必要な三種類のincludable:nextPageLinkとpreviousPageLinkとhomePageLinkの記述されていてページネーションのincludableに含まれるincludeのnameで個々に呼び出されている。

Sohoは全て中身があるけど、ContempoとEmporioとNotableは<!-- Don't show -->(表示しない)となっていて中身がない。だからページネーションを新しく配置するとしても表示されないので、先ずは<!-- Don't show -->を消すと共に中身を記述しなくてはならない。

注意すると2017年の公式テーマではページネーションの参照先について同じ記述が二つある。中身を記述して使用する場合にはブログの投稿ガジェット:Blog1のidのwidget内から選ぶ。もう一つはソースコードのデフォルトの設定だから記述しても構わないけれども呼び込まれるのはブログの投稿ガジェットが優先されるので、空のままで呼び込まれて何も反映しなくなるのを避けるために必ず記述する。

Sohoはもう既に記述されている(デザインのために内容が増えてソースコードは長いもののページネーションを作り出す骨子は変わらない)から設定については省略して大丈夫だけれどもページネーションのリンクを生成する内容に関わるからリンク名/アンカーテキストを変更するなどのソースコードの修正を行うためには部分的な書き換えが求められる。

新しい投稿のリンクを生成するソースコード

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

記事ページのページネーションに前の投稿を付ける場合、ContempoとEmporioとNotableではもう一つのnextPageLinkのincludableも編集しなくてはならない。何もしないとインデックスページのために記述された「その他の投稿」が表示されてしまう。リンク先のURLは大丈夫だけれどもリンク名/アンカーテキストを「前の投稿」に変更するためには独自タグで振り分けて追加すると良いと思う。

記事ページの前の投稿をインデックスページのその他の投稿と振り分けてリンクを生成するソースコード

<b:includable id='nextPageLink'>
  <b:if cond='data:view.isPost'>
    <a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.olderPosts'>
      <data:messages.olderPosts/>
    </a>
  <b:else/>
    <a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
      <data:messages.morePosts/>
    </a>
  </b:if>
</b:includable>

それぞれの違いは「olderPosts」(前の投稿)と「morePosts」(その他の投稿)なんだ。リンクの先のURLはどちらもリンクタグのaに「data:olderPageUrl」が出力されて同じように機能している。因みにサイトアドレスの構成は違う。nextPageLinkで使われる「data:olderPageUrl」のURLはインデックスページだと一つ前のインデックスページへ、記事ページでは一つ前の記事ページへ向けられるようになる。

Sohoテーマが「その他の投稿」を表示しないけれどもインデックスページも「前の投稿」に変わって良ければもっと短く纏められる。

前の投稿のリンクを生成するソースコード

<b:includable id='nextPageLink'>
  <a class='blog-pager-newer-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.olderPosts'>
    <data:messages.olderPosts/>
  </a>
</b:includable>

ContempoとEmporioとNotableではデフォルトで「morePosts」の二ヵ所を「olderPosts」に書き換えるだけだ。

リンク名/アンカーテキストを変更したい場合

新しい投稿も前の投稿やその他の投稿もリンクタグのaに囲まれた独自タグのdataのところがリンク名/アンカーテキストになっているから変更したい場合には消去して他のデザインにしても構わない。

<b:includable id='previousPageLink'>
  <a class='blog-pager-newer-link flat-button ripple' expr:href='data:newerPageUrl' title='次の投稿'>
      次の投稿
  </a>
</b:includable>

リンクタグのtitle属性(パソコンで内容が表示される)も同じにするべきだから接頭の「expr:」と値のdataのところを消去して書き換える。

ページネーションは個々に設定しなくても出力できる

PostPaginationのincludableが持っている三種類のincludeはnameの値の最初に「super」を付けて半角コンマ(.)で区切って書き換えるとそれだけで新しい投稿や前の投稿やホームのリンクタグが出力されて使えるようになるんだ。

<b:includable id='postPagination'>
  <div class='blog-pager container' id='blog-pager'>
    <b:include cond='data:newerPageUrl' name='super.previousPageLink'/>
    <b:include cond='data:olderPageUrl' name='super.nextPageLink'/>
    <b:include cond='data:view.url != data:blog.homepageUrl' name='super.homePageLink'/>
  </div>
</b:includable>

簡単なので、良いと思うけど、ただしインデックスページが「その他の投稿」だとしたら「前の投稿」と別に表示されてしまうので、記事ページと振り分けるには個々に設定しなくてはならない。

ホームのリンクを生成するソースコード

Bloggerのページネーションは三種類が使える。新しい投稿と前の投稿に加えてホームだけれども方法は他の二つと全く同じだ。Sohoは記述済みだから省略可能だから何もしなくても大丈夫なので、リンク名/アンカーテキストの「ホーム」を変える場合、そしてContempoとEmporioとNotableはブログの投稿ガジェットから出力する部分のincludableを編集する。

<b:includable id='homePageLink'>
  <a class='home-link flat-button ripple' expr:href='data:blog.homepageUrl' expr:title='data:messages.home'>
    <data:messages.home/>
  </a>
</b:includable>

またはページネーションのincludableが持っているホームのincludeのnameを「super.homePageLink」に書き換えるだけでも使える。

独自タグでページネーションを配置する方法

記事ページのページネーションはpostPaginationのidのincludableに含まれていて他のincludeのnameから呼び出して配置する。

<b:include cond='data:view.isPost' name='postPagination'/>

記事ページだけページネーションを出力するソースコードで、cond='data:view.isPost'が記事ページの振り分けを意味している。

ページの投稿ガジェットのソースコードへ出力可能なincludableの中にページネーションのincludeを記載するとリンクタグなどの通常のhtmlのマークアップに置き換えられてページネーションがブログに表示されるようになる。

一般的に<b:includable id='main'></b:includable>がBloggerのガジェットの出力可能なソースコードの領域を示して<b:include name='super.main'/>が全体に当て嵌まるけど、すると続けてページネーションを記載した場合にはページの投稿ガジェットの最後にページネーションが配置される。

<b:includable id='main'>
  中略
    <b:include name='super.main'/>
    <b:include cond='data:view.isPost' name='postPagination'/>
  中略
</b:includable>

ページの投稿ガジェットのソースコードへ出力可能なincludableはmainの他にも様々に見付かる。それぞれに持っているincludeが通常のhtmlのマークアップに置き換えられるから例えば「super.headerByline」(タイトル下の日付の部分)や「footerBylines」(本文下のラベルの部分)など、何れも周りにページネーションを配置して構わない。

ページネーションを配置する際に注意するべき二つの条件

  • 何等かのincludableに含める
  • BlogのtypeのWidgetに含める

Bloggerの独自タグのincludeは独自タグのincludableの要素として機能するので、必ず何等かの<b:includable></b:includable>の中に記載しなくてはならない。そしてページネーションのためのincludeはページの投稿ガジェットでしか使えないので、独自タグのwidgetのtypeがBlogの要素に記載しなくてはならない。二つの条件を満たして配置するかぎり、ブログのソースコードにマークアップが自動的に出力されてページネーションの新しい投稿や前の投稿のリンクが追加される。

cssでページネーションにデザインを付ける

Bloggerの2017年の公式テーマではソースコードの<b:skin></b:skin>の中の「Blogger Template Style」以下が主なcssの記述/ブログのhtmlのhead内にのマークアップで出力される部分になっている。

cssの指定先はページネーションの全てに共通してpostPaginationのincludableに含まれる領域タグのdivのclassの「blog-pager」やidの「blog-pager」が付いていて個別にはそれぞれのincludableのリンクタグのaに新しい投稿はclassの「blog-pager-newer-link」が、前の投稿はclassの「blog-pager-older-link」が付いているので、使うと例えばborder(枠線)やbackground-color(背景色)などのデザインが色々と追加できるから便利だ。

ページネーションの位置取りを調整する方法

難しいのが位置取りを調整する場合で、ページネーションが最初か最後の記事で前の投稿か新しい投稿の一つだけ表示されるならばインデックスページの特に支障はないかも知れないにせよ、途中の記事では両方が表示されてくっ付いてしまうから間隔を取りたいと思う。

SohoとNotableはデフォルトでページネーションに右寄せがかかっているからそのままならば画面の端に近いリンクの前の投稿の左側に余白を付ければ一つだけ表示される場合でも位置取りは崩れないだろう。

.blog-pager-older-link {margin-left:入力値;}

※入力値は8pxや1emなどの数値。

ContempoとEmporioはデフォルトでページネーションに中寄せがかかっていて難しい。個別のリンクにmarginやpaddingで余白を付けると一つだけ表示される最初と最後の記事ページでずれてしまったり、両方でもパソコンとスマホの大小の画面幅でバランスを取るのが大変だからページネーションを指示タグのnavなどで囲ってFlexboxの「display:flex」からさらにjustify-contentを指定して均等に並べるのが良いと思う。

SohoとNotableでデフォルトの右寄せのデフォルトから中寄せに変える場合でも同じように使える。

Flexboxを使うためのソースコード

独自タグとhtml

<b:includable id='postPagination'>
  <nav>
  <div class='blog-pager container' id='blog-pager'>
    <b:include cond='data:newerPageUrl' name='previousPageLink'/>
    <b:include cond='data:olderPageUrl' name='nextPageLink'/>
    <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
  </nav>
  </div>
</b:includable>

css

.blog-pager nav {display:flex;justify-content:入力値;}

justify-contentの入力値:space-aroundのサンプル

.blog-pager nav {display:flex;justify-content:space-around;}

二つのリンクは間隔を開けて両端は半分の間隔で均等に並ぶ。

justify-contentの入力値:space-evenlyのサンプル

.blog-pager nav {display:flex;justify-content:space-evenly;}

二つのリンクは間隔を開けて両端も同じ間隔で均等に並ぶ。

justify-contentの入力値:space-betweenのサンプル

.blog-pager nav {display:flex;justify-content:space-between;}

二つのリンクは画面の両端にぴったり分けられる。

ContempoとEmporioでページネーションを右寄せにして間隔を取る場合もFlexboxを使うと良いと思うけど、ただし現時点で隙間を取るgap属性に対応するブラウザが少ないみたいだから画面の端に近いリンクの前の投稿の左側に余白を付けなくてはならない。

Flexboxで右寄せして一文字の間隔を取ったページネーションのサンプル

.blog-pager nav {display:flex;justify-content:flex-end;}
.blog-pager-older-link {margin-left:1em;}

四つのテーマでデフォルトのデザインではなく、ページネーションを左寄せにする場合はFlexboxの右寄せで右寄せにした場合のソースコードの内容を反対向きに入れ換えるように記述する。

Flexboxで左寄せして一文字の間隔を取ったページネーションのサンプル

.blog-pager nav  {display:flex;justify-content:flex-start;}
.blog-pager-newer-link {margin-right:1em;}

Flexboxで指定するjustify-contentのflex-start(開始方向から表示)とflex-end(終了方向から表示)はコンテンツの並び方から捉える。日本語のサイトだと左から右へ進むので――Bloggerの公式テーマでは出だしのhtmlに「dir='ltr'」(コンテンツは左から右へと進む)が明記されてもいる――アイテムの右寄せにはjustify-contentのflex-endを、左寄せにはjustify-contentのflex-startを使うんだ。

ページネーションの上下の余白を調整する方法

cssで余白を付けるには外側のmarginと内側のpaddingの二つの俗世がある。ページネーションで試してみると他のデザインが干渉しているようで、配置した場合によって使えるかどうかが違うから確かめながら調整するしかないと思う。

上の外側の余白を付けるソースコード

.blog-pager {margin-top:入力値;}

上の内側の余白を付けるソースコード

.blog-pager {padding-top:入力値;}

下の外側の余白を付けるソースコード

.blog-pager {margin-bottom:入力値;}

下の内側の余白を付けるソースコード

.blog-pager {padding-top:入力値;}

※入力値は8pxや1emなどの数値、-8pxや-1emなど、半角のマイナス(-)を付けると余白は縮まる。

他に記事下でページの投稿ガジェットの<b:include name='super.main'/>の次にページネーションを記載すると上の余白はpadding-topで変えられるけれども下の余白は駄目で、margin-bottomでも変更できない。

ページネーションに余白を付けられない場合は周りのコンテンツの余白を変更するとデザインは同じになるから大丈夫なんだ。

記事下にページネーションを配置して下の余白が付けられなくて次のコンテンツが人気の投稿ガジェットとするとidの「#PopularPosts1」にmargin-topやpadding-topを指定するとデザインは反映する。

ブログの訪問者が記事ページの新しい投稿や前の投稿のページネーションを使う可能性は低いと思うし、2017年の公式テーマでは人気の投稿ガジェットが付けられたり、またはアドセンスの関連コンテンツなどを配置して他の記事を画像と文章で鮮やかに紹介する方が大切だろう。

しかし記事同士の内部リンクが増やせるのはSEO(検索エンジン)対策に良いかも知れない。サイト内容を解析するGoogleなどの検索エンジンのクローラーがブログを巡回し易くなるので、記事が良いかぎり、サイト評価が上がる確率が高まる。検索結果で上位に表示されてアクセスアップを図るためにページネーションは役立つと考える。

参考:How to add "next post" and "previous post" links in the end of blog post Blogger Notable Template - Post Pagination Fix or Replacement?

コメント

些細な日常の人気の投稿

Imgurで画像URLと埋め込みコードを取得する方法

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策