ねずみのあしあと 画面改修〜コンテンツエリアのワイド拡張(はてなダイアリー DENテンプレート改造)
はてなダイアリーには数多くのデザインテンプレートがあります。「ねずみのあしあと」ではDENというテンプレートを使っていますが、記事や写真を掲載するコンテンツエリアのワイドが510pxと狭めなのが悩みでした。Flickerから500pxの画像を読み込むと、マージンの影響でテンプレートの枠をはみ出してしまいます。
先週末、その問題を解消するべく改修に着手。
※CSSはかじった程度なので適当にやってます。間違っている箇所あるかもしれません。ご了承くださいませ。
CSSを探す
まずはソースを覗いてみると、上部にCSSを定義したファイルが3つありました。
<link rel="stylesheet" href="/css/base.css?20090911" type="text/css" media="all">
<link rel="stylesheet" href="/css/headerstyle_dg.css" type="text/css" media="all">
<link rel="stylesheet" href="/theme/DEN/DEN.css" type="text/css" media="all">
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でしか画面チェックしておりません