WordPress TwentyTwelveのブラウザ・サイズが大きい場合の上部余白

WordPressのテーマTwentyTwelveは、レスポンシブ・デザインで、ブラウザ・サイズに応じてレイアウトが変わります。非常に便利ですが、サイトの目的や好みによっては、カスタマイズが必要になる場合も出てくるでしょう。今回は、自動設定されている上部余白をカスタマイズしていきたいと思います。

TwentyTwelveでは、ブラウザの幅が、960pixels以上か以下で分岐されています。

【幅960pixels以下の場合の表示】

【幅960pixels以上の場合の表示】

幅960pixelsの場合は、上部にグレーの余白が自動で追加されます。この余白の自動追加処理をなくすカスタマイズを行いましょう。それにはstyle.cssの1601行目付近を編集します。

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
	body {
		background-color: #e6e6e6;
	}
	body .site {
		padding: 0 40px;
		padding: 0 2.857142857rem;
		margin-top: 48px;
		margin-top: 3.428571429rem;

1601

1602

1603

1604

1605

1606

1607

1608

1609

1610

/* Minimum width of 960 pixels. */

@media screen and (min-width: 960px) {

body {

background-color: #e6e6e6;

}

body .site {

padding: 0 40px;

padding: 0 2.857142857rem;

margin-top: 48px;

margin-top: 3.428571429rem;

margin-topを0px,0remにすれば、余白の自動追加が無効になります。

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
	body {
		background-color: #e6e6e6;
	}
	body .site {
		padding: 0 40px;
		padding: 0 2.857142857rem;
		margin-top: 0px;
		margin-top: 0rem;