WEB制作 ディレクターチーム

隠しテキスト「text-indent:-9999px;」を使わずに簡単に画像をロールオーバーする方法

マウスオーバーで画像をロールする方法サイト制作で、ボタンやヘッダー部分に設置したナビゲーションリンクの画像を、マウスオンでアクションを付けるのが一般的だと思います。
これには、マウスポイントを画像に合わせた時に動きが出ると、思わず押したくなる・・・という人間の心理を突くのに効果的であるからです。

この手法を実装するのに、よく使われる方法がCSSで「text-indent:-9999px;」を設定するやり方です。
この「text-indent:-9999px;」というのは、そこに書かれたテキストを-9999px分だけ枠外に飛ばすということです。

<ul>
<li><a href="https://whitebear-seo.co.jp/">ホワイトベアーSEO</a></li>
</ul>

＜CSS＞-------------------------------------------------------------------------------------------------------------------
li {
text-indent: -9999px;
background: url(./img/home.gif) no-repeat;　←背景に画像を設定
}

上記の記述では、
「ホワイトベアーSEO」というテキストを-9999px分だけ枠外に飛ばして、変わりに背景に「home.gif」という画像を設定しています。

こういった方法で画像にアクションをつける方法が主流となっています。

だけどもGoogleは隠しテキストが嫌い？

Googleウェブマスター向け公式ブログに、このような記事が掲載されています。
隠しテキストは Google のウェブマスター向けガイドライン違反です

ポイントは、「画像と隠されたテキストの内容が違うこと」です。

ここが、Googleが隠しテキストを嫌う所以だと思います。

では、画像とまったく同じテキストでないといけないのかというと、そうでもなくて

ただ、画像の内容と CSS や alt 属性による代替テキストが完全に一致していなければならないわけではありません。前回の記事 に も書きましたように、代替テキストが、ユーザーに読ませることを想定し、ユーザーにとって有益なものであると考えられるものであれば ( 例えばテキストブラウザや、テキスト読み上げソフトをご利用のユーザーのために書かれたものである場合 ) 、問題はありません。

このようにあります。

つまり、キーワードを詰め込んだテキストではなく、ユーザーライクなテキストであれば隠しテキストを使っても問題ない、ということになります。

じゃあ、「text-indent:-9999px;」を使ってもいいですよね？

はい。
ガイドラインに書かれたような違反をしていなければ、問題ないと思います。

しかしながら、ここからはわたしの妄想ですが、、、

隠しテキストがガイドラインに違反していないかどうかを、Googleはどうやって判断しているのでしょうか？
一回のクロールで、隠しテキストと画像の内容が一致しているね、というのを見極めることはできるのでしょうか・・・？

疑問が残ります。

思うに、まず「text-indent:-9999px;」の記述が見られたらそこで何かしらのフラグが立つのではないでしょうか？
その後、フラグが立ったサイトを目視などでチェックする。。
なんてことを妄想しています。

フラグが立っている間は、何かしら問題があるかもしれないので、上位表示もおあずけ・・・
そんな妄想が膨らみます。

SEOの基本。怪しいな、やらないほうがいいな、と思うものはやらない。

やらないほうがいいかも・・・と思うものは、やらないほうがいいです。

ここで勘違いしてはいけないのは、「text-indent:-9999px;」を使うとペナルティになるということではありません。
ガイドラインに違反していなければ問題ないと思っています。

ただ、Googleがどのようにそれらのチェックをしているのかわからない以上、少しでも上位表示の足かせになるものは無くしていくのが良いのではないでしょうか。

というわけで、前置きが長くなってしまいましたが、「text-indent:-9999px;」を使わずに画像をマウスオーバーでロールさせる方法をご紹介します。
ちなみにこの方法、簡単に設定できて、HTMLソースもシンプルに済ませられるので、わたしは好きで良く利用しています。

手軽に画像のロールオーバー効果を実装するJavaScript

こちらのサイトが元ネタになります↓
手軽に画像のロールオーバー効果を実装するJavaScript

1.rollover.js をダウンロードする

手軽に画像のロールオーバー効果を実装するJavaScript
上記ぺージの、下のほうに「rollover.js ダウンロード」とあります。
そこからrollover.jsをダウンロードしましょう。

rollover.jsダウンロード場所

ダウンロードしたら、そのまま任意の場所へアップロードしましょう。

2.マウスをオンオフ用の画像２種類を用意する

マウスオフ状態の画像「bear.gif」
マウスオフ画像（bear.gif）

マウスオン状態の画像「bear_over.gif」
マウスオン画像（bear_over.gif）

２種類の画像は、ファイル名を同じにして、マウスオンの画像には「_over」を付けます。

3.JavaScript ファイルの読み込みこませる

<script type="text/javascript" src="./rollover.js?type=_over" charset="utf-8"></script>

上記を、HTMLファイル内の<head>～</head>に記述します。

赤文字の部分は、手順1でダウンロードしたファイルをサーバーにアップロードした場所になりますので、任意の場所に書き換えてください。

また、マウスオンの画像ファイルに記述する「_over」が嫌な方は、青文字の部分を変えることで変更できます。

4.img 要素に対してclass="rollover"とクラスを指定する

HTMLファイル内に設置したボタン画像にクラスを記述します。

<a href="https://whitebear-seo.co.jp/"><img src="img/bear.gif" width="48" height="50" alt="ボタン画像" class="rollover" /></a>

以上で完了です。

簡単ロールオーバーのデモはこちら

簡単に画像をロールオーバーさせるJavaScriptのデモ

なにはともあれ、隠しテキスト云々の前に、この方法はホントに簡単で、
一度設定してしまえば、そのサイト内ではマウスオンとオフの画像をそれぞれ作成して、あとはimg要素にクラスを指定するだけなので、便利ですよ＾＾
参考までにどうぞです。

RECOMMENDこちらの記事も人気です。