TwentyTwelve グローバルナビゲーションのメニュー文字(色/サイズ/フォント)の設定

ワードプレステーマTwentyTwelveのグローバルナビゲーション、メニュー文字(色/サイズ/フォント)の設定方法です。

フォントについては、サイト全体の文字(フォント)設定を行なっていれば特に変更の必要はありません。個別で設定したい方のみ追加/編集して下さい。

さて、前回のグローバルナビゲーションの背景色の設定の続きです。段々サイトっぽくなってきましたよね♫TwentyTwelveのグローバルナビの設定は、TenやElevenに比べてかなりややこしい…(汗

初心者の方で分かりにくいって人は、TenやElevenを使われると良いと思います。さて、それでは、管理画面の「外観」⇒「テーマ編集」から’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

っと、その前に、グローバルナビの文字の基本設定(サイズや余白設定など)はこちらで行なって下さい。

⇒TwentyTwelve グローバルナビの基本設定

コチラがお済みになりましたら、いよいよ表示設定を行なっていきます。お待たせしました!!スタイルシートの次の部分を探して下さい。

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.author-avatar {
		float: left;
		margin-top: 8px;
		margin-top: 0.571428571rem;
	}

～～～～～～～～　中略　～～～～～～

.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}

↓これを、下記の様に編集してみて下さい。

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.author-avatar {
		float: left;
		margin-top: 8px;
		margin-top: 0.571428571rem;
	}

～～～～～～～～　中略　～～～～～～
.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		font-family: お好みのフォント;
		border-bottom: 0;
		color: #4a4a4a;
		line-height: 2.5;
		text-transform: uppercase;
		white-space: nowrap;
	}

さぁ、いかがでしょうか?うまくいきましたか?表示文字の色は、お好みのカラーコードを入力して下さい。次回は、いよいよグローバルナビゲーションのメニューをマウスオーバーした時の色変更をお届けします!!

おぉっ!!かなり本格的なサイトに成長しつつありますね!!やっぱり、ワードプレスカスタマイズは楽しいですね☆

ランディングページ作成ができるワードプレス用2カラムテンプレート「LP Designer」レスポンシブWEBデザイン対応