PR
※当サイトには、アフィリエイト広告等が含まれています。閲覧者様が商品の購入や広告を見るだけで広告主からの収益が発生します。閲覧者様には感謝の念に堪えませんが、当サイトは広告主から収入を得ることで記事内容が左右されることは一切ありません。令和5年10月1日からステルスマーケティングは景品表示法違反となります。消費者庁

Cocoonでプルダウンメニューの「色」を変更する方法

プルダウンメニューの色を変更のロゴ

こんにちは、解説ゾロです!

今日は、グローバルメニューにマウスポインターを乗せた時のマウスホバー色とプルダウンメニューが表示されたときの色を変更して、少し目立つようにしてみました。

ブログのレイアウトや文字サイズ、文字色などをカスタマイズしたい時に、とても便利でよく使うワードプレスのスタイルシート(CSS)という場所に簡単なコードを入力するだけで、マウスポインターを乗せた時のマウスホバー色や、プルダウンメニューの色をお好みの色に変更できる方法を解説しますので、一緒にやりましょ!

とても簡単ですが、不安な方はローカルのWordPressで試したり、バックアップなどの対策を講じてくださいませ。自己責任でという言葉は、切り捨てるようで私はあまり好きではないのですが自己責任でお願いします。スミマセン、笑!私も昔、最初にスタイルシートをいじった時は緊張したのを覚えています。笑
スポンサーリンク
スポンサーリンク
スポンサーリンク

Cocoonでプルダウンメニューの「色」を変更する方法

グローバルメニューの項目(カテゴリーのメニューなど)、例えば、
の「ブログ」というメニュー項目にマウスポインターを乗せると、控えめに色が変化します。そして、
の「プルダウンメニュー」を表示させた時の色もこんな感じで控えめです。

プルダウンメニューの色を変更 既存の色

この同系色の控えめさもイイのですが、たまには、
のようにハッキリとわかるように主張させてみようかと思い、グローバルメニューにマウスポインターを乗せた時の「マウスホバー色」と「プルダウンメニュー色」を変更してみることにしました。

プルダウンメニューの色を変更でマウスホバー例

Cocoon設定画面

では、まず下準備をダッシュボードの「Cocoon設定」の画面から行います。それではWordPressの「ダッシュボード」にある、
の「Cocoon設定」をクリックしてください。すると「Cocoon設定」の画面に変わりますので、
の「ヘッダー」をクリックしてください。

プルダウンメニューの色を変更Cocoon設定のヘッダーから変更

2年間使い続けたマイクロソフト エルゴノミクスキーボード|レビュー

ヘッダー設定

今度は「ヘッダー設定」の画面に変わりますので、マウスで下の方にカリカリ移動すると、
の「グローバルメニュー色」という項目があります。そして、その右側に、
の「グローバルナビ背景色」があり、背景色を既に設定していたら、
の「色を選択」をクリックすると、下に表示された色の見本と、
には「#」から始まる6桁の「カラーコード」が表示されます。一応元に戻せるようにそのカラーコードを控えておくことをおすすめします。控えたら、その右にある、
の「クリア」をクリックして設定されていた今の色を解除します。そして、その下の段の、
の「グローバルナビ文字色」も同じ手順でカラーコードを控えたら「クリア」をクリックです。次は、
の「変更をまとめて保存」をクリックしてください。

プルダウンメニューの色を変更 既存の色をクリアにする

管理メニュー

次は
の「管理メニュー」をクリックすると、下にずら~っとメニューが表示されますので、
の「テーマの編集」をクリックしてください。

プルダウンメニューの色を変更でテーマの編集

2年間使い続けたマイクロソフト エルゴノミクスキーボード|レビュー

テーマの編集

すると「テーマを編集」の画面に変わります。とっても簡単ですのでご安心くださいませ。でも、自己責任で・・・笑! まず、
の「編集するテーマを選択」が「Cocoon Child」になっているか、必ず確認してください。スタイルシートでカスタマイズする場合は必ず「Cocoon Child(子テーマ)」で行って下さい。そして「Cocoon Child」を確認したら、
の「スタイルシート」をクリックすると、「Cocoon Child:スタイルシート(s)」が表示されますので、マウスでカリカリと一番下まで移動してください。移動できましたら、私の色の場合は、
③と④のようにコードを入力しますが、見やすいコードは、
が、こちらで、
/*プルダウンメニュー色*/
#navi .navi-in > .menu-header .sub-menu {
background-color: #0000ff;
}
上記3段目の「background-color」が背景色で、色は➡ #0000ff(ブルー系カラーコード)ということです。
は、こちらで、
/*メニューのマウスホバー色*/
#navi .navi-in a:hover {
background-color: #000080;
 transition: all 0.5s ;
color: #ffffff;
}
上記5段目の「color」は文字色で、色は➡ #ffffff(白系カラーコード)ということです。③と④の黒色の枠内部分のコードをスタイルシートの最後にコピペしますが、ご自分の変更したい好きな色をカラーコードのサンプルから探して、③と④の太字のカラーコードの部分と入れ替えてください。入れ替えたら、
「ファイルを保存」をクリックしてください。
プルダウンメニューの色を変更でスタイルシートにコードを入力

変更した色を確認

私が設定したマウスホバー色とプルダウンメニュー色をプレビュー画像で確認してみると、こんな感じで大成功です。カラーコードを選んでお好みの色を見つけてくださいませ。

プルダウンメニューの色を変更後の例

まとめ

今までは、アドセンス広告と被らないようにプルダウンメニューは利用していませんでしたが、カテゴリーを整理したこともあり、わかりやすいようにプルダウンメニューを設置しました。

そして、控えめな色からちょっと目立つ色に変更できたので今のところ、このスタイルで様子を見てみようと思います。

スタイルシートに書き込むということが緊張するかもしれませんが、ちゃんと慣れればカスタマイズに大変有効な作業になりますので、この機会にどうでしょうか!自己責任で・・・笑!

最後までお読みいただき、大変ありがとうございました。
解説ゾロ

プルダウンメニューの幅も変えられます!
腱鞘炎が治ってます!
タイトルとURLをコピーしました