August 21, 2007 2:16 PM
Vicunaテンプレートをカスタマイズ(1) ヘッダー領域に背景画像を設定
Category:HTML/CSS
Tags:CSS Movable Type
- [2010/05/18追記]
- Vicunaテンプレートのカスタマイズを目的にこのページにアクセスをされた方は、http://vicuna.jp/をまずご覧になることをおすすめします。とりわけ、Movable Typeのそれのカスタマイズはhttp://mt.vicuna.jp/customize/に、ヘッダー領域の背景画像の表示方法などについては、http://mt.vicuna.jp/customize/change-layout/に、テンプレートの作者による適切な説明が掲載されています。
Vicunaテンプレートでは、最初にダウンロードしたファイル群に用意されているCSSモジュールを読み込んでやることで、一発でヘッダーの画像の設定もできる。
だけど今回は手動でソースを書き換えることによってヘッダー領域に背景画像を設定してやることにした。
まず、div#header,div#content,div#footerに対してwidth:800pxと固定幅を設定した。幅800pxの画像を用意していたからだ。
その次にdiv#headerに対してbackground-image:url(http://hoge.hoge/hoge);と背景画像を設定。
そしてdiv#headerに対してheightを指定した。
用意していた画像の高さは229pxだったので
div#header {
height:229px;
}
と記述してやったところ
このように、画像が繰り返し表示されてしまった。どうやらdiv#headerの領域が想定していたより大きい。
数値をいろいろ調整して、正しく表示されることはできたのだけれど、理由がわからないことには気持ち悪い。
そこでWebにあたってみる。すると意外とすんなりと疑問を氷解させてくれるページに出会った。
枠線とパディングとサイズの正確な感覚を -2step脱テーブルスタイルシートCSSレイアウト講座-
このページによると、
widthとheightは、内容のサイズを決定する属性です。
枠線とパディングのサイズは含まれてません。
だから、(中略)widthとheightから、パディングと枠線のサイズを引き算して、値を定義してあげないといけません。
調べてみると、Vicuna+Vegaテンプレートでは、div#headerに対して
div#header {
padding: 1px 0 20px;
border-bottom: 1px solid #eee;
}
とスタイルを指定してある。
- 上パディング：1px
- 下パディング：20px
- 下ボーダー:1px
を足しあわせた22pxを想定しているボックスの高さからひいてやった値をheightの値とすればいいのだ。
229-22=207
div#headerに対してheight:207pxと指定してやる
すると
画像のように、ピタッとレイアウトが収まった。
[追記]
固定幅800pxはすこし物足りない・・MT4のダッシュボードは930pxほど作業領域の幅としてとられている。第一に考えるべきはblogを見に来てくれている人の環境だとはわかっているのだけれど。
関連記事
Tweetbacks
Trackback URL
Leave Your Words