PNG Fix｜jquery

冒頭で説明した通り透明化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色で書き出されます。