余白(margin padding)を削る-WordPress Twenty Elevenカスタマイズ

更新


twentyelevenがレスポンシブなのは気に入っているけれど、細かいデザインについては文句たらたらなウェブシュフです。

文句のうち1つは、上下左右の余白が広すぎることです。

今回ここをいじってみました。

いじるのは当然style.cssです。あくまで私のセンスで空白(margin,padding)を調整しているので、ご自分のセンスに合わせてアレンジしてください。

Structure

まず、style.cssのなかでコメントアウトされている「=Structure」を探してください。左右の余白指定の大部分はここに集中しています。

/* =Structure
----------------------------------------------- */
body {
padding: 0 2em;
}
#page {
margin: 2em auto;
max-width: 1000px;
}
#branding hgroup {
margin: 0 7.6%;
}
#access div {
margin: 0 7.6%;
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
#content {
margin: 0 34% 0 7.6%;
width: 58.4%;
}
#secondary {
float: right;
margin-right: 7.6%;
width: 18.8%;
}

これを以下のように書き換えます。

/* =Structure
----------------------------------------------- */
body {
padding: 0;
}
#page {
margin: 0em auto;
max-width: 1000px;
}
#branding hgroup {
margin: 0 2%;
}
#access div {
margin: 0 2%;
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
#content {
margin: 0 34% 0 2%;
width: 64%;
}
#secondary {
float: right;
margin-right: 2%;
width: 24.4%;
}

こんな感じで灰色の部分が消えたと思います。

Header

Structureの部分の調節が終わったら、次は「=Header」の部分の調節です。主に縦方向の余白を調節します。

/* =Header
----------------------------------------------- */
#branding {
border-top: 2px solid #bbb;
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
#site-title {
margin-right: 270px;
padding: 3.65625em 0 0;
}
#site-title a {
color: #111;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
color: #1982d1;
}
#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 0 270px 3.65625em 0;
}
#branding img {
height: auto;
margin-bottom: -7px;
width: 100%;
}

これを以下のように変えてみてください。

/* =Header
----------------------------------------------- */
#branding {
border-top: 2px solid #bbb;
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
#site-title {
margin-right: 270px;
padding: 0.2em 0 0;
}
#site-title a {
color: #111;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
color: #1982d1;
}
#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 0 270px 0.2em 0;
}
#branding img {
height: auto;
margin-bottom: -7px;
width: 100%;
}

上下方向の余白もだいぶ削れましたが、検索窓が少し下に下がりすぎました。

次は、検索窓の位置を修正します。

余白(margin padding)を削る-WordPress Twenty Elevenカスタマイズ」への3件のフィードバック

  1. kirinashi

    はじめまして。Google検索からきました。

    先日WordPressを導入しまして試行錯誤していたところ、こちらの記事にとても助けられました。
    どうしても気になっていたヘッダー周りの余白が消せてとてもすっきり!
    ありがとうございました。

    他のTipsも引き続き勉強させていただきますー。

    1. web_shufu 投稿作成者

      kirinashiさんはじめまして。私の歩いた足跡がkirinashiさんのお役に立ててなによりです。なにぶん素人の体験談の域を出ない内容ですので、過度の期待は禁物ですが、うまく利用していただければ幸いです。

  2. ピンバック: ワードプレス ―セルの上下の余白を小さくすることにやっと成功 | クイズ王の部屋

コメントは停止中です。