WordPressテーマ『cocoon』のリンクカスタマイズ

WordPressの神テーマ『cocoon』の「最近の投稿」や「アーカイブ」などの、サイドバーのリンクをカスタマイズする方法です。

デフォルトだとリンクにカーソルを合わせると背景が薄いグレーになりますよね。
その部分を、別のデザインや色に変えるためのCSSコードです。
せっかくなので、自分のブログのイメージカラーに合わせてリンクの色もカスタマイズしましょう!

目次

サイドバーのリンク色を変える方法

管理画面の左メニューから
外観→カスタマイズ→追加CSS
と順に進み、追加CSSの欄に下記CSSコードをコピペで貼り付けてください。
サイドバーにあるウィジェットのリンクに全て反映されます。

CSSのソースコード

下記サンプルコードは、カーソルを合わせるとシンプルな下線が出る仕様です。
お好みのデザインにしてくださいませ。

.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover {
    border-bottom: solid 1px #000; /*下線:シンプルな線、線の太さ、下線の色*/
    background-color: #fff; /*リンクを合わせた時の背景色*/
    color: #333; /*リンクを合わせた時の文字自体の色*/
}
よかったらシェアしてね!
  • URLをコピーしました!
目次