1色しか透過色を設定できないGIFと違って、PNGはきれいな透過が表現できる画像フォーマットなんだけど、いかんせん、IE6以前では透過がサポートされてない。
IE独自のフィルターを使えば、一応使うことは可能なんだけど、いちいち設定するのもめんどくさい。
なんかラクチンな方法はないかなあ～と思って探していたら、iepngfix.jsというステキなライブラリをユンサンのサイトで発見。
http://blog.l-xs.com/yungsang/2007/02/png_ie_ie7.html
試してみるとバッチリ透過されたので、ありがたく使わせてもらうことにした。
このブログのタイトル部分「しばた工務店」の文字などは、このライブラリを使って透過してるよ。
以下は、WordPressのテーマの中で使うためのメモ。
- header.phpの</head>のすぐ上の部分に下記のコードを追加。
2行目の"src="の部分は絶対パスで記述しておいた。
※それぞれの環境に合わせてパスを書き換えておくこと。
<!--[if IE]>
<script type="text/javascript" src="http://shibata-koumuten.com/wp/wp-content/themes/hoge/js/iepngfix.js" charset="utf-8"></script>
<style type="text/css">
.iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}
</style>
<![endif]-->
- iepngfix.jsをindex.phpの下のjsフォルダにアップ
- 透過させたいPNGのタグに class=”iepngfix”と指定
classを指定するのは、imgタグでも aタグでもOKだった。
※PNG画像にwidthとheightを指定しないと崩れて表示されるので、htmlかcssの中でサイズを指定しておくこと。
