SEO対策になるCSSロールオーバー?

カテゴリ:CSSテクニック 2007年12月16日 00:42

ふと思いついたので書いてみました。
overflow: hidden 以外使わない、スパムになりそうもない手法で、さらに無駄なタグを挿入せず、かつ CSS OFF、画像 OFF でもなんとか情報が消えないように工夫した CSS ロールオーバーを作ってみました。n

SEO対策になるCSSロールオーバー?デモ

今回のサンプルの肝は、「overflow: hidden」です。n

▼EntryMore▼

まずはソースの説明から。n

HTML ソース

CSS ソース

概要を説明すると、普通に li 要素でメニューを構築し、各メニューには img 要素で画像を配置します。この際、alt 属性にはしっかりとメニューの名前を設定します。(画像 OFF の場合の対策)n

次に、各メニューの a 要素の背景にロールオーバーした際の画像を配置しておきます。
a 要素は block 要素にし、画像と同じ幅・高さ、overflow: hidden を設定します。
そして最後、a:hover img に position: relative と、top: -32px(32px はサンプルの画像の高さ。画像の高さが変わる場合は適宜変更してください)を設定したら完了です。n

こうすることで、ロールオーバー時には画像が上にずれ、a 要素の背景が表示されるため、
ロールオーバーの画像が表示されているように見える、というわけです。n

検索エンジンスパムになる可能性のある隠し要素は(何もしない状態であれば)設定されておらず、かつロールオーバー用の無駄なタグの挿入もありません。
さらに、この方法は IE6 でも問題なく動作します。n

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/54