png画像をie6できちんと簡単に透過させる
()※2009年9月1日、スクリプトに不具合があったので追記してます。（下の方）
今作っているサイトではpng画像を使わないとデザイン通りにならない。
今まであんまり使ったことなくて、
ie6以下ではpng非対応だからiepngfixを入れておけば大丈夫というイメージしかなかったので、
今一度このタイミングでpngの表示について調べてみた。
案の定、Designwalkerとコリスさんがヒットしますね。
透過PNGをIE6以下のバージョンで綺麗に表示する方法 | DesignWalker
↑これやってみたけど、全然うまくいかなかった。
てか、右クリック保存しても拡張子こそjsだけど中身がそれらしきものではないような…。
右クリック先のページのソースみたいな…。
超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス
↑これ、jsの読み込みさえできていれば、あとは特になにもしなくてもimgもcssの背景でもpngが適用されるという便利なもの。
だけど、これ使うとなぜかie6で定義リストしていたところのレイアウトが崩れた。
理由はわからないけど、読み込みを解除すればレイアウトが正しく表示されるので、これが問題と思われる。
結局無難に使えたのがなんだかんだでiepngfixでした。
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる | DesignWalker
ソースのダウンロードとやり方は↑に書いてあります。
ただ、この記事だと背景画像とかに入れられたpngへの適用の仕方こそ書いてあるものの、HTML内のimgタグで入れられた画像にどうiepngfixを適用するか書いてなかったので補足。
imgタグに入れられたpng画像すべてにie6以下で透過を適用するには、
CSSでimgセレクタに対し
img {
behavior: expression(IEPNGFIX.fix(this));
}
な感じで書いておけばよかったです。これでimgタグで入れられた画像にもすべて透過が適用されました。
というわけで、iepngfixがあればpng表示に関しては十分でした。
※8月11日追記
よく見たら今度はie7でレイアウトが崩れてる！！
iepngfixを外したら、崩れた部分が直った…。
どうしよう…。つまりie6だけにiepngfixを適用すればいいわけなので、
* html pgf{
behavior: expression(IEPNGFIX.fix(this));
}
な感じでie6だけに適用されるCSSを用意しておいて、pngを背景に使っているタグにこのクラスを適用すれば問題は解決されました。
imgタグで入っている画像に関しては特にいじる必要はなかったです。
ほんと焦った。
※9月1日追記
いつのまにか今度はie6でpng画像が表示されなくなっている！！いや表示はされているけど、変な×マークが出てる。
調べてみると、どうやらDesignWalkerで配布されていたスクリプトの、透過画像のリンク切れ起きている（？）みたいな感じ。よくわからないけど…。
仕方ないどうしようってところで、そもそもDesignWalkerで配布されているのは大元サイトのをいじっている（？）みたいな感じのようなので、本家サイトのiepngfixを使ってみる。
http://www.twinhelix.com/css/iepngfix/
ここのバージョン2.1を使用してみる。
2.1のダウンロードは
http://www.twinhelix.com/test/
のページからで、一番上に「IEPNGFix v2.0 Alpha」とあるので、そこからダウンロード。
使い方に関しては
http://www.twinhelix.com/css/iepngfix/demo/
に載っている。ページの見出しはバージョン1になっているけど、2.1でもこれと同じやり方でできました。
簡単にまとめると、
1．ファイルアップロード
ダウンロードしたフォルダになんかいっぱいファイルがあるけど、
iepngfix.htcとblank.gifとiepngfix_tilebg.jsの3つだけサーバーにアップすればOK
2．スタイルシートにhtcファイル設定
img, div { behavior: url(http://●●●/js/iepngfix.htc) }
絶対パスでOKです。マニュアルによると、CSSからのパスではなく、HTMLファイルからのパスで記述してくださいということなんで、絶対パスにしておいた方が無難ですね。
背景画像にpngを設定する場合は、その箇所ごとに記述します。
3．iepngfix.htcファイルにblank.gif画像のパスを記述。
16行目あたりに、
IEPNGFix.blankImg = 'http://●●●/js/blank.gif';
みたいな感じで画像へのパスを書きます。ここも絶対パスでOK。
4．あとはjsの記述。
<script type=”text/javascript” src=”iepngfix_tilebg.js”></script>
をHTMLのヘッダに追加。もちろんこれもパスは合わせる。
これでやっとFireFoxでもIE7でもIE6以下でも無事表示されました。
今回は以下のサイトを参考にさせてもらいました。
