どうも、ケイジです!
今回は賢威7カスタマイズとしてグローバルメニューの通常時の色とマウスオーバー時のグローバルメニューの色の変更方法を説明していきたいと思います。

グローバルメニューの色はバランスが大切

賢威7でグローバルメニューの色の変更方法メイン

グローバルメニューはほとんどの人が目につく部分であると思います。そして多くの人がヘッダー部分のすぐ下にメニューがあると認識しているので、グローバルメニューを意識しながらサイトを見ていく人は非常に多いです。注目される部分でもあるし、グローバルメニューを基準にサイト内を見ていこうとする人は少なくないのでサイトにあった色にカスタマイズしてみましょう。

では、早速賢威7でグローバルメニューの色を変更する方法を説明していきたいと思います。

 

 

賢威7のグローバルメニューの色の変更方法

ダッシュボード→外観→テーマ編集→base.css

賢威7でグローバルメニューの色を変更する方法1

ダッシュボード→外観→テーマ編集→base.css内のグローバルナビ内の上記箇所を探してください。上記赤枠部分が通常時の文字色、マウスオーバー時の文字色、マウスオーバー時の背景色の部分となりますので、これらをそれぞれ好きなカラーコードにするだけでグローバルメニューに関するそれぞれの色の変更が可能となります。

 

 

グローバルメニューの色カスタマイズ前と後の変化

賢威7-デフォルト時

賢威7でグローバルメニューの色を変更する方法デフォルト時

 

グローバルメニューカスタマイズ後

賢威7でグローバルメニューの色カスタマイズ後

もともと賢威7クール版のグローバルナビゲーションはマウスオーバー時は背景色が灰色になるだけでした。今回のグローバルナビゲーションのカスタマイズでは通常時の文字色を黒にして、マウスオーバー時は文字色を白色に、そして背景色は濃い赤色にしてみました。さらに文字を太くするソースも加えています。

 

グローバルナビゲーションの色に関するカスタマイズは全体のサイト背景色と通常時のグローバルナビゲーション文字色、さらにマウスオーバー時のサイト背景色とグローバルナビゲーション文字色など、全ての色に関するバランスを考えなければいけないですね。目立ちすぎても不自然ですし、目立た無さ過ぎても勿体ないかと思いますので何度も微調整していった方がいいでしょう。

 

 

まとめ

グローバルメニューは絶対に訪問者が注目する部分でもあるので見にくい色合いにしてしまうとそれだけストレスを与えてしまう可能性があります。大事なことはグローバルナビゲーションの見た目ではないのですが、色合いの奇抜さなどで見にくいといった感情を生ませることがあるのも事実なので見やすくカッコイイ色合いバランスを取れるようにカスタマイズしていきましょう。

 

賢威7カスタマイズ一覧まとめ記事へ