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>

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

 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク