無料で使えるWordPressテーマ【Simplicity2】に心底惚れ込んでしまっている、あらくま（@sa_arakuma）です。
このブログのトップページは Simplicity2のカスタマイズの「レイアウト（全体・リスト）」で『最初だけ大きな画像』 で、ブログのトップページの記事一覧のいちばん上の記事だけ画像を大きくしています。
グローバルナビにサブメニューをつけると、トップページにある最初の大きな画像でサブメニューに何が書かれているのがわかりにくくなっちゃたんで、今回はサブメニューをわかりやすくするために背景色をつけていく方法をお伝えしていきます。
本来はカスタマイズの色設定でサブメニューも背景色がつくはずなんです
Simplicity2ではカスタマイズ機能がとっても充実して、WordPress初心者でも簡単にカスタマイズしていくことができるようになっています。
なので、グローバルナビの背景色の設定も「カスタマイズ→色」にある『グローバルナビ色』で設定しておけば、グローバルナビのサブメニューもしっかりと背景色がつく ようになっています。
背景色が白だと画像が邪魔してサブメニューが見えづらい！
でもですね、グローバルナビの背景色を白で設定した場合に画像が邪魔をしてサブメニューに何があるのかが見えづらくなってしまうんです。
ね、何が書いてあるのかわかりづらいでしょ。
Simplicity2のカスタマイズは子テーマで
さっそくサブメニューも見えづらさを解消していきたいところですが、Simplicity2には子テーマが用意されていますので今回の内容に限らず、カスタマイズをするときには 子テーマを使ってカスタマイズ していきましょう。
親テーマでカスタマイズすることもできますが、Simplicity2は頻繁にアップデートしていますので、アップデートのたびにカスタマイズ内容をスタイルシートに書き込まないといけませんので。
解決方法はこれ！
Simplicity2でグローバルナビの設定はスタイルシートの 「#navi ul li a」で行われていますので、これに背景色を指定する『background-color: #ffffff;』を追加 すればサブメニューが画像に邪魔されずに見やすくなります。
これでグローバルナビのサブメニューが見やすくなりましたね。
おわりに
これでグローバルメニューのサブメニューが画像に溶け込んでしまわなくなって、わかりやすくなりました。
今回も最後までお付き合いくださって、ホントにありがとうございます！また次回お会いしましょう！！
