IE6 で透過PNGを表示するスクリプト Unit PNG Fix

2008/07/10 木 カテゴリ: カスタム・検証
RW4.0検証済み
現在、このサイトで使用しているテーマ「Silk v4.0」は透過PNGを使っていますが、IE6でも半透明の効果が表示出来るようになっています。
しかし、日本語の環境のせいか？テーマに手を加えていない状態でもIE6で透過PNGを正しく表示することが出来ていませんでした。

そこで、Unit PNG Fix という、透過PNGをIE6で表示出来るスクリプトを導入してみました。（参考にしたのは coliss さんの所のエントリ）
RapidWeaver で導入する手順は以下の通り。ページごとにスクリプトや画像ファイルを追加する手間を省く作業と思って下さい。（参考ページ：カスタマイズの基本）

まず、Unit PNG Fix のサイトから スクリプトをダウンロードします。フォルダの中にある「unitpngfix.js」を適用したいテーマの Contents フォルダの中へコピーします。
「clear.gif」は同じく Contents フォルダ内にある images フォルダへコピーして下さい。images フォルダがない場合は、新たに作るか、「unitpngfix.js」を開いて、1行目の

var clear="images/clear.gif" //path to clear.gif

の「images」の部分を任意のフォルダ名にして下さい。例えば、Contents フォルダ内に 「image」というフォルダがあれば、それを利用すれば良いと思います。「script」というフォルダを作って、

var clear="script/clear.gif" //path to clear.gif

としても良いと思います。（なんでもOKということです。）

次に、ページごとにスクリプトを手動で追加する手間を省くために Theme.plist を編集します。適用したいテーマの Theme.plist を開いたら、以下のように編集して下さい。（今回は Pref Setter というアプリを使いました。）。

RWCopyFile という項目を開き、その中の任意のアイテムを選択、コピーします。
今回は、一番下の Item 7 をコピーしました。
＊


RWCopyFile の所を選択してペーストをします。
＊


ペーストされました。
＊


今回はそのアイテムを一番下に移動させました。
＊


value の所のファイル名を「unitpngfix.js」に変更します。
＊


作業が終わったらファイルを保存、Theme.plist が正常に働くように RapidWeaver を再起動させて完了です。

これで、IE6でも「Silk 4」の透過PNGが正常に機能したんですが、パンくずリストが消えてしまいました(笑)。多分、ヘッダ部分の Flash と被ったんだと思います。
まぁこのサイトは9割がMacユーザーなのでそのままにしておくことにしました(笑)。（もう一つ言うと、IE6でのブログのレイアウトがおかしいです。どのテーマでもそうですが、ブログプラグインはかなり癖があるようですね。）
ブログパーツ

【このエントリに使ったプラグイン・ツール】

  • ツール：Skitch（多機能画像エディタ）・・・オススメです

タグ: , , ,