IE6とpng画像

先日テンプレートを変えました。
今回は紅葉を背景にワンポイントで持ってきたので、記事やサイドカラムの背景色を半透明にし、背景が透き通って見えるようにしてみました。

09102501_moto.gifそのときに「メールはこちら」のメールアイコンがjpeg画像で回りに白色がくっついて、こんなふうに←半透明部分に来た時にちょっと変だったことが気になりました。

そこで、メールアイコンをpng画像で作って、それをアップロードすれば透明に見えるはず……

なんですが、ここでややこしい(?)問題がひとつ…。
インターネットエクスプローラー6.0以下のバージョンで見ると……
透明に見えるはずが、画像の回りにグレーの色がついていて……
全く透明に見えないんですよね……(T.T)

10月中のアクセスのブラウザを見てみますと、約1割がIE6.0でした。

まだまだIE6.0を使っておられる方も多い様子。
できるだけ、どのブラウザで見ていただいてもきちんと表示されるようにしたいと思います。


α そのまま
←この画像、皆さんにはどのように見えているでしょうか?
IE7.0以上のブラウザ以外でご覧になっていただいている場合はきちんとどちらも白色の背景に赤色のスタンプに見えていると思います。

09102502.jpgところが、IE6.0以下で見ると、このように左は普通に白地に赤色スタンプ、右はグレー地に見えているはずなんです。

左側は細工してあります。
右側はそのまま貼り付けただけです。

IE6.0以下でも透明に見せる方法は検索をかけて調べてみるとたくさん出てきます。
私はここでアップする画像に透明png画像を使うだけなので、ややこしいのは必要ありません。
私でも簡単にできるようなものを探してみました。

to-R様「アルファ画像を扱うalphafilter.jsライブラリ」で公開されているalphafilter.jsを使うと簡単に解決できました。

上記にも使い方が説明されていて、その通りにやるとできますが、FC2ブログでの使い方を補足しておきます。

09102504.gif←こちらの「アルファ画像を扱うalphafilter.jsライブラリ」の記事中の「alphafilter.js」を右クリックして名前をつけて保存します。

FC2ブログ管理画面・ファイルアップロードで「alphafilter.js」をアップします。

テンプレートの編集画面を開き、「html編集」のhead内に次の記述をします。

<script type="text/javascript" defer="defer" src="http://blog-imgs-xx.fc2.com/x/y/z/abcde/alphafilter.js"></script>

↑赤字部分はalphafilter.jsをアップロードしたURLです。
アップロードした時に「ファイルをアップロードしました : http://blog-imgs-xx.fc2.com/・・・・・alphafilter.js」と表示されますし、またはアップロード一覧表のサムネイル部分(jsの場合は「表示」と書かれています)をクリックするとブラウザのアドレスバーにアップロード先のURLが表示されるのでそれをコピーしておきましょう。

使う時は透明png画像をアップロードして、いつも通り記事に挿入します。
そして画像に「class="alphafilter"」をつけてやるだけです。

<a href="http://blog-imgs-xx.fc2.com/x/y/z/abcde/09102501.png" class="alphafilter" target="_blank"><img src="http://blog-imgs-xx.fc2.com/x/y/z/abcde/09102501.png" class="alphafilter" alt="09102501.png" border="0" width="150" height="136" /></a>


ただし……
FC2のファイルアップロードでアップしたときに自動的に縮小させてできるサムネイルだと、回りが透明にならず真っ黒になるようですので、記事内で小さめのサムネイル画像を使い、クリックして元画像を表示させる場合はあらためてサムネイルの大きさの透明png画像をアップロードする必要がありそうです。


さて、一番の問題、メールアイコン画像をIE6.0でも透明に見せるようにしたいがためにやってみたのですが、head部分に上記jsを書き込めばブログ全体に反映されるのかと思っていたのに、プラグイン(サイドカラム)ではIE6.0では反映されていませんでした。
(上から3つめの画像のメールアイコンは「class="alphafilter"」を記述していますが、透明になっていません。)

そこで、プラグインの設定画面(ここではメールアイコンを使っているプラグイン設定画面)内でhead内に記述したものと同じ

<script type="text/javascript" defer="defer" src="http://blog-imgs-xx.fc2.com/x/y/z/abcde/alphafilter.js"></script>

09102505.gif
を書き込んでやると、この通り、IE6.0でも透明で表示されるようになりました。

関連記事

コメントの投稿

**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ