2009-08-14 

はてなダイアリーの画像にCSSで枠を付ける

画像の枠

はてなダイアリーで、img要素にpaddingを入れborderで枠線を付けてもIEで枠線は表示されなかった。IEの互換表示云々なのか。

フォトライフからフォトライフ記法で画像を挿入すると、aのクラスとimgのクラスが同じ hatena-fotolifeとなる。

<a href=”http://f.hatena.ne.jp/ostad60/20090813191926″ class=”hatena-fotolife” target=”_blank”><img src=”http://f.hatena.ne.jp/images/fotolife/o/ostad60/20090813/20090813191926.jpg” alt=”f:id:ostad60:20090813191926j:image” title=”f:id:ostad60:20090813191926j:image class=”hatena-fotolife” ></a>

img要素にpaddingが使用できないので、a要素にpaddingでborderで線を指定すると枠線が表示されるようになる。Firefoxではpaddingが有効。

a.hatena-fotolife{
_border:1px solid #cccccc;
_padding:4px;
}

img.hatena-fotolife{
border:1px solid #cccccc;
_border:none;
padding:4px;
_padding:0;
}

Previous: 壁紙#002:ビーチと夕日 Next: 画像の撮影情報(Exif)を調べるのにはFirefoxアドオンのFxIFが便利

No comments yet!

Post your comments