DN*blog

CSS Spriteを追加しました。

参考にしてみてください！

Demo - CSS Sprite

まず注意しないといけないのが、IEへの対策。
IE6以下は透過PNGに対応していないので背景が真っ白で表示されてしまう。
対応策は色々あるけど、今回は使い勝手もいいスクリプトを用いた対応策をご紹介します。

demoサイト

使ったスクリプトを提供しているサイト。
Post Production - A Better IE 5.5 and 6 PNG Fix

上記サイトの「Get the code」からソースをダウンロード。
ダウンロードしたファイルを任意のフォルダにいれておく。

コードはCSSを利用してHTML内の画像要素に適用させる。

CSSソース

img {
    behavior:url(任意のパス/fx-iepngfix.htc);
}

上記のソースだと全てのimg要素に対してスクリプトが適用される。
背景画像などに適用させたいときは、

.contents {
    behavior:url(任意のパス/fx-iepngfix.htc);
    background:url(任意のパス/sample.png) no-repeat top left;
}

などと記述すればよい。

これでお手軽にIE6以下でも透過PNGを利用することができる。

スクリプトは他にもあるので自分が使いやすいものを利用して透過PNGを有効活用してみてください！
代表的なものを他に2点あげておきます。

TwinHelix - IE PNG Fix v1.0 / 2.0 Alpha 3

jQuery JavaScript Library - jquery.pngFix.js

ちなみに、当ブログでも透過PNGを使っていますが、使っているスクリプトは「IE PNG Fix」を使っています。
今回は、あえて自分の使っていない物をご紹介しましたが、「A Better IE 5.5 and 6 PNG Fix」は使用するファイルがスクリプトファイルのみなので始めて透過PNGを使う方にはオススメかもしれません。

最近SEOについて思う事。

YahooやGoogleの検索条件も予告なく変更される事もありそれによって順番も変わってくる。
コチラ側ではどうしようもない事もあるので対応が難しいときもある。

なので、最近はそんなに意識せずやってます。
もちろん、HTMLんの文法とか文章構造は意識しますけどSEOがあるからこの見出しはこうする。とかそういうのは考えない事に・・・。

他にもYahoo!カテゴリとかに登録する手段などがありますし。

何が言いたいかわからなくなってきましたけど、SEO対策はできることだけをやるって決めてます。
ハイ。