【html&css】WordPressで使える！シンプルなページネーションデザイン3選

2026年2月25日

本記事では、WordPressで使えるシンプルなページネーションデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

おしゃれなフリー素材デザイン集

本サイトでは、ページネーション以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

おしゃれな素材デザイン集

見出し
ボタン
ボックス
ローディング
リスト
吹き出し
アコーディオンメニュー
検索フォーム
セレクトボックス
パンくずリスト
テキストボックス
ツールチップ
Q&Aリスト
引用ボックス
レーダーチャート
「READ MORE」ボタン
タブボタン
トグルボタン
チェックボックス
フッター
付箋
ページネーション
円グラフ
ラジオボタン
目次
棒グラフ
モーダルウィンドウ
タイムライン（ステップバー）

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

シンプルなページネーション

ここでは、以下のシンプルなページネーションデザイン例を記載しています。

シンプルなページネーションデザイン

単色
灰色背景
下線付き

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もページネーションページでは選択式でご用意しました。

調整項目一覧

基調色
形状：正方形, 円
前へ・次へ：あり, なし

ご興味があれば「ページネーション一覧ページ」を一読ください。

Code Stock

PAGINATION | Code Stock Simple pagination シンプルなページネーション前へ 1 2 3 4 5 次へ単色▼ 前へ 1 2 3 4 5 次へ灰色背景▼ < 1 2 3 4 5 > 下線付き▼ × デザイン調整 HTMLコピペ CSS

単色

HTMLコード表示

<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>

CSSコード表示

.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;
}

灰色背景

HTMLコード表示

<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>

CSSコード表示

.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;
}

下線付き

HTMLコード表示

<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>

CSSコード表示

.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;
}