スマホやPC等、異なるサイズのディスプレイに対応したページネーションのデザインサンプルです。ベースとなるページネーションは「レスポンシブなページ送りの設置」で紹介したfunctions.phpに追加するタイプを使います。
ここで紹介するデザインサンプルのCSSをコピペしてページネーションの見栄えを整えてみてください。
ページ送りの設置と概要
ページ送り本体の設置
ページ送り本体はfunctions.phpに関数を設置する形で実装します。
設置方法は下記ページを参考にしてください。
このように表示されていればページ送りを正しく設置できています。設置直後なのでCSSの装飾がありません。（既存のCSSの影響を受けている場合表示が多少異なることがあります。）
レスポンシブについて
表示の切り替わるブレイクポイントは520px以上、960px以上に設定していますが必要に応じて書き換えてください。1番小さいディスプレイ用のスタイルから指定し、画面幅が大きくなるに従ってスタイルを追加する形で記述しています。
上記のブレークポイントの設定値では主に次のディスプレイが該当します。
- [ ～519px ] スマートフォン縦
- [ 520px ～ 959px ] スマートフォン横・タブレット縦
- [ 960px ～ ] タブレット横・PC等
CODEPENの動作サンプルについて
それぞれのサンプル上部のボタン「HTML・CSS・Result」をクリックするとソースコードや実行結果の表示を切り替えることができます。CSSはSCSS記法で書いていますが、「View Compiled」をクリックしてコンパイル後のCSSを表示することもできます。
ブラウザ幅を増減するとサンプルの表示が切り替わることが確認できます。
CSSによるデザインサンプル
CSS適用時の注意点
既存CSSの影響等によりサンプル通りのデザインにならない場合があります。
その際はスタイルの上書きや優先度の調整を行ってください。
丸タイプ ピンク/グレー/ブルー
画面幅が520px未満の場合は前後ページへのボタンと現在ページ数の表示のみに留めています。
それ以上の画面サイズでは丸型のボタンで他のページへ直接移動できます。
See the Pen pagination 2.1 by web-souko (@web-souko) on CodePen.
See the Pen pagination 2.2 by web-souko (@web-souko) on CodePen.
See the Pen pagination 2.3 by web-souko (@web-souko) on CodePen.
角タイプ グレー/ブラウン
最小サイズでも最初と最後のページへのリンクを表示しています。
フォントサイズに対してボタンの範囲を大きめにしました。
See the Pen pagination 2.3 by web-souko (@web-souko) on CodePen.
See the Pen pagination 2.4 by web-souko (@web-souko) on CodePen.
帯+丸タイプ オレンジ/ブルー
ページネーションの範囲に背景色を指定して角丸にしました。分かりやすいよう<body>に背景色を指定しています。
See the Pen pagination 2.5 by web-souko (@web-souko) on CodePen.
See the Pen pagination 2.6 by web-souko (@web-souko) on CodePen.
帯+角タイプ レッド/グリーン
前述のページネーションを角ボタンに変更したパターンです。
See the Pen pagination 2.7 by web-souko (@web-souko) on CodePen.
See the Pen pagination 2.8 by web-souko (@web-souko) on CodePen.
その他のデザインサンプル（23.02.15追記）
別のページでもいくつかのデザインサンプルを掲載していますので参考にしてみてください。
最後まで読んでいただきありがとうございました。
