WordPress個別サポート

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デザインが機能しているということです。

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

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

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

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

このようになるのは、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の使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート