WordPressテーマTwenty Twelveでグローバルナビゲーションの背景色、フォントを変更する方法

Pocket
LINEで送る

本ブログをTwenty ElevenからTwenty Twelveへ移行するため、Twenty Twelveで同じ動作をさせるための変更方法について調べることにしました。Twenty Elevenの時と同じ動作が出来て、プラグインも問題なければ移行するつもりです。

なお、本記事の内容は、「WordPress3.4」テーマ「Twenty Twelve1.1」で確認しました。
※2013/01/07追記 テーマ「Twenty Eleven」の場合については「WordPressテーマTwenty Elevenのグローバルナビゲーション部の背景色の変更方法」と「WordPressテーマTwenty Elevenでグローバルナビゲーションのフォントを変える方法」を参考にして下さい。

今回はグローバルナビゲーションの背景色、フォントを変更する方法です。

「/wp-content/themes/twentytwelve/style.css」
の下記の箇所がグローバルナビゲーションについて処理しているところです。この部分を変更すれば可能です。それから、小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。


/* Navigation Menu */
.main-navigation {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	text-align: center;
}
.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;
}
.main-navigation a {
	color: #5e5e5e;
}
.main-navigation a:hover {
	color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
	display: inline-block;
}

WordPressテーマTwenty Twelveの標準のままだと、文字のフォントが美しくないと感じているのでフォントを変えます。

変更するフォントは、

を参考に「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」にしました。
いろいろ問題もあるみたいですが、Macでは「ヒラギノ角ゴ Pro W3」、WindowsVista以降では「メイリオ」 、WindowsXPでは「MS Pゴシック」 、それ以外では「sans-serif」を表示させる事を想定しています。但し、私はWindowsVistaしか持っていないため、WindowsVistaでしか確認は出来ていません。

例)背景色を「#f5faf1」へ変更し、フォントを「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」へ変更する場合


/* Navigation Menu */
.main-navigation {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	text-align: center;
	background: #f5faf1;	/*	グローバルナビゲーションの背景色を変更	*/
}
.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	グローバルナビゲーションのフォントを変更	*/
}
.main-navigation a {
	color: #5e5e5e;
}
.main-navigation a:hover {
	color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
	display: inline-block;
}

コメントの箇所で設定を変えています。「font-size:」プロパティを追加してフォントの大きさを変えるなりカスタマイズして下さい。但し、「color:」プロパティを追加して文字色を変えようとしましたが出来ませんでした。これについては、改めて調べ直したいと思います。

変更前

変更後
(背景色を「#f5faf1」へ変更し、フォントを「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」へ変更)

Pocket
LINEで送る

スポンサーリンク

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



スポンサーリンク