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」を変更して下さい。


/* =Main content and comment content
-------------------------------------------------------------- */

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header img.wp-post-image {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header .entry-title {
	font-size: 20px;
	font-size: 1.428571429rem;
	line-height: 1.2;
	font-weight: normal;
}
.entry-header .entry-title a {
	text-decoration: none;
}
.entry-header .entry-format {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-weight: normal;
}
.entry-header .comments-link {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
}

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」へ変更する場合


/* =Main content and comment content
-------------------------------------------------------------- */

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header img.wp-post-image {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header .entry-title {
	font-size: 20px;
	font-size: 1.428571429rem;
	line-height: 1.2;
	font-weight: normal;
	background: #f5faf1;	/*	投稿記事のタイトルの背景色を変更	*/
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	投稿記事のタイトルのフォントのファミリーを変更	*/
	color: #c40026;		/*	投稿記事(個別ページ、固定ページ)のタイトルの文字色を変更	*/
}
.entry-header .entry-title a {
	text-decoration: none;
	color: #c40026;		/*	投稿記事(個別ページ、固定ページ除く)のタイトルの文字色を変更	*/
}
.entry-header .entry-format {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-weight: normal;
}
.entry-header .comments-link {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
}

コメントの箇所で設定を変えています。「font-size:」プロパティを追加してフォントの大きさを変えようとしましたが個別ページ、固定ページを除く投稿記事は出来たのですが、個別ページ、固定ページは出来ませんでした。これについては、改めて調べ直したいと思います。

変更前

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

Pocket
LINEで送る

スポンサーリンク

コメントを残す

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

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



スポンサーリンク