ami-to ブログ: text-indent:-9999pxを使わない画像置き換えの方法

昨年の秋からGoogleでパンダアップデートやら、ペンギンアップデートやら
リンクペナルティやら色んなことが盛んに行われており、
サイトの順位が下がっちゃって大変な思いをされている方も多いと聞きます。

ami-toが管理しているサイトは運良く（ちゃんと作ってたと言うべき？）
これらによる順位の変動は無かったわけですが、
前々から気になっていたCSSの使い方があったので
ここいらで何か他の手はないものか探してみるとありましたよ。
今回もネットの先輩たちに感謝しつつ紹介したいと思います。

その前に、
text-indent:-9999px;
って何かというと、タイトルとかの画像を表示しているんだけど、
HTML上ではテキストになっているので結構長い文章でも入れちゃえる手法なんです。

#site-title {
  background-image : url("./images/sample.jpg");
  text-indent:-9999px;
}

しかし、9999px分の領域を使う分パフォーマンスも良くないとか、
さらにはGoogleにSEOスパムだと思われてしまう可能性もあるとのことから、
使わない方がいいと言われてるんです。

で、ググっって出てきたのがこちら。

text-indent:-9999pxでテキスト飛ばさなくてもテキスト非表示にして画像に置換できる方法

タイトルが分かりやすくて素晴らしい★ ここで紹介されているのが

#site-title {
  background-image : url("./images/sample.jpg");
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}

実際に何箇所かこれに変更してみたところ、IE6でも正常に表示されました。
なんて優秀！

しかし、IEにおいて気をつけなければならないことがあります。

  background-image : url("./images/sample.jpg") left top;

というように、位置指定するとこの表示領域ごとズレる場合があります。
私が挿入した時はChromeやFirefoxではそのままですが、IEだけ（6,7,8で）ズレました。

まぁ、テキストの代わりに画像入れているわけだから、
こんな指定することってあんまりないとは思いますが、
やはりIEだけは何かやらかしてくれますね（笑。

こんなことしなくても画像を挿入してaltにしっかりテキスト入れるのが
ホントはシンプルで一番良いのかもしれませんけど。

今頃、知ったんかい！
と思われた方はスルーしてください。日々仕事してても昔から使っている手法を優先して、新しい手法は意外に知らないことも多いです。
これからも色々調べてよりよい記述を目指します。

ami-to ブログ