Internet Explorer 7のリリースから時間も経ち、徐々に普及している感もあるIE7。（実際はInternet Explorer 8がリリースされているのでInternet Explorer 7も古いんだけどね。）
今年の10月には新しいOS：Windows7がリリースされれば、駄作OS：VISTAよりは普及するかな？個人的にはXPで十分だけど、Windows7には期待している部分も。
と言うのも、Windows7があるていど普及してくれればWEB屋として嬉しいのはInternet Explorer 8のシェアが少し広がるかな？と言った期待が。
Internet Explorerは自動アップデート機能がないので、未だにInternet Explorer 6を使っている人が多いもんな～。そりゃそうだよな。PC詳しくない人が、わざわざWindows Update する率は低いだろうからIE6のままって事なんだろうけど。
さてさて、そんなIEだけど、オイラの仕事サイトや、クライアントさんのサイト見ても、確かにInternet Explorer6のシェアが低くなってきたとは言え、まだ3～4割がInternet Explorer6です。
Internet Explorer6で困るのが、タイトルでも書いたようにPNG画像の使用。
一部の画像をPNGで使うだけだったら、Internet Explorer6でも回避方法があるので問題はないんだけど、CSSでbackground:repeatにPNG画像使うには色々と面倒なことが。
最近、個人的にサイトデザインで使うテクニックの一つにPNG画像を数枚重ねてサイトに奥行き出したり、半透明にしたりとデザインにも変化出しているんだけどIE6では面倒な事がいっぱい。
※IE6でのPNG画像使用方法のメリットデメリットはこちらのITキヨスクさんで詳しく載っています。
サイト作っていて、良く思うのが「早くIE6無くなってくれ～」です。ほんと面倒なことが多すぎる。と言うかWEB2.0的な事をしようとすると問題が山のように出てくる・・・・・。作業工数が増える一方。IE6恨みます。
そんなときに、オイラはIE6でもPNG画像をbackgroundで使う時のテクニックがDD_belatedPNG.jsです。
DD_belatedPNGのメリットはなんと言っても軽い・簡単！
DD_belatedPNG以外にもIE6でPNG画像を表示させる方法はあるんだけど、他の方法だと
- 描画処理が遅くメモリも大きく消費するので、複数に使用するとページ表示が遅い・重たくなる。
- ブロック要素の背景画像に使用すると、ブロック内リンクが機能しなくなる。
- 背景にリピート描画（background:repeat）が効かない。
なんでデメリットが・・・・。
だけど、DD_belatedPNGではそんなデメリットも無く、しかも指定が楽（CSSが判る人なら簡単です。）
さてさて、そんなDD_belatedPNGはどうやって使うのかですが、手順は下記にまとめました。
- まずは、DD_belatedPNG制作者のサイトからDD_belatedPNG.jsファイルをダウンロード
※画面をチュルチュル～とスクロールすると、真ん中ぐらいに緑色のダウンロードボタンが現れます。 - 左ボタンクリックではソースが表示されるだけなので、右クリックでリンク先を保存してください。
- ダウンロードしたDD_belatedPNGファイル名を「DD_belatedPNG.js」に変更して、PNG画像を使いたいサイトにアップロード
- PNGを使いたいページのhead部分に下記ソースの追加。
<!--[if IE 6]> <script src="DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('img, .hoge, #hoge'); </script> <![endif]-->
赤文字のDD_belatedPNG.js部分はDD_belatedPNG.jsを置いた場所です。
例えば、jsホルダー内に置くのであれば「js/DD_belatedPNG.js」になります。
Movable Typeで使用する場合は<script src="<$MtBlogUrl$>DD_belatedPNG.js"></script>です。
次に緑文字部分はPNG画像の使い部分を指定します。
サンプルソースでは「img要素全て」と「class="hoge"」「id="hoge"」の要素に対してDD_belatedPNG.jsが動作します。
たった、これだけの作業でIE6でPNG画像が使用できます。
本当は、サンプルで画像載せたかったんだけど、現在制作中のサイトなのであしからず。
気になった方は、一度試してみてください。
コメントする