2012年7月9日月曜日

background-color:white の呪い?(画像編)


気にはなっていたんです、時々・・・

でもそんな事有り得ない・・・

ブログに投稿すると画像の下に白い線のようなものが出ているのは何故?

もともと画像にあったからに違いない・・・でも・・・

デジカメで自分で撮影した画像に白い線なんてないよ?

ま・・・まさか・・・有り得ないはずだが・・・

background-color:white の呪いか!?


と言うことで確認してみるとやはり奴でした・・・ orz


同じ画像をですが、下の画像だけ画像の下に白い線が見えます。

HTMLで表示すると



画像も影響を受けるのか・・・
まぁ当然と言えば当然、画像の後ろには背景があります。
ただ、なんで見えないはずの背景が下に少しだけ見えるよう
になるのかが疑問なんですけどね。

テキストと画像という違いはありますが、発生条件は同じです。
簡単に解説すると次のようになります。


1枚目の写真は貼り付けただけ、デフォルトで位置は中央に
なっています。
これを左寄せしたのが2枚目、このままだと写真の下に書い
たテキストが横に来てしまいます。
なので2枚目の上の赤丸■の行を消して写真を1行上にあげ
ます。
するとテキストの位置が下にきます。
この写真分で1行という扱いになり、次の行が下に移ります。


これら一連の作業をHTMLでみるとこうなります。


もともとブログは思いつき、作り方なんて教わったわけでもな
いしこういうやり方もいろいろ弄った結果です。
横にテキストが来るのが嫌だったのでこうしているのですが、
ひょっとしてコレってやっちゃダメな方法?



まぁ対策もテキストの時と同じです。

"background-color: white; clear

赤字の部分を削除すれば直ります(正しいやり方かは保証で
きないですけどね)。
clearの前の半角スペースもとりあえず消しています。
過去の投稿や電力の見える化の方も全部見直して修正
しました。
確認はしてないですが、テキストと同じ理屈ならIE9では発生
しないんでしょうね。


疑問がひとつ・・・呪われてなかった画像もありました。
投稿は基本的に同じ作り方のはずなのですが何が違うんの?

background-color: white の呪いは背景が白だと発見で
きません。
たまたま電力の見える化の背景を白以外にしたので気づ
きましたが今後の事を考えてこのブログにも背景に薄い色を付
けてみました。
これで投稿のプレビューで気づく・・・はず?


background-color: white の呪いの過去記事は こちら こちら です。

パソコン関連の履歴書は こちら です。


(トップ画像:There’s More Than One Way To Define A Ghost

4 件のコメント :

  1. これうっとおしいですよねぇ・・・
    自動で余計なことしてくれちゃって。
    HTMLでわざわざ修正かけるのめんどくさいけど、現状仕方ないのかしら。

    返信削除
  2. コメントありがとうございます。
    今の所HTMLで修正する以外対応策がみつかってません。
    すごい面倒で困ってます・・・

    返信削除
  3. はじめまして
    来て早速だけど、ブログのお陰で白く塗りつぶされてたのが直せたよ!
    ありがとう!
    http://junkgadgetslive.blogspot.jp/2012/10/blogger.html

    返信削除
    返信
    1. コメントありがとうございます。
      ご覧いただいた方に何かひとつでも参考になれば幸いです。

      削除

※1.コメントは管理人の承認後表示されます。
※2.何故かコメントに返信できません、ごめんなさい m(_ _;)m