背景画像

人物画像（元）

人物画像（切り抜き）

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を設置してください。