【編集】 rwd.css

賢威7.1で、グローバルメニューを設定すると、PCは良いのですが、スマホ表示となると、「ちょっとな~」と思っている方もいるのではないでしょうか。

このサイトもブルーを基調にしていますが、スマホで表示すると、黒っぽいバーにプルダウンメニューも黒。サイトカラーに合わせて、この色を変更してみたいと思います。

スマホのグローバルメニューの色を変更する方法

プルダウンメニューも・・・

スマホのグローバルメニューの色を変更する方法

rwd.css の編集

このスマホ表示の記述は『rwd.css』を編集します。
ダッシュボードから『外観』⇒『テーマの編集』に進み、rwd.cssを編集します。

スマホのグローバルメニューの色を変更する方法

スマホのグローバルメニューの箇所はrwd.css内の以下のコードです。

このコードの中のbackground の後に変更したいカラーコードに書き換えるだけですが、親テーマのrwd.cssを編集するより、子テーマのrwd.cssにコードを書き加えたほうが良いです。

グローバルメニューのバーの色

まず、グローバルメニューのバーの色を変更してみます。

スマホのグローバルメニューの色を変更する方法

このバーを赤色に、メニューの文字を黄色にしてみます。
以下のコードを子テーマのrwd.cssに書き加えてください。

保存して確認してみると・・・

しっかり、バーの色が赤に、メニューの文字が黄色になっています。

プルダウンメニューの色

今度は、そのメニューをタップした時の色を変更してみます。

プルタウンメニューのバックグランドカラーをブルーに変更してみます。
以下のコードを子テーマのrwd.cssに書き加えてください。

保存して確認すると・・・

スマホのグローバルメニューの色を変更する方法

プルダウンメニューのバックグランドカラーがブルーになったのが確認できます。

以上、スマホ表示でのグローバルメニューの色変更の方法でした。

どちらも、「background:」の後に好きなカラーコードを書き加えれば変更できますので、サイトのカラーにあったカラーコードに変更してみてください。