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の多様だけは避けましょう!
関連記事
-
-
PNGファイルをかなり軽量化してくれるTinyPNGを使うべし!!
今までずーっと「PNGGauntlet」を使っていたんだけど、思ったよりあまり軽くならず。。 やは
-
-
営業(販促・PR)ツールで使うべき、参考にすべき最強のモーション(動画、ビデオ)インフォグラフィックス20選
以下を読む前にこちらをどうぞ! ※すみませんが、自動再生中(笑) The Economy of C
-
-
超簡単!Instagramの写真をRSSでWebサイトやブログに埋め込んで自動更新する方法
Instagramの投稿写真を自分のWebサイトやブログで掲載する方法があります。 一
-
-
松竹梅の法則 | Web Marketing用語
人は複数の選択肢を与えられた時、一番無難な答えを選ぶ傾向があります。これを「松竹梅の法則」と
-
-
ウィンザー効果 | Web Marketing
一次ソースから得た情報よりも、第3者を介して伝えられた情報の方が影響力が大きくなる傾向にある
-
-
カクテルパーティ効果 | Web Marketing用語
カクテルパーティーなどで、様々な雑音や会話が入り交じる中で、不意に自分の名前を呼ばれたり、興
-
-
HTMLの表を簡単に作成ができるTable Tag Generator
HTMLの表を簡単に作成ができるTable Tag Generator Web制作の仕事を
-
-
WordPressプラグイン「All 404 Redirect to Homepage」で404エラーページ特定のページへリダイレクト
どうも、MURAKAWAです。 Wordpressを使用している人が大変増えていま
-
-
CSSで文章の頭文字を大きくする(ドロップキャップ)方法
時として、文字しかないページに装飾したい一つの手段の覚書。 以下のCSSを入れればドロップ
-
-
現状維持の法則 | Web Marketing用語
「選択肢が広がりすぎた場合、普段と変わらない選択をしてしまう法則を「現状維持の法則」といいま