Bloggerテンプレート自作 #12：個別記事ページにページャを設置する

前回の「シェアボタンを作る」に引き続き、今回は「個別記事ページにページャを設置する」を実践してみようと思う。

まあ、記事リストの時に作ったものを転用するという方法もあるのだけれど、どうせなら個別記事専用のものということで「前の投稿（PREV）」「次の投稿（NEXT）」のリンクを作る方法をまとめることにした。


作業工程


記事リストのページャを転用する


HTML


Bloggerテンプレート自作 #12：個別記事ページにページャを設置する

<!-- 個別記事ページ -->
<b:includable id='single-post'>

  <!-- 個別記事の内容（省略） -->

  <!-- ページャを読み込む -->
  <b:include name='articles-pager' />
</b:includable>

「#9：記事リスト用のページャを作る」で作ったページャを、個別記事ページの下部に <b:include name='articles-pager' /> と記述することで呼び出すことができる。番号付きページャは「個別記事、固定ページでは無いページの場合に書き換える」という条件分岐が設定してあるので、個別記事と固定ページで呼び出したページャはデフォルトのデザインのままになる。

このままでもトップページおよび前後のページは呼び出せるので、既に作ったページャを転用する方法は作業的には結構楽。なお、このデザインは元々のCSSで設定したものを改変すれば変更できるが、ページ分岐によるデザインの切り替えはできないので注意（固定ページで呼び出した場合も同じデザインのページャが呼び出される）。

個別記事専用のページャを作る


HTML


<!-- 個別記事ページ -->
<b:includable id='single-post'>

  <!-- 個別記事の内容（省略） -->

  <!-- ページャを読み込む -->
  <b:include name='single-pager' />
</b:includable>

<!-- 個別記事用のページャ -->
<b:includable id='single-pager'>
  <div class="single-pager">
    <ul>
      <li class="prev-post-link">
        <a expr:href='data:olderPageUrl'><i class="fa fa-angle-double-left" aria-hidden="true"></i> PREV</a>
      </li>
      <li class="next-post-link">
        <a expr:href='data:newerPageUrl'>NEXT <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
      </li>
    </ul>
  </div>
</b:includable>

個別記事用のページャを作るには、記事リストのものとは別にコードを作る必要がある。

今回は「前の投稿」「新しい投稿」のリンクボタンを自分で作り、これをリストでまとめた。CSSでヨコ並びにしてデザインを整えれば、自動読み込みで作られたページャと相違ないものを作ることができる。

CSS


Bloggerテンプレート自作 #12：個別記事ページにページャを設置する

/* 個別記事ページャ
---------------------------------------------------------------------------- */

.single-pager {
  display: flex;
  margin: 10px 0;
}

.single-pager ul {
  display: flex;
  justify-content: center;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

.single-pager li {
  margin-right: 10px;
  width: 50%;
}

.single-pager li:last-child {
  margin: 0;
}

.share-area ul li {
  margin-left: 0;
}

.single-pager ul li a {
  display: block;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  background: #fff;
  color: #999;
  padding: 10px;
}

.single-pager ul li a:hover {
  opacity: 0.6;
}

/* 前の記事 */

.prev-post-link a {
  text-align: left;
}

/* 次の記事 */

.next-post-link a {
  text-align: right;
}

ページャのリンクリストをflexboxでヨコ並びにし、リンクボタンをブロックにしてボタンっぽくした。

ちなみに .single-pager li:last-child {} というセレクタは、ul内の最後のliを指定するもの。つまり、ここでは「NEXT」ボタンを指すことになるが、このCSSでは「NEXT」にかかったmargin-rightを消す指定を記述している。

これは「PREV」ボタンと「NEXT」ボタンの間にmargin-rightで隙間を開けるために、すべてのliにmargin-rightを設定し、これで生じた「NEXT」ボタンの右の隙間を消すために設定したもの。

li要素には:last-childをはじめ、even、odd、:nth-child()などが指定でき、リストの順番別のデザインを設定することができる。リストでボタンを作るとこういう指定が楽なので、覚えておくと結構便利。