賢威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;}こちらは先程のメニューボタンの色と同じに設定しておくと良いです。
グローバルメニューの文字サイズと太さを変更する
文字サイズを変更したい場合は同じ箇所に、
下記のハイライトの２行を追記すれば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の部分で、線を細くしたり、色を変えたりできます。
まとめ
カスタマイズをしていないと、一発で「賢威を使ってるな」と
わかってしまうのがこのグローバルメニューのデザイン。
自分のサイトのイメージに合わせてかっこよくカスタマイズしていきましょう！
今後も追加していきます。
自由な働き方を叶えたいあなたへ
コメントを残す