Cocoonのページネーションのデザインをカスタマイズする方法と、デザインサンプル5つ

Cocoonのページネーションのデザインをカスタマイズする方法と、デザインサンプルを紹介します。
背景色、文字色、フォント、枠線の変更などをすることができます。

編集するのはスタイルシート(CSS)のみです。

スポンサーリンク

Cocoonのページネーションのデザインをカスタマイズする方法

背景色、文字色、フォント、枠線の変更などのカスタマイズ方法です。

よく分からない人、面倒な人は下のデザインサンプルから気に入ったものをコピペして使ってください。

デザインを適用させるには、子テーマ(Cocoon Child)のスタイルシート (style.css)を開き、記事内のコードをコピーして貼り付けて下さい。

デフォルトのページネーションのデザイン

Cocoonデフォルトのページネーションは、グレーの枠付きの四角形角丸のデザインです。
ページ番号の上には[次のページ]というボタンも表示されています。

背景色を変更する

.page-numbers,
.page-numbers.dots {
 background-color: #949495;
}

背景色を変えるには、「page-numbers」と「page-numbers.dots」の「background-color」を変更します。

「page-numbers」はそれぞれのページ番号、「page-numbers.dots」は「…」の部分です。

枠線を変更する

.page-numbers {
border: 0;
}

枠線をなし(0)に設定しました。
「border: 3px double #ccc」で二重線にする、なども可能です。

文字色を変更する

.page-numbers {
 color: #c52a2a;
}

「page-numbers」の「color」で、文字色を指定することができます。

フォント/文字サイズを変更する

.page-numbers {
 font-family: serif;
 font-size: 30px;
}

わかりやすく、フォントをセリフ体(serif)にして、文字サイズを30pxにしました。

丸くする

.page-numbers {
 border-radius: 50%;
}

「border-radius」を指定することで、枠を丸めることができます。
要素のサイズに対して50%以上(pxでも指定可)にすると、完全な丸になります。

[次のページ]ボタンを非表示にする

.pagination-next {
 display: none;
}

私は、[次ページ]ボタンは「display: none;」で非表示にしてしまっています。

ページネーションのデザインサンプル5つ

1.シンプル

.page-numbers {
 border-radius: 0;
 border: 0;
}
.page-numbers.dots {
 background-color: #fff;
}
.pagination .current {
 background-color: #fff;
 font-weight: bold;
}

枠線や背景色をなくし、現在のページ番号(「.pagination .current」)は太字(「bold」)表示にしています。

2.シンプルスクエア

.page-numbers {
 border-radius: 0;
 border: 0;
}
.page-numbers.dots {
 background-color: #fff;
}

デフォルトの状態から枠線を消して、角の丸みをなくしたデザインです。

3.シンプルラウンド

.page-numbers {
 border-radius: 50%;
 border: 0;
}
.page-numbers.dots {
 background-color: #fff;
}

サンプル2の丸バージョンです。

4.シンプルスクエア+背景色

.page-numbers,
.page-numbers.dots {
 border-radius: 0;
 border: 0;
 background-color: #eee;
}
.pagination .current {
 background-color: #e7d7cf;
}

サンプル2のカラーバージョンです。

5.シンプルラウンド+背景色

.page-numbers,
.page-numbers.dots {
 border-radius: 50%;
 border: 0;
 background-color: #eee;
}
.pagination .current {
 background-color: #cfd9e7;
}

同じくサンプル2の丸バージョン。

さいごに

個人的には、[次のページ]ボタンはいらないかな、と思っています。

Comments

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