アフィリエイトは儲かんないってば

AlphaImageLoaderを利用して透過pngを使おうとしていたところ、わけがわからなくなりハマっていました。

が、色々試行錯誤したところ、めでたくハマリから脱出する事ができました。

CSSでAlphaImageLoaderを利用して透過pngをIE6でも見れるようにするための方法を、自分でも忘れそうなので注意すべき点を中心にまとめておきます。

私は画像を作る際、ホームページビルダーのオマケソフト「ウェブアートデザイナー」で作る事が多いです。
作った画像をダブルクリックして透明度を設定し、「ウェブ用保存ウィザード」でファイルタイプをpngに選択して保存すると、透過pngが出来上がります。

出来た透過pngをアップロードして、CSSで背景画像に設定すると、Firefoxでは綺麗に表示されます。

しかし！
IE6では透明領域が水色に塗りつぶされ、透過もしていない形で透過pngが表示されてしまいます。

ＴＨＥ・台無しです。

そういうわけで、透過pngを使用するための記事を以前書いたわけです。

・透過pngについての解説


例えば、透過pngを使いたい要素「div.article-header」があるとします。

div.article-header {
background: url(透過pngのURL) no-repeat;
}

CSSにこういう感じ↑で書けば、背景画像が設定できます。
でもこれだけではIE6で透過pngが表示されません。
IE6でも透過pngが表示されるように、AlphaImageLoaderを利用するには、アスタリスクハックを用いて、IEにだけ有効な命令文を追加します。

div.article-header {
background: url(透過pngのURL) no-repeat;
}

*html div.article-header {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='透過pngのURL', sizingMethod='scale');
}

と、いう風な解説を透過pngについての解説ではやってました。

ところがこれをいざ実行してみると、いろいろな不具合が生じてきました。
実際試した時の記事↓
・第２回livedoorブログデザインコンテスト

＜不具合・その１＞
透過pngが表示されない

これは高さが設定されていないために起こる現象のようです。
「height:1%;」を追加する事で解消されます。

div.article-header {
background: url(透過pngのURL) no-repeat;
}

*html div.article-header {
height:1%;
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='透過pngのURL', sizingMethod='scale');
}

＜不具合・その２＞
透過pngの表示のされ方が変。Firefoxと比べるとずれている。

AlphaImageLoaderを使用した際には、透過pngは指定した要素の大きさにぴったりはまり込むように表示されます。
そのため、背景画像に「backgroud-position」などの位置の指定をしていると、Firefoxとの差異が生じます。
位置の指定などをしないで良いようにぴったりとハマる画像を作っておきましょう。
エントリのタイトルなどの高さが変わる部分は、ヘッダーに入れないで本文の要素に入れてしまった方が良いと思われます。
エントリのタイトルが異様に長くなってしまって、高さが高くなっても、ヘッダーの透過pngが変形しないからです。




また、ブログの本文の要素は「repeat-y」を使って繰り返しますが、縦に伸ばしても色や柄が変化しないような画像にしておけば、「repeat-y」したものと縦に伸びたものの見分けがつかないので、縦に伸ばしても大丈夫な画像を作っておきましょう。




＜不具合・その３＞
リ、リンクが押せないっっっっ！！！

この不具合でAlphaImageLoaderの使用を断念していたのですが、ググってみたらあっさり解決しました。

・透過PNGの罠 − AUSGANG SOFT
・透過PNGの罠の解決法　−[to-R]

なるほど。要素内のa要素にのpositionに「relative」を指定すればいいのか！！

div.article-header {
background: url(透過pngのURL) no-repeat;
}

div.article-header a{
position:relative;
}

*html div.article-header {
height:1%;
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='透過pngのURL', sizingMethod='scale');
}

これでほとんどのリンクが有効になりました。

ただ、AlphaImageLoaderを使用し透過pngを設定した要素内に要素があってそこにリンクがあるとリンクが押せない箇所がありました。
そういう場所は、要素内の要素を削除してみると、リンクが押せるようになりました。

私がカスタマイズしているデザイン「kirakira_blue」では、どうしても、クラス『article-body』内のリンクが有効になりませんでした。

そこで、『<div class="article-body entry-content>』の中にあった『<div class="article-body-inner">』を『</div>』ごと削除したらリンクが有効になりました。


そういうわけで、AlphaImageLoaderを利用して透過pngを使って、ようやくデザインを作る事ができました。

出来たデザイン　→　sunset　→　sunset【修正版】


これにて、一応透過pngが使えるようになったと思って良いのかな？

• 
• 
•