ワードプレステーマTwentyTwelveのサイドバー/ウェジェットエリア内の文字色(リンク色)を変更する方法です。テーマTwentyTwelveのサイドバー/ウェジェットタイトルの変更方法はコチラ。

テーマTwentyTen、TwentyElevenの場合は、サイドバー(ウェジェット)がサイトコンテンツ内にある場合は、サイト全体のリンク指定された色が反映されていたと思います。

しかしTwelveでは、サイトコンテンツ内にあるウェジェット(サイドバー)であっても、独立した存在になっているみたいですね。

その為、サイト全体の色指定をしても、ウェジェット内のリンク色は変更されませんでした。そこで、ウェジェットエリア内(サイドバー)にあるリンク色を変更してみようと思います。

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 a {  /* リンク色の設定 */
	color: #757575;
}
.widget-area .widget a:hover {  /* マウスオーバー時のリンク色の設定 */
	color: #21759b;
}
.widget-area #s {
	width: 53.66666666666%; /* define a width to avoid dropping a wider submit button */
}

この部分を変更すればOKです。赤色の部分がリンク色の変更部分。青色の部分がマウスオーバー時のリンク色の変更部分です。お好みの色をカラーコード入力するだけでOKです。

これで、ウェジェットエリア内(サイドバー)のリンク色が変わったハズです。

ちなみに、ウェジェットエリア内の文字の色/大きさ/フォントの設定は、こちらで行う事が出来ます。

/* 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;
}

変更されたい場合は、コチラに追加/編集すればOKです。TwentyTwelve サイト全体の文字の設定方法を参考に追加編集してみて下さい。

これで、ウェジェットエリア内の文字の変更が出来たハズです。

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