しばた工務店 Weblog

IE6でも気にせずPNGを使えるようになったので、画像をPNGに差し替えようと作業していて気づいたんだけど。

PhotoshopでPNGファイルを作成して、IEで表示すると、元の画像と異なった色で表示されるのね。全体的に色が明るいというか。画像単体では気づかなかったけど、他の要素と並べると、はっきり色が違う？？

いろいろググって調べてみたんだけど、PNG内部のチャンクに保存されているガンマ情報が原因らしい。
このガンマ情報を削除してやればちゃんと表示されるんだけど、Photoshopでは、この情報を削除することができない（ーー）。

Fireworksなどで保存しなおしてやればいいんだけど、それだけのために他のソフトを立ち上げるのもなあ～。つか、こんな問題、世界中で困ってるはずだから、プラグインがあるんじゃないの？

…で、見つけたのが、Photoshop用のプラグイン「SuperPNG」。
登録が必要だけど、フリー。すっばらしい。

http://www.fnordware.com/superpng/

「別名で保存」のファイル形式の中に「SuperPNG」と表示されるので、従来のPNGとは別に使うことが可能っす。
Photoshop 5.5用とあるけど、CSでもCS2でも問題なく使えたよ。

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の中でサイズを指定しておくこと。

さて交流戦、つうことでドラゴンズ戦を見に札ドに行ってきよ。

セリーグの中では一番対戦が多いような気がするドラゴンズ。ドアラの他にシャオロンも来てくれたよ。シャオロンは北海道初上陸だって。パオロンは今回ミニサイズになって、シャオロンのポケットに入っていたよ。

正面から見ると何の生物か分らない(笑)シャオロン。横のアングルをなんとかおさめたよ。

ドアラは、ドラファンだけじゃなくファイターズファンにも大人気。たくさんのファンに囲まれてなにやら余裕の表情ｗ。ワタシもしっかり握手してもらったよ。
続きを読む »