Cocoonの記事下に出る「次の記事」「前の記事」へのリンク部分をカスタマイズしてみます。
カスタマイズサンプル
Before
After
- 枠線をつける
- ページャー左右の矢印マークの色変更
ホバー時
- 背景色をつける
- 少し上に浮き上がらせる
上（前の記事）リンク時
下（次の記事）リンク時
カスタマイズ方法
簡単なCSS追記のみです。
CSS追記は以下のいずれかから行って下さい。
外観→カスタマイズ→追加CSS
外観→テーマエディター→style.css
CSS
以下のCSSを追記します。
/************************//* 記事下ページナビ*//************************/#pager-post-navi .fa-chevron-left,#pager-post-navi .fa-chevron-right{
color:#003a75; /*矢印アイコンの色*/}
#pager-post-navi a{ /*枠線の設定*/background-color: #fff; /*背景色*/border: 1px solid #9dceff; /*枠線色*/border-radius: 15px; /*角を丸める*/transition: .3s; /*時間*/}
#pager-post-navi a:hover{ /*ホバー時*/background-color: #cee7ff; /*背景色*/transform: translateY(-5px); /*移動*/border-bottom: 2px solid #003a75; /*下線*/border-radius: 15px; /*角丸め*/box-shadow: 0 0 5px #cee7ff; /*影*/}
色はお好みでカラーコードを変更してご利用下さい。
カラーの変更
お好きなカラー設定には以下もご利用下さい。
マカロンビビッドパステル伝統色和色セーフ色名赤桃青紫黄橙緑茶黒