WordPressブログなら、あなたのコーディング知識でデザインのカスタマイズが自由自在。
ブログデビューに最適な初心者向けサーバー環境を徹底比較しました。
本記事では、WordPressで使えるシンプルなページネーションデザインのコードをご紹介します。
HTMLとCSSの両方をコピペすればすぐに利用できます。
コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。
また、ページネーションを作成するにはul・li・olタグを利用します。
ul・li・olタグの使い方を詳しく知りたい人は「【html&css】ul・li・olの使い方とおしゃれなデザインリスト」を一読ください。
本サイトでは、ページネーション以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。
以下は、主なデザインカテゴリーです。
ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。
ここでは、以下のシンプルなページネーションデザイン例を記載しています。
実際のデザインプレビューとHTML＆CSSコードを記載しています。
さらに、以下の項目もページネーションページでは選択式でご用意しました。
ご興味があれば「ページネーション一覧ページ」を一読ください。
<ol class="pagination-1">
<li class="prev"><a href="#">前へ</a></li>
<li><a href="#">1</a></li>
<li class="current"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">次へ</a></li>
</ol>.pagination-1 {
display: flex;
justify-content: center;
align-items: center;
gap: 0 8px;
list-style-type: none;
padding: 0;
}
.pagination-1 a {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
border: 1px solid #2589d0;
border-radius: 1px;
color: #2589d0;
}
.pagination-1 a:not(:hover) {
text-decoration: none;
}
.pagination-1 .current a {
background-color: #2589d0;
color: #fff;
pointer-events: none;
}
.pagination-1 .prev a,
.pagination-1 .next a {
gap: 0 4px;
width: auto;
padding: .5em .8em;
line-height: 1;
}
.pagination-1 .prev a::before,
.pagination-1 .next a::after {
display: inline-block;
transform: rotate(45deg);
width: .3em;
height: .3em;
content: '';
}
.pagination-1 .prev a::before {
border-bottom: 1px solid #2589d0;
border-left: 1px solid #2589d0;
}
.pagination-1 .next a::after {
border-top: 1px solid #2589d0;
border-right: 1px solid #2589d0;
}<ol class="pagination-2">
<li class="prev"><a href="#">前へ</a></li>
<li><a href="#">1</a></li>
<li class="current"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">次へ</a></li>
</ol>.pagination-2 {
display: flex;
justify-content: center;
align-items: center;
gap: 0 8px;
list-style-type: none;
padding: 0;
}
.pagination-2 a {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
border-radius: 1px;
background-color: #f2f2f2;
color: #2589d0;
}
.pagination-2 a:not(:hover) {
text-decoration: none;
}
.pagination-2 .current a {
background-color: #2589d0;
color: #fff;
pointer-events: none;
}
.pagination-2 .prev a,
.pagination-2 .next a {
gap: 0 4px;
width: auto;
padding: .5em .8em;
line-height: 1;
}<ol class="pagination-3">
<li class="prev"><a href="#">前へ</a></li>
<li><a href="#">1</a></li>
<li class="current"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">次へ</a></li>
</ol>.pagination-3 {
display: flex;
justify-content: center;
align-items: center;
gap: 0 8px;
list-style-type: none;
padding: 0;
}
.pagination-3 a {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
border-bottom: 2px solid #f2f2f2;
color: #333;
text-decoration: none;
}
.pagination-3 .current a {
border-bottom: 2px solid #2589d0;
pointer-events: none;
}HTMLコードは、ページ送りを表示させたい場所（記事一覧の下など）に貼り付けます。
CSSコードは、WordPressテーマの「追加CSS」や子テーマのスタイルシートに貼り付けてください。
WordPressで動的に出力するには、the_posts_pagination()などの関数が吐き出すHTMLクラス名に合わせて、当記事のCSSのセレクタを書き換えるか、出力されるHTML構造自体をカスタマイズする必要があります。
現在のページのHTMLタグ（<li>や<a>）に対して、専用のクラス（例：.currentや.active）を付与し、そのクラスに対してCSSで背景色や文字色を指定することで色を変えることができます。
スマホなどの画面幅が狭いデバイスでは、CSSのメディアクエリを使って「最初と最後、および現在のページの前後」以外の番号をdisplay: none;で非表示にするなどレスポンシブ対応を行う必要があります。
可能です。
HTML内の数字の部分を「前へ」「次へ」という文字に書き換えるか、FontAwesomeなどの矢印アイコン（<i class="fas fa-angle-right"></i>など）に差し替えることで変更できます。
サイト制作でお困りの人はお気軽にご連絡ください。
どんなお悩み事も丁寧に返信させて頂きます。
「どのサーバーを選べばいいか分からない…」そんな悩みを解決！
WordPressデビューに最適なサーバーを徹底比較しました。
