賢威8のグローバルメニューの文字をカスタマイズ

編集:base.css

賢威8のグローバルメニューの文字

賢威8のグローバルメニューですが、シンプルといえばシンプルですが、やや寂しい気もしませんか?
モバイルファーストなのか、PCでのビューは、少し物足りない部分もあるような気がします。
それでも、いろいろと自分好みにカスタマイズ出来るのが賢威の良い所。

今回は、そのグローバルメニューの文字を、少しだけカスタマイズしてみます。

文字を太くする

まず、この文字を太字にして、少しだけ目立つようにするには、以下のコードをbase.cssに加えます。

.keni-gnav_inner li a{
		font-weight: bold;
	}

【変更後】

文字を大きく

今度は、太字のままで、文字を大きくしてみます。
文字サイズを1.5倍にしてみますので、以下のコードをbase.cssに加えます。

.keni-gnav_inner li a{
	   font-weight: bold;
	    font-size: 1.5em;
	}

【変更後】

かなりインパクトが増しました。

文字色を変更

更に、今度は色を変更してみます。
絶対やらないと思いますが、わかりやすいように文字を赤くしてみます。

以下のコードをbase.cssに加えます。

.keni-gnav_inner li a{
	   font-weight: bold;
	    font-size: 1.5em;
	    color : #ff0000;
	}

【変更後】

まとめ

  • グローバルメニューの文字を太くするには

Font-weight をboldに。

  • 文字の大きさを変えるには

Font-size に倍率を指定。 1.5倍なら1.5em。逆に小さくするには0.7emなど。

  • 文字の色を変えるには

Colorのあとにカラーコードを指定。

以上、賢威8のグローバルメニュー 文字のカスタマイズでした。