TwentyTen グローバルナビゲーションのリンク/マウスオーバー時の色変更

TwentyTenのグローバルナビゲーションのリンクにマウスを当てた時の背景色やリンク文字の色を変更させる方法です。

個人的にはデフォルトのままでも良いとは思いますが、グローバルナビゲーションの色などを変更されてマッチしない場合はコチラも変更されると良いでしょう。

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

#access ul ul a {
	background: #333;
	line-height: 1em;
	padding: 10px;
	width: 160px;
	height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {           /* ココです!! */
	background: #333;             /* 背景色変更 */
	color: #fff;                    /* 文字色変更 */
}
#access ul li:hover > ul {
	display: block;
}
#access ul li.current_page_item > a,
#access ul li.current_page_ancestor > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current_page_ancestor a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #fff;
}

/* =Content
-------------------------------------------------------------- */

赤色の部分を変更して下さい。

ココを変更すると、グローバルナビゲーションにマウスをあてた(マウスオーバー)時の背景色/文字色が変化するハズです。あなたのサイト(グローバルナビ)に合わせた配色を設定して下さい。

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

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

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