Cocoonの使い方やカスタマイズとオリジナルスキン

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

スポンサーリンク
カスタマイズ

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

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

カラーの変更

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

マカロンビビッドパステル伝統色和色セーフ色名

 

 

コメント

タイトルとURLをコピーしました