ワードプレステーマTwentyTwelveのヘッダー画像上の余白をなくす方法です。ヘッダー部分の配置(サイトタイトル/ヘッダー画像/グローバルナビ)の変更方法はこちらを参考にしてみて下さい。

テーマTwentyTwelveは、ヘッダー画像をアップロードしないと表示されない様な仕組みになっています。ですから、デフォルトでは気にならないのですが、画像を表示すると余白が気になる様になります。

また、テーマTwentyTwelveのヘッダー部分は、それ自体にも’padding’値が設定されていて、上下に多くの余白が表示されてしまいます。

ヘッダー画像の上部余白に加えて、ヘッダー部分全体の余白部分も一緒になくすことにします。基本は、’margin’や’padding’値を0にする事で余白がなくなります。

ヘッダー画像上部の余白撤去

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

/* Header */
.site-header {
padding: 24px 0;
padding: 1.714285714rem 0;
} ～～～～～～　中略　～～～～～～～ .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;
}

この様に、ヘッダー画像上部に’margin’値が設定されています。この部分をそのままそっくり削除するか、または値を0にすればOKです。

/* Header */
.site-header {
padding: 24px 0;
padding: 1.714285714rem 0;
} ～～～～～～　中略　～～～～～～～ .site-header h2 {
	font-weight: normal;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
}
.header-image {
	margin-top: 0;
}

これで、ヘッダー画像上部の余白がなくなったハズです。

ヘッダー部全体の上下の余白をなくす

テーマTwentyTwelveのヘッダー周りには、’padding’値が設定されています。正確には上下に入っています。(デフォルト値)

この’padding’を0にする事で、サイト上部の余白と記事(サマリー)との隙間の余白が取り除かれるハズです。必要に応じて、値は変更する様にして下さい。

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

ココですね。この’padding’値を0にするか、または全て削除して下さい。余白調整をしたい方は、0にしてから後で数値を変更すると良いと思います。

/* Header */
.site-header {
	padding: 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;
}

これで、サイト上部(サイトタイトル上)と記事(サマリー)との隙間の余白が取り除かれたハズです。

初心者の方にとっては、色々なところの値を変えたりするので最初は戸惑うかもしれません。あせらず、一つ一つ行なっていくと良いと思います。