ワードプレステーマTwentyTwelveのサイドバー/ウェジェットタイトルを綺麗に美しくする方法です。

テーマTwentyTwelveのウェジェットタイトルは、デフォルト表示ですと何ともですよね?ってか、Twentyシリーズ全般に感じますが…(汗

せっかく素敵な素晴らしいウェジェットがたくさんあるんです。それらを、訪問者に分かりやすく見やすくして差し上げたいモノですよね。

ってことで、まずはウェジェットのタイトルを綺麗に見やすく表示変更しちゃいましょう♫

ウェジェットタイトルの変更はとっても簡単です!!

なんか、CSSとかって難しそう…、私もそう思いましたが、場所さえ分かればなんて事はありません。とっても簡単に素敵なウェジェットタイトルが出来ちゃいます!!

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

’スタイルシート’の中から、次の部分を見つけて下さい。

/* Banner */
section[role="banner"] {
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
}

/* Sidebar */
.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
}
.widget-area .widget h3 {  /* ココです!! */
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}

’ココです!!’の部分が、ウェジェットタイトルの表示制御部分です。お好みの応じて装飾をしてみて下さい。例えば、この様に追加/編集してみましょう。↓

/* Banner */
section[role="banner"] {
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
}

/* Sidebar */
.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 14px;
	margin-bottom: 1rem;
	word-wrap: break-word;
}
.widget-area .widget h3 {  /* ココです!! */
	clear: both;
	margin: 0 0 10px 0;
	margin: 0 0 0.714285714rem 0;
	padding: 2px 8px;
	padding: 0.142857143rem 0.571428571rem;
	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:3.5px;
        -webkit-border-radius:3.5px;
        -khtml-border-radius:3.5px;
        border-radius:3.5px;
        -moz-border-radius:0.25rem;
        -webkit-border-radius:0.25rem;
        -khtml-border-radius:0.25rem;
	border-radius:0.25rem;
	color: #ffffff;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size: 13px;
	font-size: 0.0.928571429rem;
	line-height: 2;
	font-weight: normal;
}
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}

チョッと長くなりましたが、追加/編集してみて下さい。かなりの自信作です(笑

追加部分で長くなっているところは、’影を作る’’丸みをつける’といった装飾を施しています。そんなの要らないっ!!って方は、赤の部分は削除して下さい。

また、青の部分は、’ウェジェット間(縦方向)’の隙間が多すぎるので削りました。狭すぎると感じる方は、数値を多くしてみて下さい。

また、カラーコードについては、お好みの色にて変更してみて下さい。これで、たくさんのウェジェットを使いたくなっちゃいますよね(笑

WordPressデザインブック　ステップバイステップ形式でマスターできる