はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

透過 PNG を IE6 でも奇麗に表示するクリスマス☆

2007/12/05 Wed [Edit]

先日、ドロップシャドウの処理をした透過の PNG 画像を使い、自分が全然モテない現実を忘れつつクリスマス・バナーブログのデコレーションを楽しんでいました。

「これで良し♪」なんてモニターに向かってつぶやき、自己満足に浸りながら IE6 で確認してみると透過部分が灰色になっているではないですか・・・(涙)

気が狂ったような大慌てぶりで IE7 でも確認してみると、そちらでは奇麗に表示されている。他のモダンブラウザもキレイ☆に表示。

なんとか落ち着きと人間らしさを取り戻し、毎度の通りネット検索してみると IE6 ではアルファチャンネルについてはデフォルトでは非対応とのこと。つまり、半透明とか言われても IE6 にしてみれば「え!?けっきょく何色!」と言った感じらしい。

知ってか知らずか普段 JPG か GIF 画像しか使ってこなかった私。IE6 には泣かされっぱなしの私。仕方ないので、透過 GIF でドロップシャドウ無し(半透明な部分の無いドット絵)の画像を IE6 の為に用意し、CSS ハックで振り分けそれぞれを表示させる。

どうにか様になったようなので一安心。

しかし何か腑に落ちない。
どこかで誰かが呼んでるような気がする・・・

ブログの最上部に透過 PNG のクリスマス・バナーを表示させたいと思いついたのは、人様のブログで透過 PNG とスクリプトを使用したアップデート・バナーを拝見しての事。きっと私の知らない何かがあるような気がし、検索ワードを変えて再検索。

ここ迄読みガッカリ気味のあなた、上記した非対応の前にあるデフォルトではに注目してください。

そうです!ちゃ~んと内緒のやり方がありました♪

前置きが少し長くなりましたが「透過 PNG を IE6 でも奇麗に表示」する方法をご紹介。

それでは IE6 で透過 PNG を表示させる方法の解説です。IE6 で透過 PNG を奇麗に表示する為には AlphaImageLoader を使います。と言っても特別何か面倒くさいことをする必要はありませんのでご安心ください。

では、どのようにして AlphaImageLoader を使うのか、一緒に順を追って理解していきましょう。

まず AlphaImageLoader とは何でしょうか?

答えは Windows IE4.0 以上のビルトイン機能(IE 独自の機能拡張)である Filter(フィルター)の1つです。
フィルターについて少しだけ補足させて頂くと、IE 4.0 以上のブラウザで表示されるフィルターと、DirectX が必要で IE 5.5以上のブラウザで表示されるフィルターとがあり、どちらも Windows 版の IE でのみ動作するビルトイン機能です。

それでは Filter(フィルター)はどのように使うのでしょうか?

答えはとても簡単で CSS に記述します。

細かい解説はさておき、今回の私の解決ソースコードをご覧ください。


#xmas-bn {
	width : 120px;/* 画像の横幅 */
	height : 120px;/* 画像の縦幅 */
	text-indent : -9999px;/* テキストを非表示 */
	display : block;/* ブロックレベル */
	z-index : 99;/* 要素を前面へ */
	position : absolute;/* 位置の指定 */
	top : 0;/* 上から0 */
	right : 0;/* 右から0 */
	background-repeat : no-repeat;/* 背景は繰り返さない */
}

html > body #xmas-bn {/* IE7 と Modern Browsers だけに適用 */
	background-image : url("画像へのパス/xmas.png");
}

*html #xmas-bn {/* IE6 だけに適用 */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='画像へのパス/xmas.png' , sizingMethod='scale');
}

余分なソースも多分にあるので、透過 PNG を使う場所に合わせ適宜で変更が必要です。い部分が今回の重要な部分です。

簡単に CSS の説明をすると、ID セレクタの背景に透過 PNG 画像を表示させています。IE6 以外のブラウザには通常通り background-image プロパティを適用し、IE6 には CSS ハックを使い AlphaImageLoader フィルターを適用させています。

※上の方法だと IE6 には背景に透過 PNG を指定できません。もしも背景で透過 PNG を使用されたい方は「透過 PNG を IE6 で背景としても使える JavaScript」をご覧ください。

filter から AlphaImageLoader の左側迄のいソース部分は、IE 5.5以上のブラウザで表示されるフィルターを使用する時の基本書式です。
つまり今回使用したフィルター AlphaImageLoaderIE 5.5以上のブラウザで表示されるフィルターと言うことになり、DirectX がインストールされていないような古い Windows の IE では表示されないフィルターです。

また、AlphaImageLoader の後ろ(右側)にはプロパティと値が必要になります。src プロパティには画像へのパスが入り、sizingMethod プロパティには画像の貼付け方である cropimagescale のどれかが指定値として入ります。以下、指定値の説明になります。

crop
画像をそのまま貼り付ける指定
image
画像を要素の width の値、height の値に関係なく要素を画像の大きさに合わせて貼り付ける指定。(デフォルト値)
scale
画像を要素の大きさに合わせて拡大縮小して貼り付ける指定

今回、sizingMethod プロパティの値に scale を指定しているのは、要素の width と height に大きさを合わせる為です。

以上で「透過 PNG を IE6 でも奇麗に表示」する方法の解説は終わりです。

もしも、実際に試してみたいなんて方は下の透過の PNG 画像と上のソースをご自由にお使い挑戦してみてください。

Merry X'mas
画像は右クリックなどでダウンロードしてお使いください。

Prev
タグクラウドの行間が狭い人
Top
はじめてのブログデザイン
Next
フリーランスのWEBデザイナーになる前に目を通しておきなサイ

Comments

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。