メニューカテゴリごとに、ヘッダー画像なり見出しのスタイルなりを変えるのは、特に企業Webサイトを運用する際にはおそらく必須の仕様となる。
通常、僕はこういう際にはBODYタグなどにそのカテゴリのIDを出力して、CSSで
body#category { background : url(....jpg) }
などとして指定している。
WordPressをCMSとして運用する際は、
><?php $cat = get_the_category(); $cat = $cat[0];{echo $cat->category_nicename;} ?>
と記述すると、カテゴリースラッグ（カテゴリURL用の別名）が出力できるので、これを利用して
body id=”company”
などとすることができる。
それにしても、カテゴリースラッグの変数って「nice name」なんですね。ナイスネーム…。ナイススティックを連想させます。（高校の頃よく食べてました）
以前、IE6で透過pngを扱うことのできるJavaScriptライブラリを紹介した。（システム修行ブログ» ブログアーカイブ » IE6用透過pngデザイン）
が、実はメニュー部分でこれを使ったとき、Aタグのhover属性には有効にならないことが判明した。
試行錯誤の結果、こちらのサイトを参考に（CSSでブログデザイン IE6で透過PNGをロールオーバー）、JavaScriptではなく、CSSハックとの合わせ技で、IE6のときだけDirextX機能、アルファイメージローダーで画像を貼り付けるという手法で解決。
IE6透過pngテスト2
素晴らしい。『CSSでブログデザイン』様、ありがとうございます。
マークアップエンジニア/CSSコーダーにとって、透過pngは鬼門である。
しかしクリエイティブ氏からこういうデザインを実現したい、という要望を受けた。
こういう場合、通常なら透過した部分をそのまま画像として切り出すのだけど、今回は背景画像が動的に切り替わるとのことで、メニュー部分を半透明にする必要がある。
そこで今まで試していなかったIE6用のJavaScriptライブラリを試してみることにする。
IEで透過PNG画像の透過処理を簡単に行うJavaScriptライブラリ「alphafilter.js」:phpspot開発日誌
しかし、透過pngはIE6がなぜか対応していないので問題になる。現状のシェアでは、まだIE6を無視するわけにはいかない。
そこでkづあんのJavaScriptライブラリ「alphafilter.js」を導入してみると…。
IE6透過pngテスト
うまくいきました。
方法も、JavaScriptを読み出したら
画像のclass名にalphafilterを指定
<img src="./sample.png" class="alphafilter" alt="" />背景の透過ＰＮＧの場合は次のように行います。
<p class="alphafilter">内容</p>（IEで透過PNG画像の透過処理を簡単に行うJavaScriptライブラリ「alphafilter.js」:phpspot開発日誌）
と、とてもシンプル。これは素晴らしい。
僕もいつかはこういう、人の役に立つ素晴らしい何かを作れたら、と思いつつ今日も勉強勉強である。
