DesignWalker RSS フィード

透過PNGをIE6以下のバージョンで綺麗に表示する方法

IE7では、やっとこさ標準でサポートされた、透過PNGですが、まだまだIE6以下のバージョンを使ってるユーザーが多いっちゅうわけで、透過PNGを使わないデザイナーさんが多いようですが。。。

透過GIFだと、角を丸くしたりすると曲線がギザギザに表示されて、非常に汚くなってしまいます。。

これまでは。。。↓こんな感じになってしまってました。。

sample_logo.gif

上の↑のサンプルは背景を黒にして、透過GIFを貼り付けた例ですわ。汚いですねぇ。。。

っちゅうことで。。↓こんな感じにしてみました。。

sample_logo.png

上の↑のサンプルは背景を黒にして、透過PNGを貼り付けた例ですわ。
普通に透過PNGを貼り付けただけだと、IE6以下のバージョンでは、うまく表示されないようなので。。。

この↓JavaScriptを使いますねん。(右クリックで保存してくだされ)

透過PNGをIE6以下のバージョンで綺麗に表示するJavaScript

んでもって、ダウンロードしたpngfix.jsファイルをアップロードして、htmlの<head>から</head>の間に以下のコードをコピペ。

透過PNGだと、アルファの部分も綺麗に表示されるので、デザインの幅もかなり広がりそうですねぇ~。
早速使おっと。

更新情報:
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる
エントリーを追加しました。あわせてお試しください~!(12 27, 2006)
デザインblogランキングデザインblogランキング

デザインblogランキング

コメント No Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



No Responses to “透過PNGをIE6以下のバージョンで綺麗に表示する方法”

  1. wimblog Says:

    透過PNGをwebサイトに組み込む

    以前書いた透過PNGの記事にトラックバッ…

  2. SITE159 Says:

    透過PNGをIE6以下のバージョンで綺麗に表示する方法 – デザインウォーカー | DesignWalker – ロサンゼルスで働くウェブデザイナーの日記

    透過PNGをIE6以下のバージョンで綺麗に表示する方法 – デザインウォーカー …

  3. GB Says:

    winIEで透過pngを使う方法(メモ)

    今ブログのデザイン作成中なんですが、どうしても透過pngを使いたくて、 winI…

  4. フィヨルド Says:

    ありがとうございます。
    いろいろ試行錯誤の上、無事IE6での動作を確認しました。

    いやいや、すごいですね。確かに、スクリプトのソースを呼んでみれば、ブラウザのバージョンを取得したり、条件分岐で処理したりと、らしきことをやっております。

    ありがとうございます!!

  5. 管理人 Says:

    フィヨルドさん
    わざわざコメントいただきまして、どうもありがとうございます~。
    こっちの記事では、CSSで透過PNGを綺麗に表示する方法をご紹介しておりますので、ご参考にどうぞ~。

  6. maki Says:

    重宝させてもらえそうです!
    が・・・、IE7をいったん導入してしまうと、IE6以下で確かめようがないのですが、なにかしら方法はございますでしょうか?

  7. 管理人 Says:

    makiさん
    コメントどうもありがとうございます~。
    IE(インターネット・エクスプローラー)前のバージョンを同時に起動させてみる。」っちゅう記事を書いてみました。ご参考にどうぞ~。

  8. maki Says:

    記事ありがとうございました。
    早速いくつかのバージョンで確認してみました。
    が、残念ながらPNGは綺麗に表示できてませんでした。。。
    なんででしょう? とりあえず試行錯誤してみます。

  9. 管理人 Says:

    makiさん
    ご連絡どうもです。
    確かに・・・IE5.5以下のバージョンでは、このスクリプトは、うまく動作しないようです。。。「透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる」←こちらのスクリプトでは、うまく動作してるのですが・・・

  10. こっから Says:

    IE6で透過PNGを使う

    IE6では、透過PNGが透過になりません。
    GIFにするには、手間もかかるし、ギザギザ感が出てしまいます。
    仕事で、どうしても対応が必要…。

  11. 健忘録 Says:

    ライブラリ依存のなしで、IE6で透明PNGを表示させる

    ここにかなり使えるライブラリを発見。
    すごいなぁ。やっぱりデザインの良いサイトはやっている人がすごいんだよなぁ、とか偏見めいたこと思いつつさっそく利用…

  12. Pyon's Diary Says:

    IE6 で透過 PNG を綺麗に出力する。

    IE6 で透過 PNG を表示する方法の中で一番使ひ易いかも知れ無い。

  13. 超暫定版!エム・アールデザイン ブログ Says:

    透過PNGのIE6対策にはこのJava Script…

    です。

    透過PNGはIE7で正式対応したものの、まだまだユーザーの多いIE6。
    そんなIE6ですが、2/13以降にはWindows XPの自動アップデイトでIE7へのアップグレードをするようになるらしいですがそれでも当分はIE……

  14. sarutaros Says:

    ありがとうございました。
    透過できました!!

  15. 貧弱デスマッチと雑言集 | Blog Says:

    スクロールで楽しもう!!…

    今回紹介させていただくWEBサイトはThe portfolio of Bryan Katzel。

    非常に遊び心が満載ですね。これどうなってるのかな?…

  16. mumu Says:

    はじめまして。いつも参考にさせていただいてます。

    こういう方法を探してました。
    とても便利で簡単に使えそうなものをありがとうございます!
    が、どうもscriptのリンクがおかしなことになってるようで、
    DLできませんでしたTT
    お忙しいところすみませんが、修正していただけたらと思います。

  17. 百蔵。β » Blog Archive » 古いIE向け透過PNG対策を入れました。 Says:

    [...] 透過PNGをIE6以下のバージョンで綺麗に表示する方法 [...]

  18. rierie Says:

    こちらのページを、IE6で見させていただきましたが、どうしても背景(大枠の黒ではなく、PNGの土台の色)がグレーに見えます。
    社内でIE6ユーザーの数名にも試してもらいましたが同じです。何が原因なのでしょうか。FIREFOXではちゃんと見えます。

  19. ToMo Says:

    JavaScriptがダウンロードできません!
    Not Foundになってしまうのですが…

  20. 透過pngをIEで使う!cssもいぢる | Chibiの覚え書き Says:

    [...] スクリプト必須ですが、これ、次から使おー。 DesignWalker:透過PNGをIE6以下のバージョンで綺麗に表示する方法 imgタグでアルファつこたpngもきれいに表示出来ちゃう。 [...]

  21. 大阪の会社設立屋 Says:

    こういう面白い機能があったとは!!!遅ればせながらつい最近知りました!!!ありがとうございます!
    ちょっと勉強して使いたいなあと思います!!!

  22. 日記 » IE6との戦いは続く Says:

    [...] http://www.designwalker.com/2006/12/transparent-png.html これはpngfixで調べたのですがNOT FOUNDでした… [...]

この記事に対するコメントを残す




この記事のトラックバックURL


広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

ご質問ポスト

ご意見、ご感想などなど、管理人にお問い合わせはこちらのメール送信フォームからどうぞ~。

最近の記事

DesignWalkerのタネ

タグ・クラウド

月別アーカイブ