またスタイルシート ネタですみません

本々、ワタクシが【 みんカラ 】を始めたのは、コメント用と車両記録のためだったので、このブログでは車ネタしかしないつもりでしたが、他の方々のブログを見ていると、動画や写真を貼り付けた為にレイアウトが崩れたり、スタイルシートを弄ったために反って見辛くなっているブログを見かける事もあるので、懲りずにまたＨＴＭＬネタで前々回，前回の続きをします。（笑）

いつも私のブログに足跡を残してくれる人はＳ２０００乗りか、走り系の方が多いのですが（みんカラ登録をしてない人は何の話か分からないと思いますが）、 前々回のブログで、ＨＴＭＬネタをしたところ、ご自身のブログをカスタマイズしていて、スタイルシートで苦労している方々の足跡があったので、ちょっと難しい話になりますが今回は｢背景の透かし｣テクニックについてお話しようと思います。

前回も半透明表示させるプロパティーについて少し書きましたが、まずは下の映像を御覧下さい。
これは画像編集したのもでなくスタイルシートでデザインしています。

上の例のように背景を透かす方法は、Ａｌｐｈａフィルタなどで透明度指定する方法とＰＮＧ画像や透過ＧＩＦ画像を背景に用いる方法があります。
Ａｌｐｈａフィルタなどで透明度指定する方法は前回紹介しましたので、ここでは省略します。

左下の画像は、｢Internet Explorer バージョン６｣がインストールされた私のＰＣで、【 みんカラ 】ブログのスタイルカスタマイズで『いぬ』をスタイル選択した場合の画面映像です。（クリックで拡大表示します。）

前々回のブログでも書きましたが、本来このスタイルを｢Internet Explorer ７｣以上や「Firefox」，「Safari」などのモダンブラウザで見ると、ページ全体のバックにある犬の背景画像が透けて、ページをスクロールしても一定位置に固定されて見える筈ですが、 ｢Internet Explorer ６｣以下でみると、古いバージョンの｢Internet Explorer｣では、透明度を指定したＰＮＧ画像をサポートしていないため、スターハックという手法で黒く塗りつぶされた背景に置き換えて表示するようにスタイルシートでデザイン指定されています。 また、背景にある犬の画像もモダンブラウザで見た場合と大きさが違うもの（右の②番の画像）が表示されるようにもなっていて、スクロールすると犬の背景画像は固定されずにスクロールと連動します。
②番の映像は仮に、このスターハックを用いずに本来のＰＮＧ画像を｢Internet Explorer ６｣で表示させた場合の映像です。透明度を指定したＰＮＧ画像部分が鼠色に塗りつぶされて見えるのがお分かりですよね？
これでは変なので、このような手法をとったと思われます。
因みに『いぬ』のプロフィールページ右カラム領域のスタイルシートを見ると下記のようになっています。
前に、｢ブラウザには其々、バグと対応していないセレクタやＨＴＭＬ要素がある｣と言いましたが、この特性を逆に利用して其々のブラウザに合わせてスタイルシートを適応させるのが｢ＣＳＳハック｣と呼ばれる裏技的手法です。
セレクタの冒頭に *html を付けると｢Internet Explorer ６以下｣のブラウザ以外は認識しないという特性を利用した｢スターハック｣というＣＳＳハックで、普通のブラウザでは背景に｢bg．png｣というＰＮＧ画像を表示させ、旧いバージョンの｢Internet Explorer｣では黒色（#000）の背景色を表示させるように指定しています。

では、我々【 みんカラ 】ユーザーもこの方法でカスタマイズすれば良いのかと言えば、そうは問屋が卸してくれません。（涙）
新スタイルシート方式になってからは、ユーザー側からは、セレクター側のスタイルシートを変更できなくなっているからです。

然しながら、｢Internet Explorer ６｣ユーザーで、このページの上に挙げた例を見て、？と思った方は鋭い！
｢Internet Explorer ６｣ユーザーの方もＰＮＧ画像の背景が透けて見えてる筈です？
前回のブログでＷｉｎｄｏｗｓ版｢Internet Explorer｣には独自のスタイルシート（プロパティー）があると紹介しましたが、その中にフィルタの一種でＰＮＧの透明度をサポートするAlphaImageLoaderという拡張フィルターがあります。これを使えば｢Internet Explorer ６｣でも｢Firefox｣や｢Safari｣といったブラウザと同等の表示を得る事ができます。 上に挙げた例でもこの方法を使っているので、｢Internet Explorer ６｣ユーザーの方もＰＮＧ画像の背景が透けて見えていると思います。
但し、【 みんカラ 】では、ブログ記事内でスタイル設定したものに関しては、今のところこのfilterプロパティーの使用はできるようですが、カスタムスタイルシートでページのスタイルを設定する事はできません。（涙）

｢Internet Explorer ６｣以下のユーザーは、ブラウザシェアを見ると年々下がっているとはいえ、まだ無視できる程の数値にはなっていません。
透明度を指定したＰＮＧ画像は｢Internet Explorer ６｣以下で見た場合、透明度などによって、黒色や鼠色，水色に近い色で表示されることもあるので、ページ全体の色バランスが崩れない範囲であれば使っても悪くないと思います。
テキストエリヤの背景を透かすデザインは、テレビのニュース番組などでもよく用いられるデザイン手法ですが、バックの映像がメインのテレビと違い、ブログは本文が主役なのでバックの背景画像が煩いと読み難くなってしまうので、背景を透かす場合は見る側の事を考えて背景画像の彩度を落とすなどしてデザインしましょうという話でした。