Cocoonの記事下ページャーをカスタマイズ

Cocoon・カスタマイズ

2020.03.112024.01.25

この記事は約2分で読めます。

Cocoonの記事下に出る「次の記事」「前の記事」へのリンク部分をカスタマイズしてみます。

カスタマイズサンプル
- Before
- After
カスタマイズ方法
- CSS
- カラーの変更

カスタマイズサンプル

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; /*影*/
}

色はお好みでカラーコードを変更してご利用下さい。