以前までこのブログのヘッダー画像は CSS で以下のように呼び出してました。

div#header {
   background:url(images/head.png) no-repeat;
   padding:30px 20px 150px 20px;
   margin-top:30px;
   text-align:left;
}

実際に使っていた画像が右図。

IE7 や Firefox 、 Opera では違和感なく表示できるのですが、 IE6 ではヘッダー画像の部分があきらかに濃い色で表示されます。

前に殴り書きした記事、 IE6でpng画像が透過出来ない のように GIF にしてしまうという乱暴なやり方もあるのですが、あまりスマートとは言えません。

ポピュラーなのは javascript を使って透過画像を IE6 で使用できるようにする方法ですが、今回は CSS だけで出来るやり方を試してみました。

使った画像は右図のもの。

CSS は IE6 だけに効かせるスターハックで以下のように記述。

* html div#header {
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="http://xxxxx.xxx/wordpress/wp-content/
themes/xxxxxx/images/head.png",sizingMethod="scale");
 background:none;
 width:1000px;
 height:200px;
}

※「xxxxx.xxx」 、「xxxxxx」 はサイトの URL と 「head.png」 があるフォルダ。
階層を間違えないのがキモ。

これは IE の filterプロパティ AlphaImageLoader　というフィルターを使いアルファチャンネルを有効にするという方法です。

CSS が Valid でなくなるなどの欠点もあるようですが、当ブログはそこをこだわっていないのでこの方法で十分。

今回参考にさせていただいたのは下記のサイト様。　ありがとうございます。m(_ _)m

XAMPP に作ったこのブログを、試行錯誤しながらなんとかレンタルサーバーにアップしたのですが、サイドバーのカテゴリなどに表示させてた矢印マークの画像が何故か表示されない。

「XAMPPでは表示されるのに？？？」 な状態になり、少し CSS をイジッてみたけど解決せず。

その後、imagesフォルダ内にある画像をしつこいくらい眺めていて 「ハッ・・・！」 と気付く。

「こんなことで表示されないのか？」 と思いながら問題の箇所を修正。

無事、矢印マークが表示されるようになりました。

今後のこともあるので一応メモ。
sidearrow.Png → sidearrow.png
大文字・小文字の違い、たったこれだけの事。

XAMPP が大雑把ということになるのかな？
どちらにしろ解決したので良しとしよう。