透過PNG対策(IEPNGFix v2.0 Alpha)

IE6以前のバージョンは、透過PNG(アルファチャンネル付きPNG)に対応していないため、正常に透過されず、 透過部分が灰色になってしまいます。

IE7以降のバージョン及びFirefox等での透過PNGの表示
IE7以降のバージョン及びFirefox等での透過PNGの表示

IE6での透過PNGの表示
IE6での透過PNGの表示

「IEPNGFix v2.0 Alpha」はIE5.5及びIE6でも透過PNGを正常に表示させるツールです。 ダウンロードはこちらからできます→IEPNGFix v2.0 Alpha
ダウンロードされた「iepngfix.zip」を解凍すると、その中に「iepngfix.html」というHTMLファイルが存在します。 「iepngfix.html」に適用方法が記載されています(英語)。

適用方法

  1. 「iepngfix.zip」を解凍し、その中の「iepngfix.htc」「blank.gif」をサイトフォルダにコピー＆ペースト。
    背景画像に適用させたいときは「iepngfix_tilebg.js」もサイトフォルダにコピー＆ペースト。

  2. 外部CSSファイルに以下を記載
    img, div { behavior: url(iepngfix.htc); }

    外部CSSファイルを使用していない場合は、透過PNGを表示させるHTMLファイルに以下を記載
    <style type="text/css">
    img, div { behavior: url(iepngfix.htc); }
    </style>

    "iepngfix.htc"の部分は、相対パスを使用する時は、透過PNGを表示させるHTMLファイルからの相対パスです。 お使いの環境に合わせて変更してください。

  3. 「iepngfix.htc」をテキストエディタで開き、16行目付近の「IEPNGFix.blankImg = 'blank.gif';」を確認。

    "blank.gif"の部分は、相対パスを使用する時は、透過PNGを表示させるHTMLファイルからの相対パスです。お使いの環境に合わせて変更してください。

  4. 背景画像に適用させたいときは、透過PNGを表示させるHTMLファイルのヘッダ部分に以下を記載。 <script type="text/javascript" src="iepngfix_tilebg.js"></script>

    "iepngfix_tilebg.js"の部分は、相対パスを使用する時は、透過PNGを表示させるHTMLファイルからの相対パスです。 お使いの環境に合わせて変更してください。

適用例

以下のように各ファイルを同一フォルダの同一階層に配置

適用例のフォルダ内
「alpha_png.html」は透過PNGを表示させるHTMLファイル。
「alpha_logo.png」は透過PNGファイル。
「iepngfix.htc」,「blank.gif」は「iepngfix.zip」を解凍しコピー＆ペーストされたファイル。

サンプルソース

<html>
<head>
<style type="text/css">
p{
 width:270px; height:70px; margin:50px;
 background-color:black;
}
img{ margin:10px; }
img, div { behavior: url(iepngfix.htc); }
</style>
</head>

<body>
<p><img src="./alpha_logo.png" alt="Nagomi's memo" /></p>
</body>
</html>

上記例では、「iepngfix.htc」,「blank.gif」を透過PNGを表示させるHTMLファイルと同一フォルダの同一階層に配置したので、 適用方法の2,3に記載した"iepngfix.htc"と"blank.gif"はデフォルトのまま変更していません。

透過PNGを表示させるHTMLファイルが複数あり、別々のフォルダに分かれているときは、 適用方法の2,3に記載した"iepngfix.htc"と"blank.gif"の部分は絶対パスで記載するほうが楽です。
相対パスでは、透過PNGを表示させるHTMLファイルが入っているフォルダごとに 「iepngfix.htc」,「blank.gif」のファイルを用意する必要があります。

inserted by FC2 system