【Cocoon】カーソルを乗せたときの背景色を変える【WordPress】

こんにちは。よしくまです。

WordPressの画面でリンクにマウスカーソルを合わせたときに、選択項目が分かりにくいと思うことはないでしょうか。

「ホバー」とか「マウスオーバー」と言います。

例えば、サイドバーに表示させている「最近の投稿」「カテゴリー」「関連記事」などにマウスカーソルを乗せたときに背景の色です。

薄い色に設定されている場合は、背景の色を見えやすい色に変更しておくと選択しやすくなりますよ。

薄いグレーからグリーンに変えるとこんな感じ。

この記事では、WordPressテーマCocoonでマウスを乗せたときの背景色を設定する手順を画像つきで解説します。

設定前の準備

スタイルシートの編集をするので、下記のコードをコピーしておいてください。

/************************************
** 背景色設定
************************************/
.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,
.navi-in a:hover,
.navi-footer-in a:hover,
.a-wrap:hover,
.comment-reply-link:hover,
.recent-comments .a-wrap:hover .recent-comment-content,
.pagination a:hover,
.pagination-next-link:hover, .comment-btn:hover,
.pager-links a:hover span,
.pager-links a:hover span,
.mobile-menu-buttons .menu-button:hover,
.menu-drawer a:hover,
.bp-login-widget-register-link a:hover{
background-color: #CBFFD3; /*背景色*/
color: #333; /*フォントカラー*/
transition: all 0.5s ease;
}

設定手順

1.管理画面（ダッシュボード）の「外観」から「テーマエディター」をクリックします。

 

2.「編集するテーマを選択」が「Cocoon Child」になっていることを確認して、スタイルシート(style.css)の一番下に、先ほどのコードを貼りつけます。

 

3.画面下の「ファイルを更新」をクリックすると完了です。

背景色と文字色を変えたい場合は、下記の赤枠のカラーコードをそれぞれ変更します。

背景色がふわ～っと表示されるようにしたい場合は、一番下にある「transition: all 0.5s ease;」の数字0.5を1とか3に増やすと変更できますよ。

スキンや背景色と文字色のバランスを見て設定してみてくださいね。