しばた工務店 Weblog

1色しか透過色を設定できないGIFと違って、PNGはきれいな透過が表現できる画像フォーマットなんだけど、いかんせん、IE6以前では透過がサポートされてない。
IE独自のフィルターを使えば、一応使うことは可能なんだけど、いちいち設定するのもめんどくさい。

なんかラクチンな方法はないかなあ～と思って探していたら、iepngfix.jsというステキなライブラリをユンサンのサイトで発見。
http://blog.l-xs.com/yungsang/2007/02/png_ie_ie7.html

試してみるとバッチリ透過されたので、ありがたく使わせてもらうことにした。

このブログのタイトル部分「しばた工務店」の文字などは、このライブラリを使って透過してるよ。

以下は、WordPressのテーマの中で使うためのメモ。

1. 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]-->

2. iepngfix.jsをindex.phpの下のjsフォルダにアップ

3. 透過させたいPNGのタグに class=”iepngfix”と指定

classを指定するのは、imgタグでも aタグでもOKだった。

※PNG画像にwidthとheightを指定しないと崩れて表示されるので、htmlかcssの中でサイズを指定しておくこと。

・Windows XP SP2を適用すると、IE6で文字化けする不具合

マイクロソフトは、Windows XP SP2を適用するとInternet Explorer（IE） 6でコンテンツを閲覧した際に文字化けが発生する場合があると発表した。マイクロソフトでは、「詳細については現在調査中だ」とし、コンテンツを閲覧する際、IEの文字コードをUTF-8に変更することで回避できる可能性があるとしている。

あ゛あ゛あ゛、まためんどくさいことを…。

工務店のコンテンツは全部 “EUC” にしてるんだけど、”UTF-8″にしなきゃなんないのかなあ。
HTMLは、秀丸エディタで charset を置き換え→UTF-8で保存すればいいんだろうけど(それも、面倒だけど)、ブログの記事はどうしたらいいんだろう。
オプションの「エンコード指定」を変更するだけでいいのかな。過去の記事も自動的に変換してくれるのかな。試してみるのはちょっと怖いなあ…。

IE6が対応するのがスジだと思うんだけどさあ。ねえ？