2013年6月11日火曜日

表示はエレガントでなければならない

このブログをスタートしてからずっとPCで更新をしてたのですが
数日前、何気なくiphoneから見てみたら
投稿した画像の下に改行されてたくさんの空白がある事に気付きました。


↑これの隙間はまだましな方で「どんだけ改行してるねん!」って
自己突っ込みせざるえない状況が多々見受けられました。
自白しますと「うわー、ダサいにも程があるやろ!」って恥ずかしくて恥ずかしくて。
10数年前、インターネット黎明期に流行った侍魂さんをはじめとする
「改行改行の下にオチがある」みたいなテキスト系サイトの様相を醸してる事に
さらなる恥じらいを感じました。
ちなみに侍魂さんの富士登山は更新してるのを兄と二人
Liveでリロードリロードで読んでいて
「ようこそ双子山へ」の瞬間、腹筋崩壊しました。

ここは昔取った杵柄、個人サイトをタグで作っていた頃の様な気持ちで
原因を探す事にしました。
捜索発見直ちに破壊のMETALLICAスタイルです



話しは戻しまして、これはただちに修正しないといけないと思い編集画面へ
これが編集画面です、編集画面ぐらいの改行でいけてるだろうと思っていたら。
HTMLのタグをみると・・・

「なんじゃこりゃー!」ですわ。
の部分に<BR>(HTMLで改行を表す)コードがずらっと並んで強力打線を組んでいます。
オプションをよくみたら、改行の項目が・・見落としてました。
「Enterキーを押して改行」→「<BR>タグを使用」に変更して
ダッっと<BR>タグを削除しました。

の部分にあった<BR>タグをバサっと抹消しました。
これでヤレヤレと思って表示したら・・・

画像の横に文章が回り込んでるやないか!!
調べてみるとCSSのfloatが原因のようでそれを回避してやればいいよう。
改行<BR>の代わりに<div class="clear"></div>を配置してやります。

するとPCのブラウザでも携帯でも綺麗に表示されました。

Blogger御利用で画像下の空白でお困りの方は少しタグの知識が必要ですが
これでエレガントな表示になると思いますのでお試しください。
私は過去に投稿したのも修正していかないと!