はてなブログテーマ「Blank」のカスタマイズ（レイアウト編）

はてなブログテーマ「Blank」のカスタマイズ方法、レイアウト編です。サイドバーの幅を変更する方法や、ページ全体に背景画像を表示する方法について記載しています。参考になれば幸いです。

サイドバーの幅を変更する

Blank のサイドバーは、広告を配置しやすくするために幅を固定しています。デフォルトの幅は、配信数が最も多いレクタングル（中）に配慮して 300px に設定しています。

@media screen and (min-width: 960px) {
    #wrapper {
        width: 100%;
        margin-right: -348px;
        padding-right: 348px;
        box-sizing: border-box;
        float: left;
    }
    #box2 {
        width: 300px;
        float: right;
    }
}

これがデフォルトの CSS です（ベンダープレフィックスは省略）。

サイドバーの幅を変更するには、#wrapper の margin-right と padding-right にはそれぞれ、設定したいサイドバーの幅＋余白（48px）を負の値/正の値で指定して、#box2 の width には設定したいサイドバーの幅をそのまま指定します。

例として、レクタングル（大）の 336px に変更してみます。

#wrapper の margin-right に -384px（336px+48px）を、padding-right に 384px（〃）を指定します。緑と青に色付けられたサイドバーのスペースが広がっているのがわかりますでしょうか。

#box2 の width に 336px を指定して、広がった緑のスペースを埋めれば完了です。

記事の幅を元に戻す

上記の手順でサイドバーの幅を広げると、広げた分だけ記事の幅が狭まります。気になる方は、下記の CSS をカスタムCSS欄に貼り付けて、max-width の値に広げたサイドバーの幅を加えてください。

@media screen and (min-width: 960px) {
    #blog-title-inner,
    #content-inner,
    #footer-inner,
    .breadcrumb {
        max-width: 1062px;
    }
}

背景画像をページ全体に表示する

ヘッダーの背景だけでは物足りないという方に。HTML の都合上、グローバルヘッダーメニューが画面上部に固定されなくなります。

#globalheader-container {
    position: static;
}
#container {
    margin-top: 0;
    background-color: #fff
}
#globalheader-container,
#container,
#footer {
    margin: 0 auto;
    max-width: 1220px;
}