2021.07.02CSSで柔軟にデザイン変更することを想定した使い勝手のよいページネーションを制作しました。丸-紫フラットその他のデザインサンプル(22.02.24追記)ページネーションの設置ページネーション本体の設置については次の記事を参考にしてください。WP_Query()によるループを使用した固定ページへの設置についても対応しています。使用した投稿一覧にも使用可能なページ送りを設置します。設置したページ送りの見栄えを整えるためのCSSデザインサ...web-souko.com2021.12.14CSSでデザインカスタマイズ見栄えの変更は全てCSSで行い、メディアクエリを使ってレスポンシブに対応します。ブラウザの幅を変更してレスポンシブ対応しているのを確認してみてください。CODEPENのデモについてCODEPENによるサンプルでは上部のボタンでソースの表示を切り替えられます。Compiled」をクリックしてコンパイルされたCSSを表示することもできます。CODEPEN」をクリックすると大きい画面で動作確認ができます。レイアウトが切り替わるブレイクポイントは520px、960pxに設定しています。ブラウザの幅を調整すると指定の画面幅で表示が切り替わることを確認できます。HTMLは静的なサンプルですのでリンク等は機能しません。CSSの参考にご利用ください。必要最低限のスタイルです。私はこれを元にカスタマイズしたものを使うことが多いです。CodePen.四角-青よく見かけるタイプになります。サイトに合わせて色を変更するだけで使えそうです。丸型と色で遊び心のあるイメージです。border-radiusを調整して角丸にしても使えます。CodePen.フラットクリック可能なエリアを広く取りやすいので操作しやすい印象です。CodePen.その他のデザインサンプル(22.02.24追記)次のページにもCSSによるデザインサンプルを掲載しています。こちらもコピペで利用できるので参考にしてみてください。レスポンシブなページネーションのCSSデザインサンプルとWordPressへの実装方法【スマホも見やすく】スマホやPC等、異なるサイズのディスプレイに対応したページネーションのデザインサンプルです。ベースとなるページネーションは「レスポンシブなページ送りの設置」で紹介したfunctions.phpに追加するタイプを使います。ウェブ倉庫.メニューホームウェブ制作ホビーお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。