テンプレートの修正

このブログではBlogger提供の"Rounders 4"というテンプレートを使用しています。Blogger betaへの移行を渋った理由のいくつかの内の一つとして、このテンプレートのデザインがbetaでは崩れていることがあげられました。 この角が丸いヘッダは 　底辺の角が丸い背景画像 の上に 　上辺の角を丸くする画像 を重ね合せて実現しているようです。 Blogger betaでHTMLの構成が変更されたことでタグの親子関係が逆になったのにCSSの指定は旧Bloggerのまま、というのが原因のようです。つまり 　上辺の角を丸くする画像(角の丸み以外は透過) の上に 　底辺の角が丸い背景画像(上辺は四角い) を重ね合わせていたので、上辺の角が丸い部分には背景画像がなく、背景画像の上端に丸みがなくなっています。 ついでにpaddingやmarginも少々修正が必要です。 ・テンプレートのCSS

view plainprint?

1. #header-wrapper {  
2. background: #476 url("http://www.blogblog.com/rounders4/<span style="color:#ff0000;"><strong>corners_cap_top.gif</strong></span>") no-repeat left <span style="color:#ff0000;"><strong>top</strong></span>;  
3. margin:22px 0 0 0;  
4. padding:<span style="color:#ff0000;"><strong>8px</strong></span> 0 0 0;  
5. color:#ffffff;  
6. }  
7.  
8. #header {  
9. background:url("http://www.blogblog.com/rounders4/<span style="color:#ff0000;"><strong>bg_hdr_bot.jpg</strong></span>") no-repeat left <span style="color:#ff0000;"><strong>bottom</strong></span>;  
10. padding:<span style="color:#ff0000;"><strong>0 15px 8px</strong></span>;  
11. }  

#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

view plainprint?

1. #header-wrapper {  
2. background: #476 url("http://www.blogblog.com/rounders4/<span style="color:#6600cc;"><strong>bg_hdr_bot.jpg</strong></span>") no-repeat left <span style="color:#6600cc;"><strong>bottom</strong></span>;  
3. margin:22px 0 0 0;  
4. padding:<span style="color:#6600cc;"><strong>0px</strong></span> 0 0 0;  
5. color:#ffffff;  
6. }  
7. #header {  
8. background:url("http://www.blogblog.com/rounders4/<span style="color:#6600cc;"><strong>corners_cap_top.gif</strong></span>") no-repeat left <span style="color:#6600cc;"><strong>top</strong></span>;  
9. padding:<span style="color:#6600cc;"><strong>8px 0 8px 15px</strong></span>;  
10. }  

#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; }