Geeklogで透過pngをIE6で表示する方法
ブラウザ事情が大きく変わり透過pngを表示できるようになったのですが
ここで問題になるのは永遠の問題児で有名なIE6。
AlphaImageLoaderフィルターを使って表示させるものは多かったのですが
画像をリピートできないなどの問題もあり採用を見合わせてました。
しかし救世主として違う意味で有名なDD_BelatedPNG.jsを使う事でGeeklogの
テーマでもIE6で透過PNGを使えます。
DD_BelatedPNG.jsの使用方法
- まずはサイトから最新版をダウンロード（2010年１月５日現在0.0.8a）
２種類ありますがminiの方がファイルサイズが小さいです。 - DD_BelatedPNG.jsを組み込む。
- DD_belatedPNGfix()を書き込む。
- 透過させたい部分のCSSを指定する。
テーマへの組み込み方
使用するテーマの「javascriptフォルダ」にDD_BelatedPNG.jsを設置し
header.thtmlの<head></head>内に以下を書き込みます。
これはIE6のブラウザの時だけ有効になるコンディショナルタグ（おまじない）です。
<!--[if lte IE 6]>
<script type="text/javascript" src="{layout_url}/javascript/DDbelatedPNG8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('透過させたい部分のCSSを指定');
</script>
<![endif]-->
例）ナビゲーション部分に透過PNGを使いたい。
ナビゲーション部分に適当なクラスを指定する。（ここでは.ieclと仮定）
この場合であれば
<!--[if lte IE 6]>
<script type="text/javascript" src="{layout_url}/javascript/DDbelatedPNG8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.iecl');
</script>
<![endif]-->
となり、header.thtmlのナビゲーション部分に
<div id="navigation" class="iecl">
と指定する。
ここで適当なクラスにしておけば他の部分でも使い回しができます。
そろそろIE6もターゲットブラウザから外される事が多くなってきていますが
対応させなければならない時は便利なので一度お試しあれ。