CSSでの画像置換

text-indentを使う場合

サンプル

CSSソース

a.ex_link {
 width:72px;
 height:32px;
 display:block;
 background:url(img/btn_sample02.jpg) no-repeat 0 0;
 text-indent:-9999em;
}

a.ex_link:hover {
 background-position:0 -32px;
}

注目すべき点は、「text-indent:-9999em;」でしょうか。
これで、本来表示されるべきaタグで囲まれたテキストを飛ばしています。

ただ、この方法だとFirefoxなどのブラウザでクリックしたときに線が横にでてしまうので見た目的にちょっと・・・。って感じです。
あと、Dreamweaver CS3のデザインビューで表示がかなり崩れてしまいます。
動作的には問題ないので使えるテクニックの一つです。

overflow:hiddenを使う方法

サンプル2

CSSソース

a.ex_link {
 width:72px;
 height:0;
 display:block;
 background:url(img/btn_sample02.jpg) no-repeat 0 0;
 overflow:hidden;
 padding-top:32px;
}

a.ex_link:hover {
 background-position:0 -32px;
}

この方法ではpadding-top:32px;で高さを作って表示されるべきテキストは下にはみ出ている状態です。
このはみ出ているテキストを消すために、overflow:hiddenを使用しています。

この方法なら、上記で書いたクリック時に線がでたり、Dreamweaver CS3での表示がおかしくなったり。そんなことは起きないので使い勝手はいいと思います。

画像置換とSEOの関係

これが使用する上で一番の問題になると思います。「css 画像置換 seo」とかで検索してみると色々な興味深い記事が出てきます。なので、ココでは詳しくは書きませんが、画像置換を利用する上で、その置換する画像とテキストの意味がかけ離れていたりしたらだめですよ。とのこと。
ただ、これも100％スパムではないと判断はできないので難しいところです・・・。

適度に使うことをオススメします。

top