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

ワードプレステーマTwentyTwelveのグローバルナビゲーションのリンク/マウスオーバー時の背景色及び文字色の変更をする方法です。大変お待たせしました!!

テーマTwentyTwelveのグローバルナビゲーションは、デフォルトですと大変アッサリしています…。なので、最初からカスタマイズする必要があります。

  1. 基本設定(文字の大きさ/余白部分の撤去など)
  2. グローバルナビの背景色の設定
  3. グローバルナビのリンク文字の色設定

そして、このリンクオーバー時の設定です。チョッと面倒の様に見えますが、1記事1テーマで書いていますので多く感じるだけです。慣れてしまえば、1回の作業で済みますのでご安心下さい。

それでは、管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

スタイルシートから、次の部分を探して下さい。

/* =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;
	}
	.main-navigation li a:hover {
		color: #000;
	}
	.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}

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

/* =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;
	}
	.main-navigation li a:hover {  /* マウスオーバー時の文字色/背景色の設定 */
		background: #eaffb8;
		color: #000;
		-moz-border-radius:3.5px;
        	-webkit-border-radius:3.5px;
        	-khtml-border-radius:3.5px;
        	border-radius:3.5px;
        	-moz-border-radius:0.25rem;
        	-webkit-border-radius:0.25rem;
        	-khtml-border-radius:0.25rem;
		border-radius:0.25rem;
	}
	.main-navigation li { /* メニュー文字の文字と文字の間(隙間)の設定 */
		margin: 0 18px 0 0;
		margin: 0 1.285714286rem 0 0;
		position: relative;
	}

いかがでしょうか?これで、グローバルナビゲーションのマウスオーバー時の文字色/背景色が変わったハズです。カラーコードや数値を変える事によって、様々な表現が出来ると思います。

これで、グローバルナビゲーションの表示がグ~ンと良くなったと思います♫


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

コメントを残す

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