あまりにも味気ないテンプレなのでヘッダ画像を置いてみた。background-image 方面にはうといので、FC2 テンプレ板などで既出かもしれないけれど、可変幅の画像かつ角丸な感じにする方法のメモなど。今のところ CSS の background-image はひとつの要素にひとつだけしか設定できない。縦横のサイズが可変（＝不定）な要素に角丸装飾をするには、自身の要素の他に 3つの要素とそれぞれの画像が必要になる。今回の、ヘッダのように縦方向のサイズを固定できる条件ならば 2つの要素・画像で済み、お手軽。
body {color: #000; background: #fff;margin: 0; padding: 0 40px 20px 40px;background: url(http://blog-imgs-27.fc2.com/s/u/g/sug/20070129.jpg) no-repeat 100% 15px;
}h1 {font: italic normal 2em/50px "times new roman", "";margin: 15px 0 0 -40px; padding: 0 0 0 45px;background: url(http://blog-imgs-27.fc2.com/s/u/g/sug/20070129.png) no-repeat 0 0;
height: 80px;}<body> の背景を右寄せ（今回、常に見せたい部分が右にあるという意味なので画像によっては適宜変更のこと）にするので、画像右端に角丸装飾を背景色の #fff で描いておく。<h1> の背景は左側の角丸になる。こちらは <body> の背景のはみ出した部分を隠すためのもので、内側にあたる部分を透過色にする。
画像の準備ができたら、あとはピッタリ重ね合わせれば OK。ポイントは <body> の画像を隠すには margin を 0 にしておくのが後で楽。（他の要素のために）padding を設定している場合は、隠す側の要素の margin をマイナスして相殺する。隠す側の要素を背景画像の高さに合わせ、縦方向の padding は 0 にする。これらすべての単位を px で指定すること。
< minimal | number of tags ブックマークレット > | 表紙へ戻る |