以前までこのブログのヘッダー画像は 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

ブログやホームページの作成でヘッダやサイドバー、コンテンツ部分の角を丸くする方法として、ポピュラーなのは角の部分に画像を配置する方法だと思いますが、もっとお手軽に出来るものはないかとググってみたら All About の昔の記事にありました。

「-moz-border-radius」 を一行追加するだけというお手軽さは、ものぐさな管理人には大変魅力的です。　デメリットは Firefox などの Mozilla系ブラウザだけに適用されるので IE系やOpera では角丸にならないところ。

しかし、このブログはそこまで見栄えを気にしているわけではないので当分これでOKです。

他にも JavaScript を使う方法など色々あるようですが、それはいずれ挑戦してみます。