Prev 1 2 ... 28 29 30 31 32 33 Next

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」での動作を確認しました。

WordPress3.3.1テーマTwenty Elevenにはヘッダーに検索窓があります。これが邪魔だと思い消そうと試みました。一応、出来たので、記録しておきます。

ヘッダーの検索窓を削除する方法

/wp-content/themes/twentyeleven内にある「header.php」の下記の部分に「//」を追加してコメントに変更すれば検索窓を削除出来ます。小テーマを作っている場合は、間違えず小テーマ側の「header.php」を変更して下さい。

例)「header.php」


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
				<div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//				<div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
//				<?php get_search_form(); ?>
//				</div>
//			<?php
//				else :
//			?>
//				<?php get_search_form(); ?>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

最初は、邪魔と思ったのですが、ヘッダーに検索窓があった方が便利が良いかと思い、一応、残すことにしました。

※2012/05/11追記 結局、削除して、代わりにウィジェットでGoogleカスタム検索を追加しました。

Pocket
LINEで送る

スポンサーリンク

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で送る

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でヘッダー、コンテンツ、サイドバー、フッターそれぞれの背景色を変更する方法」を参考にして下さい。

前回(WordPressテーマTwenty Elevenのヘッダーのタイトル部の背景色の変更方法)の続きで、今回はサイドバーの背景色の変更方法です。

サイドバーの背景色の変更設定

/wp-content/themes/twentyeleven内にある
「style.css」の「Structureの#secondary」の箇所で「background: #背景色;」
を追加すれば変更出来ます。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

例)「style.css」
背景色を#f5faf1へ変更する場合


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}
#branding hgroup {
	margin: 0 7.6%;
}
#access div {
	margin: 0 7.6%;
}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 34% 0 7.6%;
	width: 58.4%;
}
#secondary {
	float: right;
	margin-right: 7.6%;
	width: 18.8%;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


|「background: #f5faf1;」を追加


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}
#branding hgroup {
	margin: 0 7.6%;
}
#access div {
	margin: 0 7.6%;
}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 34% 0 7.6%;
	width: 58.4%;
}
#secondary {
	float: right;
	margin-right: 7.6%;
	width: 18.8%;
	background: #f5faf1;	/*	追加	*/
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

これで背景色が変わるはずです。しかし、当ブログにおいては実際に設定するのは一時見送ることにしました。

コンテンツ部とフッター部の背景色については、また改めて調べたいと思います。

Pocket
LINEで送る

 Prev 1 2 ... 28 29 30 31 32 33 Next

スポンサーリンク