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

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

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

背景色を変更する

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

枠線を変更する

.page-numbers {
border: 0;
}

文字色を変更する

.page-numbers {
 color: #c52a2a;
}

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

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

丸くする

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

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

.pagination-next {
 display: none;
}

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

１．シンプル

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

２．シンプルスクエア

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

３．シンプルラウンド

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

４．シンプルスクエア＋背景色

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

５．シンプルラウンド＋背景色

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

さいごに