ワードプレステーマTwentyElevenのサイドバー/ウェジェットタイトルの表示変更をしてみましょう。

テーマTwentyElevenのウェジェットタイトルは、デフォルトだと全然目立ちませんよね…(汗　デフォルト表示は、これです…(汗

カテゴリー　 ⇐(コレですこれっ!!)

これは、チョッと…どころじゃありませんよね???

ってことで、これを、美しく目立つようにカスタマイズしていきましょう。まず、サンプル例をみてみましょう♫(チョッと見づらいかもですが…)

おっ!?全然違いますよね?こんな感じにアレンジ/装飾していきます。色は、お好みで変更して下さいね。

また、このウェジェットタイトルですが、随分真ん中寄りですよね?デフォルトだと。これを、左端に寄せる方法は、プラグインを使っています。コチラのページを参考にしてみて下さい。

⇒ウェジェットタイトルを左に寄せるプラグイン

ウェジェットタイトルもCSSが分からなくても大丈夫!!

それでは早速、管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

スタイルシートの中から、次の箇所を探してみて下さい。

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

.widget-area {
	font-size: 12px;
}
.widget {
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	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 {
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	clear: both;
	margin: 0 0 2.2em;
}
.widget-title { /* ココです!! */
	clear: both;
	margin: 0 0 10px 0;
	padding: 2px 8px;
	border-width: 0 0 2px 3px;
	border-color: #444444;
	border-style: solid;
	background: #b91d3a;
	color: #ffffff;
	font-size: 13px;
	line-height: 140%;
	font-weight: normal;
	text-transform: uppercase;
}

これで、上記のサンプルの様なウェジェットタイトルになったハズです。

参考サイト：スタイルシート 見出しメーカー

これに、さらに手を加えるとこんな風にアレンジする事が出来ます♫

’タイトルに影をつける’

.widget-title { /* ココです!! */
	clear: both;
	margin: 0 0 10px 0;
	padding: 2px 8px;
	border-width: 0 0 2px 3px;
	border-color: #444444;
	border-style: solid;
	background: #b91d3a;
	-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.8) 0px 1px 2px;
	color: #ffffff;
	font-size: 13px;
	line-height: 140%;
	font-weight: normal;
	text-transform: uppercase;
}

青の部分を加える事で、タイトル表示に’影’をつける事が出来ます♫

また、角に’丸みをつける’ことも出来ます♫

’タイトルの角に丸みをつける’

.widget-title { /* ココです!! */
	clear: both;
	margin: 0 0 10px 0;
	padding: 2px 8px;
	border-width: 0 0 2px 3px;
	border-color: #444444;
	border-style: solid;
	background: #b91d3a;
	-moz-border-radius:2px;
        -webkit-border-radius:2px;
        -khtml-border-radius:2px;
        border-radius:2px;
	color: #ffffff;
	font-size: 13px;
	line-height: 140%;
	font-weight: normal;
	text-transform: uppercase;
}

両方を加えてみると…

.widget-title { /* ココです!! */
	clear: both;
	margin: 0 0 10px 0;
	padding: 2px 8px;
	border-width: 0 0 2px 3px;
	border-color: #444444;
	border-style: solid;
	background: #b91d3a;
	-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.8) 0px 1px 2px;
	-moz-border-radius:2px;
        -webkit-border-radius:2px;
        -khtml-border-radius:2px;
        border-radius:2px;
	color: #ffffff;
	font-size: 13px;
	line-height: 140%;
	font-weight: normal;
	text-transform: uppercase;
}

こんな風になりました☆

’ウェジェットタイトルに’影’’角の丸み’をつける

少し長くなりましたが、これで見やすく美しい’ウェジェットタイトル’になったハズです。色味は、お好みのカラーコードに変更してみて下さいね☆