レスポンシブなページネーションのCSSデザインサンプル【WordPress】

以前にも紹介したfunctions.phpに追加するタイプのレスポンシブなページ送り。
CSSをコピペするだけのデザインサンプルを追加しました。

ブラウザ幅を動かすとデザインサンプルの表示が切り替わりレスポンシブになっていることを確認できます。

ページ送りの設置と概要

ページ送り本体の設置

ページ送り本体はfunctions.phpに関数を設置する形で実装します。
設置方法は下記ページを参考にしてください。

ページ送り設置後、CSS適用前の状態ではこのような表示になります。
既存のCSSの影響を受けている場合表示が多少異なることがあります。

レスポンシブについて

表示の切り替わるブレイクポイントは520px以上、960px以上に設定していますが必要に応じて書き換えてください。
1番小さいディスプレイ用のスタイルから指定し、画面幅が大きくなるに従ってスタイルを追加する形で記述しています。

上記のブレークポイントの設定値では主に次のディスプレイが該当します。

  • [ ~519px ] スマートフォン縦
  • [ 520px ~ 959px ] スマートフォン横・タブレット縦
  • [ 960px ~ ] タブレット横・PC等

CODEPENの動作サンプルについて

それぞれのサンプルの左上のボタン(HTML・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>に背景色を指定しています。
フレックスボックスの中央揃えを実現するためページネーション全体を<div class="pagination-wrapper">で括っています。
この<div>はページネーションが出力するものではないためテンプレートファイルに書き足してください。

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.

帯+角タイプ レッド/グリーン

前述のページネーションを角ボタンに変更したものです。
これも同様に<div class="pagination-wrapper">を書き足してページネーション全体を括ってください。

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.

Sassで編集したい方へ

Sassテンプレート (SCSS)

ここまでのサンプルの元となったSassを置いておきます。
Sassで自由に編集したい場合にご利用ください。

See the Pen Untitled by web-souko (@web-souko) on CodePen.


タイトルとURLをコピーしました