Bloggerテンプレート自作 #9：記事リスト用のページャを作る

前回の「記事リストを作る」に引き続き、今回は「記事リスト用のページャを作る」を実践してみようと思う。

ページャとはページ送りのリンクのことで、これがないと記事リストを遷移することができない。

なお、Bloggerには標準で「新しい投稿」「ホーム」「前の投稿」のタグがあるが、番号付きは用意されてない。

なので、本記事では「標準のページャ」と「番号付きページャ」の設置方法をまとめることにする。


作業工程


標準のページャ


HTML


<!-- ページタイプの条件分岐 -->
<b:switch var='data:blog.pageType'>
  <!-- 個別記事の時 -->
  <b:case value="item" />
  <div>個別記事</div>
  <!-- 固定ページの時 -->
  <b:case value="static_page" />
  <div>固定ページ</div>
  <!-- それ以外 -->
  <b:default />
  <b:loop var='post' values='data:posts'>
    <b:include name='articles' />
  </b:loop>
    <b:include name='articles-pager' /><!-- ページャを呼び出す -->
</b:switch>
</b:includable>

<!-- 記事リストのタグ（省略） -->

<!-- 記事リスト用のページャ -->
<b:includable id='articles-pager'>
  <div class="pager-wrap">
    <div class='blog-pager' id='blog-pager'>
      <b:include name='nextprev'/>
    </div>
  </div>
</b:includable>

メインの条件分岐の下部にページャを呼び出すタグをまとめておき、メインの条件分岐の <!-- それ以外 --> の記事リストのループの下に <b:include name='articles-pager' /> と記述してページャを呼び出すようにした。

CSS


Bloggerテンプレート自作 #9：記事リスト用のページャを作る

/* 記事リストのページャ
---------------------------------------------------------------------------- */

.pager-wrap {
  display: flex;
  justify-content: center;
  padding: 0;
  margin-top: 30px;
}

#blog-pager {
  padding: 0;
  margin: 0;
}

.blog-pager a {
  display: inline-block;
  text-decoration: none;
  background-color: #fff;
  color: #999;
  padding: 6px 12px;
  margin: 0 2px;
}

.blog-pager a:hover {
  background-color: #ddd;
  color: #666;
}

/* 前の投稿 */
.blog-pager-older-link {
  font-size: 0;
}

.blog-pager-older-link::before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
  font-size: 13px;
}

/* ホーム */
.home-link {
  font-weight: 900;
  font-size: 13px;
}

/* 新しい投稿 */
.blog-pager-newer-link {
  font-size: 0;
}

.blog-pager-newer-link::before {
  font-family: "Font Awesome 5 Free";
  content: "\f104";
  font-weight: 900;
  font-size: 13px;
}

上記のようなCSSを当てると画像のような仕上がりになる。Blogger標準の「新しい投稿」「ホーム」「前の投稿」ではリンク先が分かりづらくてダサいので、「新しい投稿」と「前の投稿」は記号に置き換えている。

CSSでテキストを記号に置き換えるには、元のテキストをfont-size:0;で消し、::beforeにcontentを設置して、そこに書き換えたいテキストを記述すればキレイに書き換えることができる。

番号付きページャ


HTML


How To Add Next & Previous Numbered Pagination in Blogger（英語サイト）

結論から言って、Bloggerでの番号付きページャの実装はかなりややこしいので、他所様のコードをお借りすることにした。これを実装するには上記のサイトの記事内にある「Installing Next & Previous Pagination Script」以下のコードを </body> の上に貼り付けて、CSSで整形すればOK。

このコードは、テンプレート内の <div class='blog-pager' id='blog-pager'> <b:include name='nextprev'/> </div> をJavaScriptで番号付きページャに書き換えるもので、vanilla JS（ノーマルなJavaScript）で記述されているのでjQueryのCDNは読み込ませずに使用することができる（つまり、最初に記述した標準のページャを設定しないと動作しないので注意）。

CSS


Bloggerテンプレート自作 #9：記事リスト用のページャを作る

CSSも上記のサイトにいくつかのパターンが用意されているので、それをコピペして多少書き換えて整形すればOK。製作中のテンプレートでは、標準ページャのCSS（上記を参照）は影響しないので、残したままでも大丈夫なようだ。

で、製作中のテンプレートに合わせて以下のようにデザインした。

/* 記事リストの番号付きページャ
---------------------------------------------------------------------------- */

#blog-pager {overflow: visible}

/* Page * of * の表示 */
.showpageOf {
  visibility:hidden;
  font-size: 0;
  padding: 0;
  maegin: 0;
}

/* アクティブ番号 */
span.showpagePoint {
  display: inline-block;
  font-size: 13px;
  font-weight: 900;
  padding: 6px 12px;
  margin: 0 2px;
  background-color: #333;
  color: #fff;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 番号リスト */
span.showpageNum, span.showpage {
  margin: 0 2px;
}

.showpageNum a, .showpage a {
  display: inline-block;
  font-size: 13px;
  font-weight: 900;
  padding: 6px 12px;
  color: #999;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

ちなみに、このJSのコードでは番号付きページャの冒頭に「Page * of *」と何ページ中の何番目にいるかが表示されるコードが組み込まれているのだが、紹介されているCSSでは display:none; で消されている。

これを自分が visibility:hidden; に書き換えている理由は、SEO的に display:none; がサイトの評価を下げると言われているからだ。もうちょい詳しく言うと、レスポンシブでの切り替えなど、ユーザビリティに配慮した display:none; は問題ないものの、ただ処理を隠すためだけの display:none; は良くないと評価されるらしい。

というわけで、元のCSSは明らかに処理を隠すためだけの display:none; なので、これを同じように見えるように処理を変更した。なお、display:none; っぽく見せるには visibility:hidden; font-size: 0; padding: 0; maegin: 0; の4つを記述すればOK。

visibility:hidden; は要素の表示範囲を残しつつ見えなくする処理なのだが、これに font-size: 0; padding: 0; maegin: 0; を合わせることで表示範囲も無くしたように見せることができる。しかし、この合せ技は消せる要素が限られているので、単純なものであれば問題なく消せるが、ボタンやチェックボックスなど複雑なものを混ぜたコードなんかだと上手く消せないことがあるので、そうした場合は display:none; の使ったほうがキレイに消せる。

問題点


ラベルページで通常のページャに戻ってしまう問題


コードの記述上は、個別記事ページと固定ページ以外は番号付きページャになるハズなんだけど、なぜかラベルページでは通常のページャに戻ってしまう（2ページ以降は番号化する）。原因はおそらくJavaScriptのバグだと思う。

これを回避するにはラベルのURL指定の「expr:href='data:label.url'」から「expr:href='data:label.url + &quot;?&amp;max-results=10&quot;'」に書き換えることで回避できる。

これは過去記事でも触れていたので、今回は気づいた時に回避できた。

【Blogger】番号付きページナビを導入して、ラベルページに適応されない場合の対処法【Vaster2】
Blogger（Vaster2）に番号付きページナビを導入して、ラベルページに適応されない場合の対処法についてまとめています。