TwentyEleven グローバルナビゲーションの背景色を変える方法

ワードプレステーマTwentyElevenのカスタマイズについてはコチラ☆

TwentyEleven カスタマイズ

ワードプレスには、デフォルトでグローバルナビが実装されています。これは、大変素晴らしい事です!!しかし、黒って…。。

そうお思いの方は、グローバルナビゲーションの背景色を変更しましょう(笑 ジョウダンはさておき、実はTwentyElevenのグローバルナビゲーションのデフォルトの背景は、黒単色ではありません!!ご存知でしたか?

まぁ、余計な話しで恐縮ですが、ブラウザによっても見え方が異なります。私が確認したのは、Chrome、FireFox、IEなんですが、ChromeとFireFoxではしっかりとグラデーションが確認出来ています。しかし、残念ながらIEでは単色でしか反映されていませんでした。

あなたが使用しているブラウザがIEでしたら、ぜひChromeかFireFoxに乗り換えましょう(笑

さて、グローバルナビゲーションの背景色を変える方法は次の通りです。スタイルシートの中の以下の部分を追加・訂正します。(WordPress Ver. 3.5.1 TwentyEleven Ver. 1.5)

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

#access {
	background: #222; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 6px;
	width: 100%;
}

↓コレを次のように変更します。

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

#access {
	background: #222; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);
	background: #d9d4c3;ココに追加して下さい!!
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 6px;
	width: 100%;
}

※カラーコードは、あなたのお好みの色のコードを入力して下さい。カラーコードについてはコチラ♫⇒カラーコード超簡単取得方法

たったコレだけでOKです。超簡単ですよね?グローバルナビゲーションの背景色をあなたオリジナルの色にカスタマイズしちゃって下さい☆

ワードプレステーマ’TwentyEleven’カスタマイズ詳細はコチラ♫

TwentyEleven カスタマイズ

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

 


ポチッと応援して頂けると嬉しいです!!
にほんブログ村 ブログブログへ
にほんブログ村

コメントを残す

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