WordPressテーマTwenty Twelveでサイドバーの背景色、フォントを変更する方法

Pocket
LINEで送る

本ブログをTwenty ElevenからTwenty Twelveへ移行するため、Twenty Twelveで同じ動作をさせるための変更方法について調べることにしました。Twenty Elevenの時と同じ動作が出来て、プラグインも問題なければ移行するつもりです。

なお、本記事の内容は、「WordPress3.4」テーマ「Twenty Twelve1.1」で確認しました。
※2013/01/07追記 テーマ「Twenty Eleven」の場合については「WordPressテーマTwenty Elevenのサイドバー部の背景色の変更方法」と「WordPressテーマTwenty Elevenでサイドバーのフォントを変える方法」を参考にして下さい。

今回は投稿記事のサイドバーの背景色、フォントを変更する方法です。

「/wp-content/themes/twentytwelve/style.css」
の下記の箇所がサイドバーについて処理しているところです。この部分を変更すれば可能です。それから、小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。


/* 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;
}
.widget-area .widget p {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.widget-area .textwidget ul {
	list-style: disc outside;
	margin: 0 0 24px;
	margin: 0 0 1.714285714rem;
}
.widget-area .textwidget li {
	margin-left: 36px;
	margin-left: 2.571428571rem;
}
.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 */
}

WordPressテーマTwenty Twelveの標準のままだと、文字のフォントが美しくないと感じているのでフォントを変えます。

変更するフォントは、

を参考に「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」にしました。
いろいろ問題もあるみたいですが、Macでは「ヒラギノ角ゴ Pro W3」、WindowsVista以降では「メイリオ」 、WindowsXPでは「MS Pゴシック」 、それ以外では「sans-serif」を表示させる事を想定しています。但し、私はWindowsVistaしか持っていないため、WindowsVistaでしか確認は出来ていません。

例)背景色を「#f5faf1」へ、フォントを「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」へ、文字色を「#c40026」へ変更する場合


/* 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;
	background: #f5faf1;	/*	サイドバーのウィジェットのタイトルの背景色の変更	*/
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	サイドバーのウィジェットのタイトルのフォントのファミリーを変更	*/
	color: #c40026;	/*	サイドバーのウィジェットのタイトルの文字色の変更	*/
}
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	background: #f5faf1;	/*	サイドバーのウィジェット(カレンダー、タグ除く)の中身の背景色の変更	*/
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	サイドバーのウィジェット(カレンダー、タグ除く)の中身のフォントのファミリーを変更	*/
	color: #c40026;	/*	サイドバーのウィジェット(カレンダー、タグ除く)の中身の文字色の変更	*/
}
.widget-area .widget p {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.widget-area .textwidget ul {
	list-style: disc outside;
	margin: 0 0 24px;
	margin: 0 0 1.714285714rem;
}
.widget-area .textwidget li {
	margin-left: 36px;
	margin-left: 2.571428571rem;
}
.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 */
}

コメントの箇所で設定を変えています。但し、カレンダーとタグのウィジェットについては変更が出来ませんでした。カレンダーについては他の箇所で変更出来ましたが、タグについては分かりませんでした。これについては、改めて調べ直したいと思います。

変更前

変更後
(背景色を「#f5faf1」へ、フォントを「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」へ、文字色を「#c40026」へ変更)

カレンダーのウィジェットについては下記の箇所が処理しているところです。この部分を変更すれば可能です。


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

・
・
・
・
・

#wp-calendar {
	margin: 0;
	width: 100%;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #686868;
}
#wp-calendar th,
#wp-calendar td,
#wp-calendar caption {
	text-align: left;
}
#wp-calendar #next {
	padding-right: 24px;
	padding-right: 1.714285714rem;
	text-align: right;
}

例)背景色を「#f5faf1」へ、フォントを「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」へ、文字色を「#c40026」へ変更する場合


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

・
・
・
・
・

#wp-calendar {
	margin: 0;
	width: 100%;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #686868;
}
#wp-calendar th,
#wp-calendar td,
#wp-calendar caption {
	text-align: left;
	background: #f5faf1;	/*	サイドバーのカレンダーのウィジェットの中身の背景色の変更	*/
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	サイドバーのカレンダーのウィジェットの中身のフォントのファミリーを変更	*/
	color: #c40026;	/*	サイドバーのカレンダーのウィジェットの中身の文字色の変更	*/
}
#wp-calendar #next {
	padding-right: 24px;
	padding-right: 1.714285714rem;
	text-align: right;
}

変更前

変更後
(背景色を「#f5faf1」へ、フォントを「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」へ、文字色を「#c40026」へ変更)

他にサイドバー全体の背景色を変えたい場合には下記の部分を変更すれば可能です。


/* Page structure */

・
・
・
・
・

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
}

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


/* Page structure */

・
・
・
・
・

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
	background: #f5faf1;	/*	サイドバー全体の背景色の変更	*/
}

変更前

変更後
(背景色を「#f5faf1」へ変更)

Pocket
LINEで送る

スポンサーリンク

コメントを残す

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

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



スポンサーリンク