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

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

スポンサーサイト

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

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

透過 PNG を IE6 で背景としても使える JavaScript

2007/12/29 Sat [Edit]

先日の記事「透過 PNG を IE6 でも奇麗に表示するクリスマス☆」では AlphaImageLoader と言う Filter(フィルター)を使い、透過 PNG を IE6 でも奇麗に表示させていました。

しかし、私は少し勘違いをしていたのですが、先日の方法だと透過 PNG を背景( background )に指定できないのです。

「じゃあ、どうすんの?」

はい。その答えは JavaScript が握っていました。

「えぇ~?でも、なるべくなら CSS で解決したい問題なんだけど。」

そうですね。私も同意見ですが、おそらく今回ご紹介する解決策が現在(2007年の暮れ)主流のようです。

それでは、一人芝居を気持ち悪がられる前に、そろそろ「透過 PNG を IE6 で背景としても使える JavaScript」をメモしておきます。

まずは今回の JavaScript の作者であるユンサンさんのブログから「iepngfix.js」をダウンロード。
※右クリックでリンク先のソースコードを保存すると言う意味です。

次にそれを任意のサーバーにアップロードし、HTML の <head> ~ </head> 内で読込みます。

<script type="text/javascript" charset="EUC-JP" src="iepngfix.js"></script>

※上のソースのい部分はアップロードした iepngfix.js のパスになります。

最後に、CSS 内で背景( background )に透過の PNG を指定したい ID や CLASS セレクタなどに以下のソースを追加するのですが、IE6 だけに適用させる為、今回はスターハック( *html )を用いて IE6 にだけ適用させます。

*html div#hajime { behavior: expression(IEPNGFIX.fix(this)); }

※上のソースの div#hajime は背景に透過の PNG を指定したいセレクタ名なので適宜に変更してください。

以上で透過 PNG を IE6 でも背景として使用できます。

補足
behavior(ビヘイビア)とは IE5 からサポートされた、指定した要素に対し外部スクリプトを適用させる機能。
expression() は CSS 内で JavaScript を使用して動的にスタイルを指定できる IE の拡張機能。

おそらくですが「IE6 にかんぱ~い♪チン」なんて一生無いと思います。

Prev
当ブログのテンプレートをカスタマイズ!背景画像の変更
Top
はじめてのブログデザイン
Next
美しい明朝体に恋をしました。

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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。