CSSで柔軟にデザイン変更することを想定した使い勝手のよいページネーションを制作しました。特徴としては、「レスポンシブで文字サイズの影響が無く、シンプルHTMLでカスタマイズしやすい」といったところを目標としています！
ページネーションの設置
ページネーション本体の設置については次の記事を参考にしてください。
archive.phpやcategory.php等のアーカイブテンプレートへの設置のほか、new WP_Query()によるループを使用した固定ページへの設置についても対応しています。
CSSでデザインカスタマイズ
見栄えの変更は全てCSSで行い、メディアクエリを使ってレスポンシブに対応します。ブラウザの幅を変更してレスポンシブ対応しているのを確認してみてください。
CODEPENのデモについて
CODEPENによるサンプルでは上部のボタンでソースの表示を切り替えられます。
CSSはSCSS記法で書いていますが「View Compiled」をクリックしてコンパイルされたCSSを表示することもできます。
右上の「EDIT ON CODEPEN」をクリックすると大きい画面で動作確認ができます。
レイアウトが切り替わるブレイクポイントは520px、960pxに設定しています。
ブラウザの幅を調整すると指定の画面幅で表示が切り替わることを確認できます。
HTMLは静的なサンプルですのでリンク等は機能しません。CSSの参考にご利用ください。
基本の状態
必要最低限のスタイルです。私はこれを元にカスタマイズしたものを使うことが多いです。
See the Pen pagination by web-souko (@web-souko) on CodePen.
四角-青
よく見かけるタイプになります。サイトに合わせて色を変更するだけで使えそうです。
See the Pen pagination 1.1 by web-souko (@web-souko) on CodePen.
丸-紫
丸型と色で遊び心のあるイメージです。border-radiusを調整して角丸にしても使えます。
See the Pen pagination 1.2 by web-souko (@web-souko) on CodePen.
フラット
クリック可能なエリアを広く取りやすいので操作しやすい印象です。
See the Pen pagination 1.3 by web-souko (@web-souko) on CodePen.
その他のデザインサンプル（22.02.24追記）
次のページにもCSSによるデザインサンプルを掲載しています。
こちらもコピペで利用できるので参考にしてみてください。
