ホームページ作成SEOマニアックス

IE6以前のブラウザでpng透過画像を使用する方法です。iepngfix.js と言うJavaScriptを使用して、IE6以前のブラウザで透過PNGを対応させる手順になります。

サイトのデザインをしていると、どうしても透過画像なんて物を使いたくなりませんか?

透過画像と言うと、GIFやPNGなんて物があるのですが、

GIF画像はどんなブラウザでも対応しているけど、影とかがギザギザで汚くてちょっとカッコ悪いですよね…

対するPNGはとてもきれいなのだけど、Win版のIE6(インターネットエクスプローラー6)以前ではまともに表示してくれない。。。
つうか、Win版のIEがPNGに対応してなかったりするので困りもの…

とは言え日本国内でIEのシェアは7割程あるので、
IEなんて嫌いだ!と言ってIEに合わせない訳にはいかないというジレンマ。。。
IE7でやっと対応したが、それでもIE6以前のユーザーはまだまだ多い。

ずっと諦めていたのだが、このサイトを作るにあたりなんとなく調べてみたら…

世の中には頭の良い方がいるもので、IEに合わせてJavaScriptを作ってくださった方がいるのだ。
ありがたい物です。(-人-)

ってな訳で、そんなスクリプトの紹介。

folda-r.gif
 
左がGIFの透過画像。

このGIF画像はこのサイトのTOPに使用していたんだけど、

輪郭も中もギザギザでちょっとカッコ悪いですよねf^^;

Win版のIE6だけは仕方なしに

当初はこの画像をスタイルシートで分けて使用していました。

目立たせないような方法も有りますが、ちょっと使い辛いですよね~


folda-r.png

こちらは透過PNG画像。

Windows版のIE6以前で見ると透過部分が透過できずに変な影がついてしまいます。

他のブラウザではきれいに表示されているはずです。

IE6、しかもWin版だけがダメだと言うこの現象、泣きたくなりますな(汗)

前置きが長くなりましたが、ここで登場するのがiepngfix.js

作ったのは多分”韓流”プログラマのユンサン かな?

使い方は、iepngfix.js←を開いてソースをコピーし、ファイル名をiepngfix.jsとします。

こいつをサーバーにアップして、ページのメタタグに

<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="スクリプトのパス/iepngfix.js"></script>

を、head間に記入します。そして、

behavior: expression(IEPNGFIX.fix(this));

を、画像を配置したスタイルシートの末尾に記入します。

画像の配置タグsrcの末尾に、style="behavior: expression(IEPNGFIX.fix(this));" としてもOKです。

<img alt="folda-r.png" src="folda-r.png" width="283" height="208" style="behavior: expression(IEPNGFIX.fix(this));" />

こんな感じです。

folda-r.png

すると、こんな感じでIE6でも透過PNGがちゃんと使用できるようになります。

この記事では丁度上の画像の背景が切れてしまっていて分かりにくいですが、透過の確認をしたい方はTOPページで確認してみてください。

透過PNGが使用できると、デザインの幅もかなり出てくると思いますYO

Advertisement
サイトを売ってくれとフリーメールアドレスで問い合わせてくる変な会社「サイト売買」。あなたの大切なサイトを変な輩が狙っている!
インラインフレームとサブドメインの日本語JPドメインを使い、他人のサイトを自分のサイトのように表示させている悪意のあるユーザー対処。「のリンク.jp/」と言うドメインを使いやりたい放題で、その上ウイルスもばら撒く不届き物なので注意!
Gumblarウイルス被害に遭わないためにも自分のマシンのセキュリティーはしっかりしておきましょう。と言うわけでGumblar対策です。
Firefoxのバージョン3.xを終了して再びFirefoxを起動すると、Firefox は起動していますが応答しません。新しいウインドウを開くにはまず既存の Firefox プロセスを終了させるか、コンピュータを再起動しなければなりません。のメッセージが出る現象の回避手順。
サイトの乗っ取りを防止する方法。.htaccessでのスパムサイト制御

<<<前の記事へ | 次の記事へ>>> このページのトップへ


■複数キーワードで検索する時は半角スペースで区切ってください
My Yahoo!に追加
ロリポップサーバーでのMT公開日時指定投稿(cron)設定
サイト売買...(苦笑)
自サイトが悪意のある他サイトにインラインフレーム表示される
Gumblar対策
MTOS 5.0 アップグレード後、携帯サイトが文字化け
MTOS 5.0 アップグレード手順 SQLite
Firefox プロセス終了できない現象
不正なサイト乗っ取りの防止策
MT ファイルアップロード制限変更手順
Apacheサーバーでのindex Of 表示回避手順
SWFなどの埋め込みコンテンツがIE6でエラーダイアログが出る現象
MT4.261アップグレード手順
ロリポップサーバ、ディスク容量増加!
さくらインターネット .htmlをPHPとして動かす
MTOS 4.x インストール手順
MT 4.x ダウンロード 転送 パーミッション変更 SQLiteデータベース作成
さくらサーバーでの Index of 表示をさせない手順
phpのバージョン確認方法
Apache2.2 最新バージョン
PHP インクルード 文字化けする現象
コアサーバーでのcronの設定 MT4.x 日時指定で予約投稿編
サクラエディター 入力改行コードの指定 (LF)
ハッスルサーバーで Service Temporarily Unavailable が頻繁に出る
チカッパphp5バージョンアップ後のphp includeエラー対処
さくらサーバーで.htmlをphpとして動かす
FLVファイルの埋め込みでのIEスクリプトエラー対処
ロリポップサーバーでphp5バージョンアップ時のincludeエラー対処
ハッスルサーバーでMT4.2 PHP化注意事項
格安レンタルサーバーの比較
Google独自ブランドのブラウザGoogle Chrome登場!
Windows MediaPlayer11 でHTML埋め込みwmvが視聴出来ない現象
FLV動画の埋め込み手順
Safariでのcssレイアウトずれ対処
Firefox3 公開!IE7より9.3倍早い!!!
自宅サーバーでの検索エンジン対策
相互リンクと被リンク
metaタグを知ろう!
go-pear.phpが実行できない場合
SEOを考慮したサイトの引越し(301リダイレクト)
IE7でのレイアウトずれ対処
バックリンク(被リンク)について
Thumbs.db ファイルをFTPに残さない(作らない)
自宅サーバ でのwmv埋め込み+Firefox・Mozilla(Apache)
サイト整理=リンク切れのチェック
FireFox Add-ons Edit CSS
Flash(.swf)の埋め込み-IE・Mozilla系共有
wmvファイル埋め込み(Java Script 編)
wmv動画の埋め込み(IE・Mozilla系共用)
IEでのレイアウトずれ対処(css)
IE6以前でpng透過画像を使用する
フレームセットの利点と欠点
htmlファイル整理|ディレクトリ毎のファイル整理
検索エンジンを意識したサイトを作る
ホームページのタイトルと内容
MT作成サイトのPHP化手順
さくらサーバーでのPHPサイト構築
PEARのインストール(さくらサーバー編)
サクラエディターの使い方
サクラエディターのインストール

サイトマップ