問題
テキストを配置し、画像に置換したい。
解決策
cssで、
- text-indent: 100%;
- white-space: nowrap;
- overflow: hidden;
を設定する。
画像置換の手法
グローバルナビゲーションなどで画像を使いたいけれどSEOの観点からテキストを配置し、画像に置換したい時に、「text-indent: -9999px;」を使わずに画像置換する方法をご紹介します。
DEMOはこちら
- テキスト
- テキスト
- テキスト
HTMLはこちら
<ul class="tabimg-list clearfix">
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>CSSはこちら
.tabimg-list > li{
display: inline-block;
vertical-align: top;
margin: 0 10px 10px 0;
width: 120px;
height: 80px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-color: #fef5f2;
background-image: url("../images/common/image.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 60px auto;
}ポイント!
- 「text-indent: 100%;」で、テキストを領域の外へ移動させます。
- 「white-space: nowrap;」で、テキストの折り返しをさせないようにします。
- 「overflow: hidden;」で、領域の外を非表示にします。
参考ページ
以下のサイトが、より詳しく解説してくれています。
【text-indent:-9999pxでテキスト飛ばさなくてもテキスト非表示にして画像に置換できる方法 | ディレイマニア】
https://delaymania.com/201209/web/textindent-9999/
コメント