きょうは、テンプレート「エアメール」の「ブログ説明」に長文を記入すると、FireFox(FF)では折り返し位置がおかしくて綺麗に表示されない、っていう現象を解決する方法を紹介するよ。
【問題点】
またしても、InternetExplorer(IE) と FireFox(FF) の表示の相違による問題だよ。テンプレート「エアメール」で、長文(全角50文字くらい)のブログ説明を書くと、次のような変なことが起きるんだ。
IE:正しく折り返されて、便箋の範囲に収まる。
FF:ブログの右端で折り返されて、便箋からはみ出して、
消印や切手のところまで文字が重なる。
【解決策】
テンプレートの .description で、width 行を追加し、padding の値を変更すると解決できるんだよ。
【手順】
テンプレートの .description セクションに次の行を追加するんだ。
width:800px;
そして、padding の行を
padding:0px 400px 0px 10px;
に変更するんだ。
こうすれば、FF でも綺麗に表示されるようになるんだ。
【原因の考察】
どうやら、エアメールの「ブログ説明」の場合、padding の右端の基準となってるのが、
IE:width を考慮した右端
FF:ブログの右端(=bannerセクションの右端?)で、
width を考慮していない
になってるんじゃないかな。
だから、width と padding の関係が
width = padding + 400
くらいになるように保ちつつ、なおかつ
width = 800
くらいにすると、ちょうど IE と FF の双方で、適切な表示が得られるんだ。
そうすると、padding の値は 400 になるでしょ。
以上で、今日のシーサーブログのカスタマイズを終わるよ。
どう? 参考になったかな?
もしこの記事があなたの参考になりましたらランキングの応援お願い致します。
seesaaカスタマイズ職人の元気の源・人気ブログランキング
上記シーサーブログのカスタマイズは各自の責任において実行するようお願いします。
また、もし、間違いなどにお気づきの方は、気軽にコメントに書いてやってください。もちろん、普通のコメントは大歓迎です。ぜひ、コメントをお願いします。コメントが励みになりますので。
