[CSS] 画像置換は text-indent: 100%; white-space: nowrap; overflow: hidden; でテキストを隠す
CSS で画像置換をするための Tips をご紹介します。
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
昔は text-indent:-9999px; を使うのが主流だったみたいなのですが、今は上記の書き方が主流らしいです。
１点だけ注意したいのが、隠しテキストで Google からペナルティを受けることについて。
画像の内容とテキストが異なってなければ、隠しテキストの Google のペナルティは受けないみたいです。なので、関係ないテキストを画像置換するなどダメな使い方をしていなければ問題ないようです。