ワードプレステーマTwentyTwelveのヘッダータイトルの文字(色/大きさ)を変更してみましょう。

個人的には、大きさはちょうど良いと感じています。しかし、色はチョッと…。。って感じですかね(笑　ちなみに、ヘッダーテキストを表示していない方には必要のない項目です。あっ、このサイトみたいな感じの方はですね。

ヘッダーテキストの表示/非表示は、管理画面の「外観」⇒「テーマ」から変更が可能です。

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

スタイルシートから次の部分を探して下さい。

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

↓これを、以下の様に編集して下さい。

/* 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: #2175ab;
	display: inline-block;
	text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {　　　 /* マウスオーバー時のカラー設定 */
	color: #fa4444;
}
.site-header h1 {　　　/* サイトタイトル(リンク)の文字設定 */
	font-size: 24px;　　　　　　　　　　　/* タイトル文字の大きさ */
	font-size: 1.714285714rem;　　　/* タイトル文字の大きさ */
	line-height: 1.285714286;
	margin-bottom: 10px;　　　　　　　　　　/* キャッチフレーズとの間の余白 */
	margin-bottom: 0.714285714rem;　　/* キャッチフレーズとの間の余白 */
}

赤い部分の数値を変更するだけです。お好みの色をカラーコード入力するだけです。今回は、大きさいついてはデフォルのままです。タイトル文字の大きさを変更したい場合は、’font-size’の数値を変更して下さい。

その際には、’rem’、’line-height’の数値にお気をつけ下さい。詳細は、スタイルシートの冒頭部分をお読み下さい。

これで、見やすいヘッダータイトルが出来たハズです。サイトタイトルは重要ですものね。