Movable Type 4 の透過 PNG ロゴを IE6 以下のブラウザで透過する

Movable Type 4 の透過 PNG ロゴを IE6 以下のブラウザで透過する

Posted at August 14,2007 1:55 AM
Tag:[Customize, MovableType, PNG]

デフォルトテンプレートで新しく表示されている Movable Type 4 のロゴは透過PNGのため、IE6以下のブラウザでは透過されず、2色で表示されてしまいます(下)。

Movable Type 4 ロゴ

ここでは pngfix.js を利用して透過する方法を紹介します。

他にも透過PNGライブラリは色々出回ってます。

1.スクリプトのダウンロード・アップロード

PNG in Windows IE: How To Use の中間辺りにある pngfix.js のリンクをクリックして、pngfix.js をダウンロード。
ダウンロードした pngfix.js をサーバのブログ・ディレクトリ(index.html があるディレクトリ)にアップロード。

2.テンプレート修正

ブログ管理ページより「デザイン」→「テンプレートモジュール」→「ヘッダ」を選択し、head 終了タグの直前に下記を追加。
MT3以前のテンプレート構成を利用している場合(で新しいロゴを使っている場合)は、各テンプレートの head 終了タグの前に下記を追加。

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="<$MTBlogURL$>pngfix.js"></script>
<![endif]-->

これで再構築をすれば下記のように透過されます。この設定は他の透過PNGにも有効です。

Movable Type 4 ロゴ(修正後)

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

フクロウを飼い始めました/IEのmarginのバグと、サポートしてない透過pngに苦労した話。 from ただてとてとと歩きだす
フクロウを飼い始めた。といっても現実の世界で、ではなくBlogで。大宮ぺいとりおっつ日報さんのところで紹介されていたページで見つけたRSSアイコン(フクロ... [続きを読む]

Tracked on August 27, 2007 3:34 AM
コメント

このカスタマイズと
BlogPeople 等のリンクリストによる表示の遅延を解消する(その2:Ajax編)
を同時に行うと、PNG透過できないようなのですが、同時に使用することはできないのでしょうか?

もし、方法がありましたら教えていただきたいと思います。

[1] Posted by 虎! : September 4, 2007 10:26 PM

>虎!さん
こんばんは。
事後報告ですが、「prototype.js と pngfix.js の競合を解消する」に回答を記しました。

[2] Posted by yujiro : September 14, 2007 1:18 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)