WordPressテーマTwenty Elevenのグローバルナビゲーション部の背景色の変更方法

Pocket
LINEで送る

本投稿記事の内容は、「WordPress3.3.1」のテーマ「Twenty Eleven1.3」での話であり、バージョンが大きく異なると動作しない場合があります。
※2012/06/03追記 「WordPress3.3.2」での動作を確認しました。
※2012/06/20追記 「WordPress3.4」テーマ「Twenty Eleven1.4」での動作を確認しました。
※2013/01/07追記 テーマ「Twenty Twelve」の場合については「WordPressテーマTwenty Twelveでグローバルナビゲーションの背景色、フォントを変更する方法」と「WordPressテーマTwenty Twelveでヘッダー、コンテンツ、サイドバー、フッターそれぞれの背景色を変更する方法」を参考にして下さい。

ヘッダーの画像下にあるグローバルナビゲーション部の背景色の変更方法について説明します。

グローバルナビゲーション部の背景色の変更設定

/wp-content/themes/twentyeleven内にある
「style.css」の「Menuの#accessのbackground」の箇所
を下記の様にコメントへ変え、新しい背景色を追加すれば可能です。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

例)「style.css」
背景色を#252525~#0a0a0aのグラデーションから#dce2d8へ変更


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =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: #dce2d8;
	-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%;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

これで背景色が変わるはずです。
もしも、この時、文字が見えづらくなった場合は、
「style.css」の「Menuの#access aのcolor」の箇所
を下記の様に変更すれば文字色の変更が可能です。

例)「style.css」
文字色を#eeeから#b58800へ変更


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =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: #dce2d8;
	-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%;
}
#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}
#access li {
	float: left;
	position: relative;
}
#access a {
	color: #eee;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


|変更


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =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: #dce2d8;
	-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%;
}
#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}
#access li {
	float: left;
	position: relative;
}
#access a {
/*	color: #eee;	*/
	color: #b58800;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

これで文字色が変わるはずです。

Pocket
LINEで送る

スポンサーリンク

コメントを残す

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

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



スポンサーリンク