[01/27] 
Internet Expoler 6 とPNG透過
Jan 2010
14
Thu
Category:Win Customize
Tags : Internet Explorer 6（IE6）はPNG画像の透明な部分が白くなって今います。これはIE6のバグ？なのでどうしようもないなぁと思っていたのですが、先日AntaresさんからJavascriptで透過できるとの話を聞き挑戦してみることにしました。ぜんぜん知らなかったのですが、たくさんのJavascriptがあるんですねぇ～。ビックリしました。
最近公表された「DD_belatedPNG.js」というのが良さそうなので使ってみましたが、どうしても他の場所がおかしくなるのです。かなり悪戦苦闘しましたが断念。でも何とかしたい。IE6でこのブログを見てくださる方が１割弱いるのです。いろいろ試したところ、ピッタリしたのは「IE PNG FIX v2.0 Alpha」でした。やっと見つけることができました。
IETester－IE6でみるとPNGが透過されません。
自分のためにもメモしておきます。
まずプログラムのダウンロードです。 → IE PNG Fix 2.0 Alpha 4
解凍するといろいろなファイルがありますが、使うのは「blank.gif」「iepngfix.htc」「iepingfix_tilebg.js」の3つです。
サーバーへアップロードするまえに修正箇所があります。
「iepngfix.htc」を開いて19行目を修正します。
// * An absolute path like: '/images/blank.gif' // * A path relative to this HTC file like: thisFolder + 'blank.gif' var thisFolder = document.URL.replace(/(\\|\/)[^\\\/]*$/, '/'); IEPNGFix.blankImg = 'http://ovaloffice.jp/wp-content/images/body/blank.gif';
「blank.gif」への絶対パスを記入してください。
これらのファイルをサーバーへアップロードします。
～の中に次の記述をします。（パスはご自身の環境にあわせてください。）
<!--[if lte IE 6]>
<script type=”text/javascript” src=”<?php bloginfo('url'); ?>/wp-content/themes/js/iepngfix_tilebg.js"></script>
<style type="text/css">
img, div { behavior: url(<?php bloginfo('url'); ?>/wp-content/themes/images/body/iepngfix.htc) }
</style>
<![endif]-->
これで完成です。
このように透明部分が白かったものが
見事透過されています。他には影響は無いようです。
Comment feed
Hatena Bookmark
del.icio.us
Google Bookmark
Yahoo! Bookmark
livedoor Clip
Nifty Clip
FC2 Bookmark
POOKMARK
newsing
Buzzurl
Technorati
うまくいって良かったですね－。
ウチもIE6対策で透過png用のスクリプト使ってます。
「条件付コメント」を使ってIE6以下のブラウザだけに透過スクリプトを読み込ませるようにしてます。こんな感じで↓
<!–[if lte IE 6 ]>
<script type=”text/javascript” src=”http://….”></script>
<![endif]–>
時間があれば、そっちもやっておくといいですよ。
あと、IEでレイアウトを確認したいなら、IETesterもいいですが、
「Internet Explorer Collection」が条件付コメントを
正確に読み込んでくれるのでけっこうオススメです。
http://finalbuilds.edskes.net/iecollection.htm
★★antaresさん★★
こんばんは。
いやいや半日かかりましたよ。(;><)
なかなかマニュアル通りには行かないものです。
教えていただきありがとうございました。
オススメのソフトはIE1から見ることができるんですね。
アイコンが懐かしく感じました。
いやぁ、高度な技術ですね。
さすがNIMITZさんです。
このブログの作成にはいろんな技術を駆使されているんですね。
改めて驚きました(゜o゜)
★★torotorotororiさん★★
こんばんは。
いろいろ詰め込んでいるものですから故障した時が大変です。
どこがおかしいのか発見するのにものすごく苦労します。
それと自分でやっておきながら忘れてしまうんですよね。(>_<)
夏の間はブログの改造はやらないので、秋になると記憶喪失状態です。
こんばんは。
PNGが透明にならないというのはそういう意味だったのですね。
でもそれを透明にするために、それだけの手間がかかっているなんて全然知りませんでした。
いつものことながらすごいです。
★★まつきんサンバさん★★
こんばんは。
PNG画像そのものは透明でもIE6では白く見えるという不思議な話です。
知らない人はカッコ悪いブログと思うでしょうね。
今ではIE6での閲覧者は1割を下回ります。しかし直してみました。
ちょっと遅すぎですね。(^^)ゞ