Twenty Elevenの上部余白を削除する

Twenty Elevenで上部の余白削除前WordPressのデフォルトテーマであるTwenty Eleven。シンプルで使いやすいですが、カスタマイズしたい箇所がたくさんあると思います。
本サイトでは、Twenty Elevenの子テーマを作成し、色々なカスタマイズを紹介しております。

Twenty Elevenの最上部に余白があります。この余白がどうしても削りたく思いました。
早速、子テーマのCSSを編集です!

子テーマのスタイルシート編集

編集自体はとても簡単に終わります。#page {
margin: 0em auto;
}
これを追記するだけです。
※ 子テーマではなくTwenty Elevenを直接編集する場合には、スタイルシートの最下部に上記コードを追記してください。

Twenty Elevenのデフォルトでは、上記部分は、#page {
margin: 2em auto;
}
となっております。上部のマージンを0にしてあげるだけですね。
子テーマのスタイルシートなので、デフォルトの設定が上書きされて、上部のマージンがゼロになるんですね。

余白が消えてすっきり

Twenty Elevenで上部の余白削除後この画像では少々わかりにくいかもしれませんが、先ほどヘッダー上部にあった余白がなくなりました!
小さな変化ですが、こういった修正を繰り返していくとかなり自分好みになっていきます。
今後も色々なカスタマイズを紹介していきたいと思います。


関連記事

WordPressのTwenty Elevenのヘッダーに画像を貼る Twenty Elevenのヘッダーに画像を貼る
WordPressのTwenty Elevenのヘッダー部分に画像を、拡大表示せずに貼る方法を紹介します。
WordPressのTwenty Elevenで1カラム表示横幅カスタマイズ Twenty Elevenを1カラムにして横幅を目一杯広げる
WordPressのデフォルトテーマにもなったTwenty Elevenをカスタマイズし、個別記事や固定ページを1カラムで横幅目一杯で表示する方法です。
Twenty Eleven固定ページのコメント欄削除
WordPressで、固定ページのコメント欄が不要だと思う方に、コメント欄削除の方法を紹介します。
Twenty Elevenの記事タイトルを装飾
Twenty Elevenでの記事タイトルの表示の仕方を編集・装飾の方法を紹介します。
Twenty Elevenのコメントリンク・吹き出しを削除
Twenty Elevenでコメント何件という表示をしてくれている吹き出しを削除する方法を紹介します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>