画像にスタイルシートで枠や影をつける
画像をそのままべた張りするのは味気ない。
でも、わざわざ加工するのは面倒だー。
という人にオススメの方法。
日記ブログの方でやってたら、どうやるの?と質問されたのでここで紹介します。

こんな風になります。
最初、いろんなサイトで紹介されているやり方をやっていたのですが、
IEのバグのせいでブラウザごとに違う表示になってしまっていたので、
ちょっと手間が増えますが、どのブラウザでも表示できるように改変してみました。
全ブラウザ対応!!と言いたい所ですが、WinのIEとMozilla FirefoxとOperaでしか
確認できていません。ごめんなさい(´・ω・`)
mac は持ってないので確認できません・・・。
IEはそろそろ7がリリースされるのかな?
それでバグが直っていたら、いろんなサイトでご紹介されている方法で大丈夫です。
バグとはどんなものかと言うと・・・小粋空間さんの
標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示するで詳しく説明されていますのでそちらをご覧ください。
みなさんがご紹介している方法は、あわせて小粋空間さんの
CSSで画像に影をつける(ドロップシャドウ)をご覧ください。
今回私も小粋空間さんのやり方を参考にさせていただきました。
前置きが長くなりましたが、順を追ってやり方を説明いたします。
1・影は影用画像で表示します。
POCHIKINGさんの
画像に自動的に影をつけてテキストを回り込ませるで配布してくださっていますので
ダウンロードしてください。
そしてサーバーにアップロードします。
2・画像に枠と影のスタイルシートを適用させる為に、imgを括ります。
枠用、影用と2つ囲みます。
<div class="img-kage"><div class="img-waku"><img src="gazou.jpg" alt="画像" /></div></div>
img-kageが影、img-wakuが枠です。ウン、そのままです・・・。
divはspanやpでも大丈夫です。
3・スタイルシートに追加します。
margin: 0px 0px 0px 5px;
background: url(影画像を置いたURL) right bottom;
float: left;
}
.img-waku {
position: relative;
left: -5px;
top: -5px;
padding: 5px;
background: #FFFFF0;
border: 1px solid #999999;
}
枠と影が付いた画像完成ですヽ(゚∀゚)ノ
*影はいらない枠だけでいいという方は、
<div class="img-kage">の囲いとスタイルシートのimg-kageの所を削除すれば
枠だけの表示になります。
*枠はいらない影だけでいいという方は、スタイルシートのimg-wakuの
background: #FFFFF0;
border: 1px solid #999999;
の記述を削除し、
padding: 0px;
にすれば影だけになります。

このままだと画像の後に書いた文字が横に回り込んで表示されます。
回り込むのが嫌な方は、<br clear="all" />を画像の後に入れて、
<div class="img-kage"><div class="img-waku"><img src="gazou.jpg" alt="画像" /></div></div>
<br clear="all" />
とします。

すると、このように文字の回り込みが解除されます。
この方法はimgを二重に囲むという面倒くさい方法ですが、
バグに左右されないので(・・・多分)それなりに役に立つのではないかと思います。
枠や影を消したいときは、スタイルシートの記述を削除すれば
divなどはそのままでも大丈夫です。
このカスタマイズはスタイルシート関連なので、バージョンに関係なく使えます。
MT以外でも使えます。




