みなさんこんにちは。三上つかさです。
当サイトの更新はあまりできていませんが、その間にも新しいサイトを作ってみたり、テーマをいじって遊んでみたりしていました。
ありがたいことに、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パターンあります。
※CSSを変更した後は、キャッシュを削除しないと変更が反映されません。
また、テーマをいじる際はバックアップを取っておくことをオススメします。
１、背景色を変える
先ほど、副項目のCSSは「#nav-wrapper .sub-menu」と説明しましたが、ここの「background: #fff;」の指定を、違う色にしてあげればいいのです。
上の図では、一例として、黒色に変えてみました。
style.cssの「#nav-wrapper .sub-menu」background: #fff;を、違う色に変えてみてください。
#nav-wrapper .sub-menu {
background: #fff;
left: 0;
margin: 0;
min-width: 230px;
padding: 0;
position: absolute;
text-align: left;
top: 100%;
opacity: 0;
transform: translateY(50px);
transition: all 0.3s ease 0s;
visibility: hidden;
}
色の一例として、３つの色を紹介します。
メニューの色⇒「オレンジ：#f25d46」
タイトルの色⇒「薄いオレンジ：#f88e86」
タイトルの変化の色⇒「青：#337ab7」
サンプル画像（薄いオレンジ）↓
２、文字色を変える
背景が白色のままがいい場合は、テキストの色を変えるという方法があります。
style.cssの#nav-wrapper .vtmenu .sub-menu aに、色指定を加えてみてください。
#nav-wrapper .vtmenu .sub-menu a {
border-top: 1px solid #eee;
display: block;
font-size: 11px;
line-height: 40px;
padding: 0 15px;
transition: none 0s ease 0s;
width: 100%;
position: relative;
color: #f25d46;
}
「color: #f25d46;」の#f25d46を変更して、お好きな色にしてみてください。
色の一例として、３つの色を紹介します。
メニューの色⇒「オレンジ：#f25d46」
タイトルの色⇒「薄いオレンジ：#f88e86」
タイトルの変化の色⇒「青：#337ab7」
サンプル画像（オレンジ：#f25d46）↓
たぶん、製作者さんはこうしたかったのではないかと思います。
おわりに
いかがでしたでしょうか。
無事にメニューの副項目、ドロップダウンメニューを表示することができていたら幸いです。
「Marlin lite」は見た目が綺麗なので、使いこなせたらオシャレなサイトが出来上がりそうですよね。色を変えるのは意外と簡単にできたりするので、好みの色にカスタマイズしてみるのも面白そうですね。
ここまで読んでいただきありがとうございました。
