ワードプレステーマTwentyTwelveは、Elevenに比べるとそんなに余白部分は多くはありません。しかし、ヘッダー画像をアップロードして実際にサイト表示をしてみると…、

ん～ん、やっぱりどうしても気になってしまいます。タイトル周りの余白やヘッダー画像との隙間、グローバルナビが離れてるww　など、結構気になります。

って事で、これらの余計な余白部分を全て撤去しようと思います。それでは、管理画面の「外観」⇒「テーマ編集」から、スタイルシートを開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

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

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

/* Navigation Menu */
.main-navigation {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	text-align: center;
}
.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;
}

↓コレを以下の様に編集して下さい。

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

/* Navigation Menu */
.main-navigation {　　　　　　/* グローバルナビ周りの余白 */
	margin-top: 0;
	margin-top: 0rem;
	text-align: center;
}
.main-navigation li {
	margin-top: 10px;
	margin-top: 0.714285714rem;
	font-size: 14px;
	font-size: 1rem;
	line-height: 1.714285714;
}

基本的に赤い文字の部分を追加/変更するだけです。これで、ヘッダー周りの余白がなくなったハズです。

余白を少し残したい方は、それぞれの余白部分の数値を変えてみて下さい。私個人としては、なくしてしまったくらいがちょうどいぃと感じています。

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

これで、サイトヘッダー周りがスッキリしてやる気が出てきます(笑

WordPressデザインブック　ステップバイステップ形式でマスターできる