このブログではBlogger提供の"Rounders 4"というテンプレートを使用しています。Blogger betaへの移行を渋った理由のいくつかの内の一つとして、このテンプレートのデザインがbetaでは崩れていることがあげられました。
この角が丸いヘッダは
底辺の角が丸い背景画像
の上に
上辺の角を丸くする画像
を重ね合せて実現しているようです。
Blogger betaでHTMLの構成が変更されたことでタグの親子関係が逆になったのにCSSの指定は旧Bloggerのまま、というのが原因のようです。つまり
上辺の角を丸くする画像(角の丸み以外は透過)
の上に
底辺の角が丸い背景画像(上辺は四角い)
を重ね合わせていたので、上辺の角が丸い部分には背景画像がなく、背景画像の上端に丸みがなくなっています。
ついでにpaddingやmarginも少々修正が必要です。
・テンプレートのCSS
#header-wrapper {
background: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:#ffffff;
}
#header {
background:url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
padding:0 15px 8px;
}
・修正後のCSS
#header-wrapper {
background: #476 url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:22px 0 0 0;
padding:0px 0 0 0;
color:#ffffff;
}
#header {
background:url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;
padding:8px 0 8px 15px;
}
