text-indent:-9999pxが使えない時はこの方法

·

サイトのロゴ等、テキストにタグを指定して画像に置き換える方法は定番だが、text-align:rightを使いテキストを右揃えで使っている場所ではtext-indent:-9999pxの方法は使えない。
そんな時は、以下のスタイルシートで処理をするといい。

CSS

.no-text { 
	text-indent: 100%; 
	white-space: nowrap; 
	overflow: hidden; 
}

スタイルシート内でこれを設定しておき、テキストを消したいものにはクラスを追加する。

一般的なtext-indent:-9999pxを使った例

CSS

.copy {
	display:block
	width:350px;
	height:100px;
	background: url(../img/copy_rights.png) center center no-repeat;
	text-indent:-9999px;
}

HTML

<div class="copy">&copy; Digital Gate</div>

white-space + overflowを使う方法

CSS

.copy {
	display:block
	width:350px;
	height:100px;
	background: url(../img/copy_rights.png) center center no-repeat;
	text-indent:-9999px;
}
.no-text { 
	text-indent: 100%; 
	white-space: nowrap; 
	overflow: hidden; 
}

HTML

<div class="copy no-text">&copy; Digital Gate</div>

スタイルシートをひとつにまとめても良いが、画像置換を使う頻度の高いサイトでは分けておいた方が使いやすい。