Epic テーマ（はてなブログテーマ）の記事の幅を広げる

このブログは、はてなオフィシャルテーマの Epic テーマを使っています。 Epic はシンプルで気に入っているテーマなのですが、記事の幅がちょっと狭いのがイマイチなんですよね。。。

ということで、デザイン CSS の設定をいじって幅を広げてみました。

設定内容を置いておくので、Epic テーマの記事の幅を広げたい場合に参考にしてもらえたらと思います。

設定内容

#container {
width: 1080px;
}

#wrapper {
width: 820px;
}

#main {
width: 660px;
}

#box2 {
width: 200px;
}

/* ソースコードのフォントはちょっと小さめにする */
pre {
  font-size: 90%;
}

/* 背景画像の幅は1000pxで固定なので、100%にして引き伸ばす */
#blog-title-inner {
background-size: 100%;
}

この内容をデザインCSSの末尾に追記します。

Before / After

Before

After

設定内容の説明

記事要素 #main の幅を広げるためには、上記画像の通り #wrapper と #container もそれぞれ幅を広げる必要があります。 今回は #main を 100px 広げるために、 #wrapper と #container もそれぞれ 100px 広げました。 またこれに合わせてサイドメニュー #box2 も 20px ほど広くました（ #container をさらに 20px 広げました）。

100px 幅を広げたことで、一行当たりの文字数が全角 40 字から 47 字に増えました。やったぜ。