【F-light】記事一覧ページの上部にページ番号を表示させる

当ブログ（F-light）で導入している番号ページネーションには、元々左側に閲覧中のページ番号を表示する機能があったのですが、無駄だと思ったので外してしまっていました。番号ボタンを見れば全体のページ数も見ているページの番号もわかりますからね。

上部に置いたら UX 向上？

昨日、とあるブログ（Blogger ではなく FC2）を覗いてみたら、ページ上部に現在のページ番号表示があるのを発見。あ、これはいいかも！と思い早速試してみたら思った以上に良さげな感じ。UX も向上するんじゃないかと思いますがどうでしょう？

トップページ(3ページ目)

トップページ(1ページ目) では非表示

ラベルページ

というわけで早速カスタマイズ手順を紹介しましょう。

※今回のカスタマイズは F-light 向けです。同じページネーションを導入済みの他のテーマでのやり方が知りたいという方はコメントでご相談下さい。

カスタマイズ手順

HTML を編集しますので、必ずテーマのバックアップを取ってから作業を行って下さい。

番号ページネーションコードの変更

HTML 編集で(akhir=maksimal),e+=""を検索で見つけます。

このコードを下記のように変更します。（"と"の間に赤文字の部分を挿入）

(akhir=maksimal),e+="<span class='showpageOf'>Page <span id='page-num'>"+nomerhal+"</span> / "+maksimal+"</span>"COPY

CSS の追加

/*==== 番号ページャー ====*/の CSS の末尾（画像の赤枠部分）に下記のコードを追加します。

#main-content {
  position: relative;
}
.showpageOf {
  position: absolute;
  top: -2.5em;
  left: calc(50% - 100px);
  background: var(--dark-bg);
  padding: 2px 1em;
  border-radius: 20px;
  width: 200px;
}
#page-num {
  font-weight: bold;
}
/*]]>*/</b:if><b:if cond='data:view.isHomepage'>/*<![CDATA[*/
.showpageOf {
  display: none;
}COPY

角丸の背景を付けて現在のページ番号（#paqge-num）だけ太字にしています。ページ数4桁でも1行で収まるように幅 200px にしています。お好みでスタイルを変更して下さい。

最後に

番号ページネーションの不要と思っていた機能の思わぬ活用方法を見つけて、これは是非紹介せねばと思い立ち記事を書きました。

もしどなたかのお役に立てたのならば幸いです。