背景画像
人物画像（元）
人物画像（切り抜き）
Divに背景画像を指定し、人物画像（切り抜き）を配置したもの
Divに背景画像を指定し、人物画像（切り抜き）を配置しclassにiepngfixを指定したもの
IE7以下では透過pngを正しく扱えないため、js、htc等を使用しなければなりません。
ここではiepingfix.htcを使用しています。
htcは絶対パスで読み込まないと正しく動作しないため、WordPressではヘッダファイル（header.php）にスタイル指定しています。
- <style type=”text/css”>
- <!–
- .iepngfix {
- behavior: url(“<?php bloginfo(‘template_url’); ?>/iepngfix.htc”);
- }
- –>
- </style>
CSSファイルで指定しないのは、<?php bloginfo(‘template_url’); ?>を決め打ちしなければならなくなるためです。
なお、こちらで入手できるiepngfix.htcはblank.gifの読み込みに問題が発生するようです。
各人、blank.gif（1px×1pxの透明GIF）を用意してください。
上記対策では、透明GIFをサイト毎に書き換えなければなりません。
これは面倒なので、iepngfix.htcを修正しました。
修正箇所は14行目の
- var blankImg = ‘http://www.isella.com/aod2/images/blank.gif’;
です。これを
- var str = document.URLUnencoded ;
- var blankImg = str.replace(/(.*\/).*/,”$1″) + “blank.gif” ;
とします。
何をやっているかというと、
- iepngfix.htcへのURLを取得してstrに代入。
- strから正規表現とreplace関数を使ってファイル名を取り除き、blank.gifを連結。
strに当該ファイルのURLを入れて・・というところまでは最初から思いついたのですが、
- var str = location.href ;
とやると、うまく動作しません。
これはHTC内のJavaScriptのクセというか方言のようなものなのかしら？
ここで解決方法を見つけました。
当然、iepngfix.htcと同じディレクトリにblank.gifを設置してください。
コメントする