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%;
}

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

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