Twenty Twelveで画面上部の空白を取り除く方法を紹介します。

Twenty Twelveのサイト上部の空白

Twenty Twelveのサイト上部の空白

サイト画面上部の空白は、Twenty Twelveのstyle.cssの.site-contentで定義されています。
525行目あたりの「Page structure」の下に、次のような記述があります。

.site-content {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
}

marginの後に指定された3つの値はそれぞれ、上・左右・下のマージンを示しています。上のマージンを示す24pxや1.714285714remを0にすれば、画面上部のマージンが消えそうですが、うまくいきません。

.site-content {
	margin: 0;
}
画面上部の空白が消えない

画面上部の空白が消えない

全くの記述ミスではなく、幅の狭い画面では画面上部の空白は消えます。ブラウザの幅によってレイアウトが変わるレスポンシブWebデザインが機能しているということです。

幅の狭い画面では空白が消える

幅の狭い画面では画面上部の空白が消える

スポンサーリンク

幅の広い画面のスタイル定義

このようになるのは、Twenty TwelveのレスポンシブWebデザインによってPCのブラウザなど幅の広い画面のために別の定義がされているためです。Twenty Twelveのstyle.cssで1587行目以降の「@media screen and (min-width: 960px)」にはブラウザ画面の幅が960px以上の場合のスタイルが定義されています。

body .site {
...略...
	margin-top: 48px;
	margin-top: 3.428571429rem;
...略...
}

この部分をゼロにすれば、画面上部の空白は消えます。

body .site {
...略...
	margin-top: 0;
...略...
}
画面上部の空白が消える

画面上部の空白が消える

古いバージョンのIEの対策

上記の設定はIE8など古いバージョンのInternet Explorerには反映されません。

古いIEには設定が反映されない

古いIEには設定が反映されない

古いInternet Explorer向けのスタイルはtwentytwelve\css\ie.cssに定義されているので、その中にある.siteを修正します。

.site {
...略...
    margin: 0 auto;
...略...
}

これで、古いInternet Explorerでも画面上部の空白が消えます。

古いIEでも画面上部の空白が消える

古いIEでも画面上部の空白が消える

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPressの使い方・カスタマイズ・トラブル対応など、ご相談ください。
お問い合わせはこちらから
【対応料金の見積もりは無料です】
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク