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


/* Header */
.site-header {
	padding: 24px 0;
	padding: 1.714285714rem 0;
}
.site-header h1,
.site-header h2 {
	text-align: center;
}
.site-header h1 a,
.site-header h2 a {
	color: #515151;
	display: inline-block;
	text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
	color: #21759b;
}
.site-header h1 {
	font-size: 24px;
	font-size: 1.714285714rem;
	line-height: 1.285714286;
	margin-bottom: 14px;
	margin-bottom: 1rem;
}
.site-header h2 {
	font-weight: normal;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
}
.header-image {
	margin-top: 24px;
	margin-top: 1.714285714rem;
}

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


/* Header */
.site-header {
	padding: 24px 0;
	padding: 1.714285714rem 0;
	background: #f5faf1;	/*	サイトタイトル、キャッチフレーズ、グローバルナビゲーション、ヘッダー画像の背景色を変更	*/
}
.site-header h1,
.site-header h2 {
	text-align: center;
	background: #f5faf1;	/*	サイトタイトル、キャッチフレーズの背景色を変更	*/
}
.site-header h1 a,
.site-header h2 a {
	color: #515151;
	display: inline-block;
	text-decoration: none;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	ヘッダーのサイトタイトルのフォントを変更	*/
}
.site-header h1 a:hover,
.site-header h2 a:hover {
	color: #21759b;
}
.site-header h1 {
	font-size: 24px;
	font-size: 1.714285714rem;
	line-height: 1.285714286;
	margin-bottom: 14px;
	margin-bottom: 1rem;
	background: #f5faf1;	/*	サイトタイトルの背景色を変更	*/
}
.site-header h2 {
	font-weight: normal;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
	background: #f5faf1;	/*	キャッチフレーズの背景色を変更	*/
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	キャッチフレーズのフォントを変更	*/
}
.header-image {
	margin-top: 24px;
	margin-top: 1.714285714rem;
}

コメントの箇所で設定を変えています。便宜上、コメントがたくさんあるのですが、必要なところだけ追加すれば大丈夫です。「color:」プロパティを追加して文字色を変えるなり、「font-size:」プロパティを追加してフォントの大きさを変えるなりカスタマイズして下さい。

変更前

変更後
(ヘッダー全体の背景色を「#f5faf1」へ変更し、ヘッダーのサイトタイトル、キャッチフレーズのフォントを「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」へ変更)

Pocket
LINEで送る

スポンサーリンク

5 thoughts on “WordPressテーマTwenty Twelveでヘッダーのサイトタイトル、キャッチフレーズ、ヘッダー画像の背景色、フォントを変更する方法

  1. カスタムヘッダーでサイトタイトルの文字色を指定してしまったら、
    のちにスタイルシートで変更するのにはどうすれば良いでしょうか?
    文字色以外にサイトタイトルに影をつける等の装飾をしたいのですがCSSよりもカスタムヘッダーのほうを優先するのか反映されなくて困ってます。サイトタイトル色どころかhoverしても色が変わりません。

    • プライアさん、初めまして。

      質問の件ですが、「カスタムヘッダー」で「文字色をリセット」というのはないでしょうか?ここで「元のヘッダーのテキストに戻す」をクリックして元に戻せば、style.cssでの設定が反映されませんか?実際に試す環境がないので未確認ですが・・・

コメントを残す

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

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



スポンサーリンク