【レミアン様】プルダウンメニューにポインタを合わせた後の下層メニュー背景色について(Stinger8)

Stinger8 のメニュー色カスタマイズについてご質問を頂きました。

このテーマに限ったことではありませんが、ブラウザの開発者ツールを利用すればどのHTMLコードにどのCSSが効いているか確認できるので是非利用してみてくださいね。


WordpressのSEO対策ならRoot-013 Root-013ではWordPress・SEO対策・アフィリエイトなどサイト運営に関するご質問に無料でお答えしております。
WordPress 無料相談 アフィリエイト SEO 無料相談 無料!WPインストール代行・集客サポート

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)までは考慮していないので、スマホでの閲覧も確認し、カスタマイズしてみてください。

ご参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。