手軽に透過PNGをIE6に適用させたいなら|jQuery

PNGファイルはアルファチャンネルを保存できます。ようは画像を透明化できるということです。IE6から以前のバージョンはこの透明化PNGを表示させると灰色になってしまいます。
今回はjQueryを使うことでIE6に透明化PNGを対応させる方法を紹介します。

PNG Fix|jquery

PNGの透明化エラー

冒頭で説明した通り透明化PNGはIE6では正常に表示されず、透明部分がグレーで表示されます。それを解消するのがPNG Fixと呼ばれるjQueryライブラリです。
使い方は単純で、ヘッダーにコードを数行記述するだけで特に設定は必要ありません。

導入方法

  1. jQuery(本体)のダウンロード|jquery-1.6.2.min.js(2011/7現在)
  2. PNG Fixのダウンロード|jquerypngfix.js
  3. ヘッダーに各ライブラリのコードを記入

jQueryの本体は必要な方だけダウンロードしてください。JSファイルは任意のフォルダへアップしてください。

jQueryの導入

<script type="text/javascript" src="&#91;パスを記述&#93;/jquery-1.6.2.min.js"></script>

PNG Fixの導入

<script type="text/javascript" src="&#91;パスを記述&#93;/jquerypngfix.js"></script>

ヘッダーへ実行コードの記述

<script type="text/javascript">
jQuery(function($) {
	// div要素のバックグラウンドイメージに適応
	$("div").pngfix();
	// img要素に適応
	$("img").pngfix();
});
</script>

おまけ|実行コードをヘッダーに書かず、JSファイルにして読み込む

ヘッダーの記述が増えるのが嫌な場合や、WordPressのプラグインの関係でヘッダーに記述できない場合など実行コードのみを別JSファイルに記述して読み込ませます。

新たなJSファイルを作り読み込む

jQuery(function($) {
	// div要素のバックグラウンドイメージに適応
	$("div").pngfix();
	// img要素に適応
	$("img").pngfix();
});

上記のコードを新たに作ったJSファイルに記述し下記のコードで読み込みます。

<script type="text/javascript" src="&#91;パスを記述&#93;/&#91;新たに作ったJSファイル名&#93;"></script>

透明化PNGファイルを使用する場合の注意

PNGにアルファチャンネルを保存できるのはRGBカラー(フルカラー)でのみです。インデックスカラー(256色)で書き出した場合、透明適応されません。
使用画像ソフトで書き出す際にはご注意ください。
Photoshopの場合はPNG-24で書き出せば透明化できます。PNG-8を選んだ場合は256色で書き出されます。