WordPressテーマTwenty Elevenで投稿記事のタイトル部の背景色の変更方法

Pocket
LINEで送る

本投稿記事の内容は、「WordPress3.3.2」のテーマ「Twenty Eleven1.3」での話であり、バージョンが大きく異なると動作しない場合があります。
※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」の「=Content」の「.entry-title」の箇所で「background: #背景色;」
を追加すれば変更出来ます。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

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


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

#main {
	clear: both;
	padding: 1.625em 0 0;
}
.page-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	margin: 0 0 2.6em;
	text-transform: uppercase;
}
.page-title a {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0;
	text-transform: none;
}
.hentry,
.no-results {
	border-bottom: 1px solid #ddd;
	margin: 0 0 1.625em;
	padding: 0 0 1.625em;
	position: relative;
}
.hentry:last-child,
.no-results {
	border-bottom: none;
}
.blog .sticky .entry-header .entry-meta {
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}
.entry-title,
.entry-header .entry-meta {
	padding-right: 76px;
}
.entry-title {
	clear: both;
	color: #222;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


|「background: #f5faf1;」を追加


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

#main {
	clear: both;
	padding: 1.625em 0 0;
}
.page-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	margin: 0 0 2.6em;
	text-transform: uppercase;
}
.page-title a {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0;
	text-transform: none;
}
.hentry,
.no-results {
	border-bottom: 1px solid #ddd;
	margin: 0 0 1.625em;
	padding: 0 0 1.625em;
	position: relative;
}
.hentry:last-child,
.no-results {
	border-bottom: none;
}
.blog .sticky .entry-header .entry-meta {
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}
.entry-title,
.entry-header .entry-meta {
	padding-right: 76px;
}
.entry-title {
	clear: both;
	color: #222;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
	background: #f5faf1;	/*	追加	*/
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

これで投稿記事のタイトル部の背景色が変わるはずです。

Pocket
LINEで送る

スポンサーリンク

コメントを残す

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

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



スポンサーリンク