WEBサイト制作

【テーマ】「Marlin lite」でメニューの副項目が表示されない問題を修正

みなさんこんにちは。三上つかさです。

当サイトの更新はあまりできていませんが、その間にも新しいサイトを作ってみたり、テーマをいじって遊んでみたりしていました。

ありがたいことに、WordPressには無料のテーマがたくさんあって、その中から一つ選ぶのは結構骨が折れたりします。そして、いざ決めたテーマで不具合なんかがあると、大きなショックがあったりします。

ちなみに、テーマはほとんどコチラから選ばせていただいております。ありがとうございます。
【2018年版】おすすめのWordPressテーマ50選:無料と有料まとめて紹介- サルワカ

私が今回、試しに作ってみたサイト(HotelMan’s Book)は、「Marlin Lite」というテーマを使用していますが、メニューを作っていく中で、とある問題が発覚しました。

それは、グローバルメニューを「Primary menu」の位置に設定したとき、副項目のメニューが表示されなくなるという問題でした。

「Marlin lite」メニューの副項目が白くなる

本来なら、メニューの副項目に設定したものは、ドロップダウン形式で下に表示されるはずです。

しかし、副項目が表示されるはずの空間が、真っ白で文字が表示されなくなってしまいます。

これはPCサイズの表示の時のみ起こる現象で、スマホ・タブレットサイズでは問題なく表示されます。

なぜこんな現象が起こってしまうのか。

それは、たた単純に色の指定を忘れてしまっていたからです。

メニューの主項目のテキストの色は白ですよね?

これは、CSSの「#nav-wrapper .vtmenu a」の項目で「color: #fff;」の指定がされているため、白色で表示されているのです。

そして、副項目のCSSは「#nav-wrapper .sub-menu」でされているのですが、ここに「color」の指定がされていないのです。おそらく、書き漏れだと思われます。そのため、主項目のテキストの色が継承され、白色になってしまったのです。

白色の背景に白色のテキストなので、表示されていないように見えていたというわけです。

「Marlin lite」メニューの副項目を表示させる

それでは、メニューの副項目を表示させる方法をご紹介します。

大きく分けて2パターンあります。

1、背景色を変える

先ほど、副項目のCSSは「#nav-wrapper .sub-menu」と説明しましたが、ここの「background: #fff;」の指定を、違う色にしてあげればいいのです。

上の図では、一例として、黒色に変えてみました。

style.cssの「#nav-wrapper .sub-menu」background: #fff;を、違う色に変えてみてください。

色の一例として、3つの色を紹介します。

メニューの色⇒「オレンジ:#f25d46」
タイトルの色⇒「薄いオレンジ:#f88e86」
タイトルの変化の色⇒「青:#337ab7」

サンプル画像(薄いオレンジ)↓

 

2、文字色を変える

背景が白色のままがいい場合は、テキストの色を変えるという方法があります。

style.cssの#nav-wrapper .vtmenu .sub-menu aに、色指定を加えてみてください。

「color: #f25d46;」の#f25d46を変更して、お好きな色にしてみてください。

色の一例として、3つの色を紹介します。

メニューの色⇒「オレンジ:#f25d46」
タイトルの色⇒「薄いオレンジ:#f88e86」
タイトルの変化の色⇒「青:#337ab7」

サンプル画像(オレンジ:#f25d46)↓

たぶん、製作者さんはこうしたかったのではないかと思います。

おわりに

いかがでしたでしょうか。
無事にメニューの副項目、ドロップダウンメニューを表示することができていたら幸いです。

「Marlin lite」は見た目が綺麗なので、使いこなせたらオシャレなサイトが出来上がりそうですよね。色を変えるのは意外と簡単にできたりするので、好みの色にカスタマイズしてみるのも面白そうですね。

ここまで読んでいただきありがとうございました。