ねずみのあしあと画面改修〜コンテンツエリアのワイド拡張（はてなダイアリー DENテンプレート改造）

はてなダイアリーには数多くのデザインテンプレートがあります。「ねずみのあしあと」ではDENというテンプレートを使っていますが、記事や写真を掲載するコンテンツエリアのワイドが510pxと狭めなのが悩みでした。Flickerから500pxの画像を読み込むと、マージンの影響でテンプレートの枠をはみ出してしまいます。

先週末、その問題を解消するべく改修に着手。
※CSSはかじった程度なので適当にやってます。間違っている箇所あるかもしれません。ご了承くださいませ。

CSSを探す
まずはソースを覗いてみると、上部にCSSを定義したファイルが3つありました。

DENのスタイルを定義しているのは一番下の「DEN.css」
（http://d.hatena.ne.jp/theme/DEN/DEN.css）

全体の幅を広げる
このファイルを開いてみると「h1」と「.hatena-body」のクラス定義にある755pxが、コンテンツエリアとメニューエリアの全幅サイズを指定しているようです。まずはこれを795pxにして40px広げてみます。

h1{
width:755px;
text-align:left;
font-size:90%;
margin:60px auto 40px;
_padding:60px 0 40px; /* for IE */
_margin:0 auto; /* for IE */
}

.hatena-body{
width:755px;
text-align:left;
margin:0 auto;
}

コンテンツエリアの幅を広げる
さらにスクロールしていくと「/* main */ 」とコメントされたところがあります。これがコンテンツエリアの定義をしているようです。「.main」「#days」の510pxを550pxに拡張。続いてbackgroundで指定している画像の幅を550pxに広げます。

/* main */

.main{
width:510px;
float:left;
background:url("20071118193805.jpg") repeat-y;
margin:0 0 40px;
}

#pager-top{
font-size:80%;
background:url("20071118193806.jpg") no-repeat;
padding:15px 20px 10;
}

#days {
width:510px;
background:url("20071118193805.jpg") repeat-y;
}

・
・
・

#pager-bottom{
font-size:80%;
background:url("20071119150421.jpg") no-repeat left bottom;
padding:15px 20px 25px;
}

背景画像を加工
「.main」「#days」の画像は高さ1pxの同一画像なので、加工する画像は3枚。

1枚目：

（↑見えないですが画像です・・・）
http://d.hatena.ne.jp/theme/DEN/20071118193805.jpg

2枚目：

http://d.hatena.ne.jp/theme/DEN/20071118193806.jpg

3枚目：

http://d.hatena.ne.jp/theme/DEN/20071119150421.jpg

これらの画像幅が510pxなので画像編集ソフトで550pxに修正し、それを自分のフォトライフにアップロード。各クラスでしてしているbackground:urlをアップロードした画像のURLに書き換えます。

書き換えたスタイルを管理画面で適用

はてなダイアリーの管理画面「ブログ管理ツール > 詳細デザイン設定」の下部にある「スタイルシート」に修正したスタイルを貼付けて「変更」すれば完了です。

＜修正したソースはこんな感じです＞

h1{
width:795px;
text-align:left;
font-size:90%;
margin:60px auto 40px;
_padding:60px 0 40px; /* for IE */
_margin:0 auto; /* for IE */
}

.hatena-body{
width:795px;
text-align:left;
margin:0 auto;
}

/* main */

.main{
width:550px;
float:left;
background:url("http://img.f.hatena.ne.jp/images/fotolife/H/HappyPrince/20091122/20091122162115.jpg") repeat-y;
margin:0 0 40px;
}

#pager-top{
font-size:80%;
background:url("http://img.f.hatena.ne.jp/images/fotolife/H/HappyPrince/20091122/20091122162117.jpg") no-repeat;
padding:15px 20px 10;
}

#days {
width:550px;
background:url("http://img.f.hatena.ne.jp/images/fotolife/H/HappyPrince/20091122/20091122162115.jpg") repeat-y;
}

#pager-bottom{
font-size:80%;
background:url("http://img.f.hatena.ne.jp/images/fotolife/H/HappyPrince/20091122/20091122162116.jpg") no-repeat left bottom;
padding:15px 20px 25px;
}

同様のお悩みを抱えている方のご参考になれば。
※ちなみに、MacのSafari4.0.3、Firefox/3.0.15でしか画面チェックしておりません