MTカスタマイズ法収集ブログ

最初、いろんなサイトで紹介されているやり方をやっていたのですが、
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・スタイルシートに追加します。

枠と影が付いた画像完成ですヽ(ﾟ∀ﾟ)ノ

*影はいらない枠だけでいいという方は、
<div class="img-kage">の囲いとスタイルシートのimg-kageの所を削除すれば
枠だけの表示になります。

*枠はいらない影だけでいいという方は、スタイルシートのimg-wakuの
background: #FFFFF0;
border: 1px solid #999999;
の記述を削除し、
padding: 0px;
にすれば影だけになります。

<div class="img-kage"><div class="img-waku"><img src="gazou.jpg" alt="画像" /></div></div>
<br clear="all" />

とします。

この方法はimgを二重に囲むという面倒くさい方法ですが、
バグに左右されないので(・・・多分)それなりに役に立つのではないかと思います。

枠や影を消したいときは、スタイルシートの記述を削除すれば
divなどはそのままでも大丈夫です。

このカスタマイズはスタイルシート関連なので、バージョンに関係なく使えます。
MT以外でも使えます。