Stinger8 のメニュー色カスタマイズについてご質問を頂きました。
このテーマに限ったことではありませんが、ブラウザの開発者ツールを利用すればどのHTMLコードにどのCSSが効いているか確認できるので是非利用してみてくださいね。
目次
Stinger8のメニュー色カスタマイズ
お世話になります。
wordpressで、テーマはStinger8でブログを制作中の初心者です。
ヘッダー部にドロップダウンメニューを作り、自分で調べながらCSSを追加したりして、メニュー部分の背景色を茶色に変えました。
また、マウスポインタを上に持って行った時にも、背景色が黄色に変わるようにしました。
その際、添付画像のように「韓国ドラマ」というメニューにポインタを持っていくと、下に下層メニューが表示されるのですが、その背景が真っ白のままです。
このポインタを合わせたときの下層メニュー背景色の変更方法が、かなり調べましたが分かりません。
もしお分かりになりましたら、ご教示いただければ幸いです。
どうぞよろしくお願いいたします。
ーレミアン
開発者ツールで見てみよう
＞レミアンさま
コメントありがとうございます！
コードの仕組みを理解するのに時間がかかりますよね。
そんな時は是非ブラウザの開発者ツールを利用してみてください。CSSを書き換えたり、追加したりすることができます。
Google Chrome ではF12キーもしくは、確認したい場所を右クリック ＞ 検証でソースを確認できます。
下層メニューにはホバー時以外display none が効いているのでそれを解除すれば表示することができます。下層メニューには以下のCSSが効いているので灰色になってしまいます。
header .smanone ul.menu li li a {
background: #f3f3f3;
/*以下略*/
}
僕はStingerは使ったことがありませんが、どのテーマでもメニューの構造は一緒です。
<ul> <li><a href="#">親メニュー1</a></li> <li><a href="#">親メニュー2</a></li> <li><a href="#">親メニュー3</a></li> </ul>
下層メニューがあるとこのようになります。
<ul>
<li><a href="#">親メニュー1</a></li>
<li><a href="#">親メニュー2</a>
<ul>
<li><a href="#">子メニュー1</a></li>
<li><a href="#">子メニュー2</a></li>
<li><a href="#">子メニュー3</a></li>
</ul>
</li>
<li><a href="#">親メニュー3</a></li>
</ul>
リストのタグul が入れ子になっているのがわかるでしょうか。
#st-menubox {
background: #8b4513;/* 背景色 */
}
レミアン様はこのコードでメニューの背景色を変えているようですが、この指定はあくまでメニューの外側のボックスの背景色なので、
/* リンク自体の背景色も決める */
#st-menubox a{
background: #8b4513;/* 背景色 */
}
としてあげることで全てのリンク背景色が変わると思います。応用すれば、
/* 親メニューの背景色 */
#st-menubox ul a{
background: ;
}
/* 子メニューの背景色 */
#st-menubox ul ul a{
background: ;
}
このように親メニューと子メニューで指定を変えることもできます。
ul a ＝ ulの中aタグに指定する。
ul ul a ＝ ulの中のulの中のaタグに指定する。
ということですね。
書き方・やり方はこれだけではありません。
1.開発者ツールを使ってみる・使い方を学ぶ
2.CSSの”上書き” ”優先順位”について学ぶ
これらについて調べれば、もっと自在にデザインをカスタマイズすることができるでしょう。
今回はメディアクエリ（@media）までは考慮していないので、スマホでの閲覧も確認し、カスタマイズしてみてください。
ご参考になれば幸いです。