TwentyTen グローバルナビゲーションの表示文字の大きさ/色/フォント(字体)を変更する方法

TwentyTenのグローバルナビゲーションの背景色を変更したりすると、その色によっては文字色(リンク色)が見えにくくなる場合があります。

そんな時は、リンク色自体を変更する事も可能です。また、表示文字の大きさやフォント(字体)などの変更も出来ます。ただし、フォントに関しては、サイト全体の文字フォントを変更されている場合は、特に何もしなくても大丈夫です。

それでは、スタイルシートの以下の部分を見つけて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを変更して下さい)

/* =Menu
-------------------------------------------------------------- */

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
}
#access .menu-header,
div.menu {
	font-size: 13px;              /* 表示文字の大きさの設定 */
	margin-left: 12px;       /* ナビゲーション上の文字の始まりの位置 */
	width: 928px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	float: left;
	position: relative;
}
#access a {                /* 表示文字(リンク)の色設定 */
	color: #aaa;
	display: block;
	line-height: 38px;
	padding: 0 10px;
	text-decoration: none;
}

↓コレを以下の様に書き換えてみましょう。

/* =Menu
-------------------------------------------------------------- */

#access {
	background: #525252;       /* 背景色の変更 */
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
}
#access .menu-header,
div.menu {
	font-size: 14px;      /* 表示文字の大きさの設定 */
	margin-left: -1px;     /* 文字の始まりを左寄せ */
	width: 928px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	float: left;
	position: relative;
}
#access a { /* グローバルメニューの文字設定 */
	color: #fff;        /* メニュー文字色の設定 */
	display: block;
	line-height: 38px;
	padding: 0 10px;
	text-decoration: none;
}

※変更するのは、赤い文字の部分です。

これでグローバルナビゲーションがかなり違った感じにカスタマイズ出来たハズです。実際の色に関しては、あなたのお好みで設定してみて下さい。

カラーコード取得はコチラ

グローバルメニューの字体(フォント)を変更する方法

先に触れた通り、サイト全体でのフォント設定をされている方は変更の必要がありません。グローバルメニューのフォントだけを変更したい場合はコチラを参考にしてみて下さい。

上記同様、以下の部分にフォントファミリーの追加をすればOKです。

/* =Menu
-------------------------------------------------------------- */

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
}
#access .menu-header,
div.menu {
	font-size: 13px;              /* 表示文字の大きさの設定 */
	margin-left: 12px;       /* ナビゲーション上の文字の始まりの位置 */
	width: 928px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	float: left;
	position: relative;
}
#access a {                /* 表示文字(リンク)の色設定 */
        font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
	color: #aaa;
	display: block;
	line-height: 38px;
	padding: 0 10px;
	text-decoration: none;
}

赤い色の部分を追加して下さい。また、お好みのフォントを設定して下さい。

これで、グローバルナビゲーションの表示がかなり変化したと思います。

WordPress 3.xデザイン&カスタマイズスタイルブック 複数ブログ管理からスマートフォンサイトまで、一歩進んだWordPressサイト構築術
WordPress 3.xデザイン&カスタマイズスタイルブック 複数ブログ管理からスマートフォンサイトまで、一歩進んだWordPressサイト構築術

 

にほんブログ村 ブログブログ ブログノウハウへ

コメントを残す

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