早速、ＣＳＳＮｉｔｅビギナーズで教わったJavaScriptライブラリalphafilter.jsを使ってみました。
＃ 註） ＩＥ６では、透過pngがうまく表示されない。
＊
このブログでは、タイトル画像と、ＲＳＳフィードの画像が、透過pngを使ってます。
なので、ＩＥ６で見ると、なんとも不恰好な状態だったんですね。
まだまだＩＥ６からのアクセスも無視できない量なので、遅ればせながら、対策したいと思います。
WordPressテーマ内で、JSライブラリを使う場合、WordPress本体で用意されているものを呼び出す場合と、各テーマ・ディレクトリ内に置いて呼び出す場合の２通りのやり方があると思います。
prototype.js, jQueryなどを使う場合は、前者。今回は、後者のやり方で配置します。
手順は、至って簡単。
- テーマフォルダ下にjsフォルダを作成し、alphafilter.jsを配置します。
- header.phpにalphafilter.jsを呼び出すscriptタグを記述します。
- 次に画像のclassに
"alphafilter"と指定します。imgタグ指定の画像でも、cssで背景指定した画像でもオッケー。
いじょ。
詳細は、作者の記事を参照ください。
で、ＩＥ６で表示してみたら・・・
↓適用前
↓適用後
おぉ！上々ですね。
コードサンプル載せたかったんですが、とりあえず無しで。ご了承ください。