【賢威7】グローバルメニューのカスタマイズ!色・幅・文字サイズ変更

賢威,賢威7,カスタマイズ

賢威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の部分で、線を細くしたり、色を変えたりできます。

まとめ

カスタマイズをしていないと、一発で「賢威を使ってるな」と
わかってしまうのがこのグローバルメニューのデザイン。

自分のサイトのイメージに合わせてかっこよくカスタマイズしていきましょう!

今後も追加していきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Scroll Up