賢威7のグローバルメニュー(サイトタイトルの下に表示されるメニューバーのこと)は、かなり大きめでシンプルなデザインです。
自分のサイトのイメージに合わせて、色や幅・文字サイズなどをカスタマイズしていきましょう。
グローバルメニュー自体の設定が分からない方はこちらの記事を参照してくださいね。
もくじ
賢威7-グローバルメニューの文字・色カスタマイズ
グローバルメニューのカスタマイズに使うのはbase.cssファイルです。
またカスタマイズは子テーマで行うようにしてくださいね。
ボタンの色と文字色を変更する
まずはグローバルメニューのボタンの色を変更してみましょう。
base.cssの中の下記の記述が、グローバルメニューのボタンに関する部分となります。
.global-nav-in li a
子テーマのbase.cssに下記のソースを記述すれば完了です。
/*グローバルメニューのボタン*/ .global-nav-in li a{ color: #FFF262; background-color: #46bbce; }
colorが文字の色、background-colorがボタンの色です。
色の名前はこちらから検索できますよ。
グローバルメニューの背景の色を変更する
グローバルメニューの左右の余白部分、気になりますよね。
これは「グローバルメニューの背景」で、子テーマに下記のように記述します。
/*グローバルメニューの背景*/ .global-nav{ background-color: #5bc2d9;}
こちらは先程のメニューボタンの色と同じに設定しておくと良いです。
グローバルメニューの文字サイズと太さを変更する
文字サイズを変更したい場合は同じ箇所に、
下記のハイライトの2行を追記すればOKです。
/*グローバルメニューのボタン*/ .global-nav-in li a{ color: #FFF262; background-color: #46bbce; font-size:0.8em; font-weight:bold; }
こちらもお好みで数値を変更してください。
マウスオーバーした時のボタンの色と文字色を変更する
続いて、グローバルメニューにマウスオーバーした時の、
ボタンの色と文字色を変更しましょう。
同じく子テーマのbase.cssに下記のソースを記述します。
/*グローバルナビ・マウスオーバー時*/ .global-nav-in li a:hover, .global-nav-in li a:active, .global-nav-in li a:focus{ background-color: #FFF262; color: #4e9793; }
colorが文字の色、background-colorがボタンの色です。
縦線・グリッドでメニューボタンを区切る
賢威7のデフォルトではグローバルメニューの下にだけ線があり、
メニューボタンどうしの間には区切りの線がありません。
見やすくするために、メニューボタンを区切る縦線を追加します。
/*グローバルメニューボタンの右線*/ .global-nav-in li a{ border-right:#000 solid 1px; } /*グローバルメニューボタンの左線*/ .global-nav-in li:first-child{ border-left:#000 solid 1px; }
2つの記述がありますが、上がメニューボタン右側の線、
下が一番初めのボタンの左側に線をつける、という内容です。
線の色と太さはそれぞれお好みで調整してください。
グローバルメニューの下の線の太さを調整する(細くする)
そうなると気になってくるのは、グローバルメニューの下の線です。
デフォルトだとかなり太い線が引かれています。
こちらに関する記述は.global-navの中にあります。
/*グローバルメニュー下の線*/ .global-nav{ border-bottom:#000 solid 1px;}
border-bottomの部分で、線を細くしたり、色を変えたりできます。
まとめ
カスタマイズをしていないと、一発で「賢威を使ってるな」と
わかってしまうのがこのグローバルメニューのデザイン。
自分のサイトのイメージに合わせてかっこよくカスタマイズしていきましょう!
今後も追加していきます。