• 2010年1月 5日(火) 02:11 JST
  • 投稿者:
    augebang
  • 閲覧数
    1,862

Geeklogで透過pngをIE6で表示する方法

ブラウザ事情が大きく変わり透過pngを表示できるようになったのですが
ここで問題になるのは永遠の問題児で有名なIE6。

AlphaImageLoaderフィルターを使って表示させるものは多かったのですが
画像をリピートできないなどの問題もあり採用を見合わせてました。
しかし救世主として違う意味で有名なDD_BelatedPNG.jsを使う事でGeeklogの
テーマでもIE6で透過PNGを使えます。

DD_BelatedPNG.jsの使用方法

  1. まずはサイトから最新版をダウンロード(2010年1月5日現在0.0.8a
    2種類ありますがminiの方がファイルサイズが小さいです。
  2. DD_BelatedPNG.jsを組み込む。
  3. DD_belatedPNGfix()を書き込む。
  4. 透過させたい部分のCSSを指定する。

テーマへの組み込み方

使用するテーマの「javascriptフォルダ」にDD_BelatedPNG.jsを設置し
header.thtmlの内に以下を書き込みます。
これはIE6のブラウザの時だけ有効になるコンディショナルタグ(おまじない)です。

例)ナビゲーション部分に透過PNGを使いたい。

ナビゲーション部分に適当なクラスを指定する。(ここでは.ieclと仮定)
この場合であれば

となり、header.thtmlのナビゲーション部分に

と指定する。

ここで適当なクラスにしておけば他の部分でも使い回しができます。

そろそろIE6もターゲットブラウザから外される事が多くなってきていますが
対応させなければならない時は便利なので一度お試しあれ。

トラックバック

このエントリのトラックバックURL:
http://gltmatrix.com/trackback.php/DDBelatedPNG

サイト管理者はコメントに関する責任を負いません。