text-indent:-9999px;でテキスト飛ばしをしなくてもテキストを非表示、背景画像を表示する方法
公開日:
:
知識と経験
必要に応じてテキストを非表示にしたいときはたまにだけど「text-indent:-9999px;」を使ったことがあります。
単純に非表示にしたいだけなら「display: none;」を最近は頻繁に使っているんだけど、これだと領域ごと非表示になってしまうし、やりかた次第だけど、ソースの数を増やしたくないときや<ソースじたいいじることができない環境にいる方はこの方法がおすすめです。
よく使われるのはロゴが多いですかね~
.text-kesuyo { text-indent: 100%; white-space: nowrap; overflow: hidden; }
もっとがっちりやるなら以下のように、これぐらいやってもいいかもしれません
.text-kesuyo { display: block; width:auto; height:auto; background: url(/image/kesuyo.jpg) no-repeat left center; outline:none; text-indent: 100%; white-space: nowrap; overflow:hidden; }
最後に
text-indent:-9999pxじたいはGoogleにSEOスパムだと認識されてしまう可能性があると言われていますが、スポットでやる分にはスパム扱いにはなる可能性は低いと思いますが、やはりキーワードを画面上消して見えないようにして上位に表示させようとしている人は少なからずいると思うので、text-indent:-9999pxの多様だけは避けましょう!
関連記事
-
使い方によってはかなり便利、使わな損する便利管理ツール「ルフトツールズ(lufttools)」
使い方によってはかなり便利、使わな損する便利ツール「ルフトツールズ(lufttools)」
-
社会的証明の原理 | Web Marketing用語
他人の行動に自身の行動もつられてしまう性質を「社会的証明の原理」といいます。 Facebo
-
FileZillaでサーバは non-ASCII の文字に対応していません.
FileZillaで「サーバは non-ASCII の文字に対応していません.」の表示が出ているとき
-
中身が違うaタグをDreamweaverで一括でリンク設定を削除する方法
aタグの中が違うんだけど、一括でリンク設定を削除したい時があります。 いくらDream
-
CSSで文章の頭文字を大きくする(ドロップキャップ)方法
時として、文字しかないページに装飾したい一つの手段の覚書。 以下のCSSを入れればドロップ
-
スノッブ効果(≒希少性の法則) | Web Marketing用語
※個人的にWebマーケティングの用語を備忘録として掲載しています。 引用元:Fer
-
HTMLからPDFファイルの特定のページを指定する方法
WEB制作をしていればPDFへのリンクを設定したことがあると思います。 今回は1枚のPDFファ
-
現状維持の法則 | Web Marketing用語
「選択肢が広がりすぎた場合、普段と変わらない選択をしてしまう法則を「現状維持の法則」といいま
-
カクテルパーティ効果 | Web Marketing用語
カクテルパーティーなどで、様々な雑音や会話が入り交じる中で、不意に自分の名前を呼ばれたり、興
-
PNGファイルをかなり軽量化してくれるTinyPNGを使うべし!!
今までずーっと「PNGGauntlet」を使っていたんだけど、思ったよりあまり軽くならず。。 やは