下記のような意見もあります。

ご参考までに。




text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を 表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない

 

h5{

 width:150px;

 height:50px;

 background:url('ir_test.gif') no-repeat;

 text-indent:-9999px;

}

<h5>SITE TITLE</h5>

 

 

h5{

 width:150px;

 height:50px;

 background:url('ir_test.gif') no-repeat;

}

h5 span{

 display:none;

}

<h5><span>SITE TITLE</span></h5>

 

上記のようなCSSだと「CSS有効で画像は非表示」の環境で見ると、その箇所には何も表示されなくなってしまう。「CSS有効で画像は非表示」で 見ている環境というと、携帯のフルブラウザやモバイルPCなどが考えられるます。また「display:none;」としている場合だと、音声ブラウザはその 箇所を飛ばしてしまう。他にもタブボタンでフォーカスできなかったり、アクセシビリティにかなり問題があるようです。

さらに一部にはこれがスパムに当たるという説もあるりますが、これは確証はなく、断定は出来ません

 

SEOスパムと判断される可能性があるとされているのは、非可視化されるテキストの内容が、それと置き換えられる画像に対し等価ではないと考えられる場合のようです。ですから、テキストと画像の双方にある情報が一致するよう制作する限りは、SEOスパムと判断される懸念は低いと思います。仮にそれでもなおスパムと判断された場合、責められるべきは検索サービスの側の判断であると、考えられています。なお、画像上の情報とテキストの内容の 等価性を機械的かつ自動的に検証することが容易でないことは想像に難くなく、究極的には人間が判断しなければならない問題だとも思います。

ただし、SEOスパムか否かの判断基準は検索サービス毎によって異なるでしょうし、また技術的背景の変遷と共に変化し続けるものでしょう。ですか ら、もしSEOスパムと認定される懸念を現時点で「完全に」払拭したいということであれば、画像置換の使用は諦めたほうが良いかもしれません。

仮に画像置換を使わないとして、その代替手法については、筆者の知る限り良い方法がみつかっていません。基本的にはテキストを表示し、ビジュアル面 で強く訴求すべく画像を使用するニーズが高い箇所についは、img要素を適切なalt属性値と共に利用するのが良いと思います。

http://norisfactory.com/stylesheetlab/000038.php

↑clearFixだけでもこんなにあります。


content: "."; の代わりに
content: "url(1x1の透明GIF.gif);";


display: inline-table;の代わりに

display: inline-block;という方法もあります。

高頻度で使うハックなのできちんと理解しないとですね。



以下ameba仕様

/*---clearfix---*/

.clearFix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
.clearFix{
min-height:1%;
display: inline-table; } /* Hides from IE-mac \*/ .clearFix{>height: 1%;} .clearFix{display: block;} /* End hide from IE-mac */
/*---clearfix---*/