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

サイドバーのウィジェットのタイトルバーが余りにも味気ないので変えてみました。

サイドバーのウィジェットのタイトルバーをカスタマイズする方法

/wp-content/themes/twentyeleven内にある
「style.css」の「Widgetsの.widget-title」の箇所
を変更するだけです。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

新しいスタイルシートは、このサイトを利用して作りました。

例)「style.css」


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =Widgets
----------------------------------------------- */

.widget-area {
	font-size: 12px;
}
.widget {
	clear: both;
	margin: 0 0 2.2em;
}
.widget-title {
	color: #666;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =Widgets
----------------------------------------------- */

.widget-area {
	font-size: 12px;
}
.widget {
	clear: both;
	margin: 0 0 2.2em;
}
.widget-title {
	margin:0 0 10px 0;
	padding:2px 8px;
	background:#5f7e3f;
	color:#ffffff;
	line-height:140%;
	font-weight:bold;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

これで見栄えの良いタイトルバーになりました。

Pocket
LINEで送る

スポンサーリンク

One thought on “WordPressテーマTwenty Elevenのサイドバーのウィジェットのタイトルバーをカスタマイズする方法

  1. Pingback: 色々弄る2 | 見聞読

コメントを残す

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

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



スポンサーリンク