Cocoonの記事一覧下ページ送り(ページネーション)をカスタマイズ

Cocoonの記事一覧ページでページの下に出るページ送りボタン（ページネーション）のデザインがあっさりしているので、少しカスタマイズしてみます。

カスタマイズサンプル

Before

初期デザインは、キーカラーで指定した色で1pxの四角い枠になっていて、カーソルが載った際も変わりはありません。

※キーカラーの設定は以下です。

Cocoon設定→全体タブ

After

• 「次ページ」の枠に背景色を付け、文字を太字に
• ページネーション（１．２．＞）を丸枠に
• カーソルが載った際は色を変える

表示

カーソルON時

次ページは初期値が背景色あり、カーソルONで白抜き

ページネーションはカーソルONで背景色

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ→追加CSS

外観→テーマエディター→style.css

「次ページ」ボタンデザイン

以下のCSSを追記します。

.pagination-next-link{
background: #839b5c; /*背景色*/color:#fff; /*文字色*/font-weight: bold; /*太字*/}
.pagination-next-link a:hover{ /*オンマウス時*/background: #fff;
color:#839b5c;
}

ボタンの角を丸める場合

.pagination-next-link{border-radius: 8px;}

ページネーションデザイン

以下のCSSを追記します。

.page-numbers{
border-radius: 50%; /*角丸*/color:#839b5c; /*文字色*/font-weight: bold; /*太字*/}
.pagination a:hover { /*オンマウス時*/background: #839b5c;
color:#fff;
}

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名赤桃青紫黄橙緑茶黒

ページネーション用CSS初期設定は

ちなみにCocoonのスタイルシート内で記述されているページネーション用のデザインは以下のようになっています。

/*ページネーション*/.key-btn {
 border:0;
 border-radius:4px;
 background-color: #FF847C;
 color:#fff;
}
.key-btn:hover {
 background-color: #ffeeed;
 color:#999;
}
.page-numbers {
 color: #333435;
 background-color: #fff;
 text-decoration: none;
 display: inline-block;
 height: 40px;
 width: 40px;
 border: 2px solid #cccdce;
 margin-left: 3px;
  line-height: 37px;
 text-align: center;
 border-radius: 6px;
}
.pagination .current {
 background-color: #fff;
 border: 2px solid #eb6988;
}