「エンジョイ鉄旅!」は、青春18きっぷやその他のお得なきっぷでの鉄旅を楽しむブログ
鉄旅に便利でお得なきっぷの王様「青春18きっぷ」

乗り鉄さんからそうでない人までに発売開始から35年以上の人気を誇る「青春18きっぷ」。

今さら聞けない「青春18きっぷ」の基本中の基本を徹底解説しています!

青春18きっぷの詳細はこちら!

【Simplicity2カスタマイズ】グローバルナビの背景色が白の場合に画像のせいでサブメニューが見えづらくなるのを解消する方法

ブログ運営

無料で使えるWordPressテーマ【Simplicity2】に心底惚れ込んでしまっている、あらくま(@sa_arakuma)です。

このブログのトップページは Simplicity2のカスタマイズの「レイアウト(全体・リスト)」で『最初だけ大きな画像』 で、ブログのトップページの記事一覧のいちばん上の記事だけ画像を大きくしています。

グローバルナビにサブメニューをつけると、トップページにある最初の大きな画像でサブメニューに何が書かれているのがわかりにくくなっちゃたんで、今回はサブメニューをわかりやすくするために背景色をつけていく方法をお伝えしていきます。

サブメニューが画像のせいで見えづらくなるのは 背景色が白 のときだけです。
スポンサーリンク

本来はカスタマイズの色設定でサブメニューも背景色がつくはずなんです

Simplicity2ではカスタマイズ機能がとっても充実して、WordPress初心者でも簡単にカスタマイズしていくことができるようになっています。

なので、グローバルナビの背景色の設定も「カスタマイズ→色」にある『グローバルナビ色』で設定しておけば、グローバルナビのサブメニューもしっかりと背景色がつく ようになっています。

背景色が白だと画像が邪魔してサブメニューが見えづらい!

でもですね、グローバルナビの背景色を白で設定した場合に画像が邪魔をしてサブメニューに何があるのかが見えづらくなってしまうんです。

ね、何が書いてあるのかわかりづらいでしょ。

Simplicity2のカスタマイズは子テーマで

さっそくサブメニューも見えづらさを解消していきたいところですが、Simplicity2には子テーマが用意されていますので今回の内容に限らず、カスタマイズをするときには 子テーマを使ってカスタマイズ していきましょう。

親テーマでカスタマイズすることもできますが、Simplicity2は頻繁にアップデートしていますので、アップデートのたびにカスタマイズ内容をスタイルシートに書き込まないといけませんので。

【Simplicity2カスタマイズ】親テーマではなく子テーマでカスタマイズしていこう!
Simplicityをカスタマイズしていくときに、親テーマを使ってしまってはいませんか?Simplicityではカスタマイズしやすいように子テーマが用意されているので、カスタマイズは子テーマを使ってやっていきましょう。

解決方法はこれ!

Simplicity2でグローバルナビの設定はスタイルシートの 「#navi ul li a」で行われていますので、これに背景色を指定する『background-color: #ffffff;』を追加 すればサブメニューが画像に邪魔されずに見やすくなります。

子テーマのスタイルシートに『 #navi ul li a {background-color: #ffffff;} 』と書いても見えづらさを解消することはできませんでしたので、「#navi ul li a 」のすべてを子テーマにコピペして「 background-color: #ffffff; 」を追記しましょう。
どんなスタイルが適用されているのか調べたいときには、Chromeなら要素部分を右クリックして「要素を検証」、Firefoxなら「要素を調査」、Internet Explorerなら「要素の調査」で見る と編集対象箇所を調べることができます。

これでグローバルナビのサブメニューが見やすくなりましたね。

おわりに

これでグローバルメニューのサブメニューが画像に溶け込んでしまわなくなって、わかりやすくなりました。

今回も最後までお付き合いくださって、ホントにありがとうございます!また次回お会いしましょう!!