はてなブログテーマ「Blank」の記事幅を変更する方法

2、3日前から、「Blank 記事幅 変更」という検索キーワードでこのブログに訪れる訪問者が多いので、簡単に解説しようかと思い…ましたが、サイドバーを 300px に固定するために少々理解し難い CSS を書いているため、"即"使えるよく使いそうな幅のサンプルCSSを記載しておきます。

640px

#blog-title-inner,
#content-inner,
#footer-inner,
.breadcrumb {
    max-width: 640px; /* for Smartphone and Tablet */
}

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

720px

#blog-title-inner,
#content-inner,
#footer-inner,
.breadcrumb {
    max-width: 720px; /* for Smartphone and Tablet */
}

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

800px

#blog-title-inner,
#content-inner,
#footer-inner,
.breadcrumb {
    max-width: 800px; /* for Smartphone and Tablet */
}

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

『for PC』の値はスマートフォン/タブレットで指定した値に 397 を加えた値を指定してください（サイドバーの幅やその周辺の余白を変えている場合は各自調整をお願いします）。