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

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

カスタマイズサンプル
- Before
- After
  - 表示
  - カーソルON時
カスタマイズ方法
ページネーション用CSS初期設定は

カスタマイズサンプル

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