テンプレート「ブルー」のバナー領域の修正

シーサーブログのカスタマイズ、がんばってますかぁ？

　今日は、テンプレート「ブルー」の「バナー領域」の塗りつぶし幅を修正する方法を紹介するよ。

【問題点】

　バナー領域を塗りつぶしたい場合に背景色（background-color）を指定するんだけど、デフォルトのスタイルシートだと、 IE（Internet Explorer） では塗りつぶされるバナー領域の幅が、右に広がる（本来の幅からはみ出す）んだよね。

　FF（FireFox） では問題ないんだけど。

　またしても、IE と FF の CSS の解釈の違いに翻弄されるんだよね。

【解決策】

　#banner セクションと、.description セクションの width を変更して解決したんだよ。

【手順】

　#banner セクションと、.description セクションの width がどちらも 800px になっているので、これを

　　　800px - padding-left

に変更したんだ。

　今は、padding-left が 25px になっていたから、

　　width:775px;

にしたんだ。これで、IE でも綺麗に表示されると思うんだけど、どうかな？

【原因】

　原因というほどのものでもないんだけど、IE ではそのセクションで指定した

　width + padding-left

の値が、塗りつぶし領域の幅になるみたいなんだよね。

　本来なら、padding 値は、width の内部に含まれるハズだったと思うんだけどなぁ。まあ、IE だからしょうがないか。


ということで、以上で今日のシーサーブログのカスタマイズを終わるよ。

　どうですか？　参考になりましたかぁ？




もしこの記事があなたの参考になりましたらランキングの応援お願い致します。
seesaaカスタマイズ職人の元気の源・人気ブログランキング

シーサーブログのカスタマイズの注意事項
　上記シーサーブログのカスタマイズは各自の責任において実行するようお願いします。

　また、もし、間違いなどにお気づきの方は、気軽にコメントに書いてやってください。もちろん、普通のコメントは大歓迎です。ぜひ、コメントをお願いします。コメントが励みになりますので。

「シーサーブログカスタマイズ超入門！」のトップページ