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の多様だけは避けましょう!
関連記事
-
【お役立ちアプリ】iOSのsafariで簡単にPDF化して自分用に保存する方法
iPhoneのSafariを使っていて、残しておきたかったページを気がついたら違うサイトを開くと
-
Youtubeの埋め込み動画を自動再生に設定する方法
動画の埋め込みコードのアドレスの最後に「?autoplay=1」を追加する src="//ww
-
Google Chrome拡張機能 6つのマーケティングツールの覚書き
IE(Internet Explorer)しか知らない人にかわいそすぎるけど、インターネットを使
-
【保存版】UI/UXは本よりスライドで勉強せよ!勉強会用厳選スライドで実力アップ!
UI/UXの勉強しようと本屋さんに下見しに行き、いろいろ立ち読みしたところ、確か
-
カクテルパーティ効果 | Web Marketing用語
カクテルパーティーなどで、様々な雑音や会話が入り交じる中で、不意に自分の名前を呼ばれたり、興
-
思わずマネしたくなる縦長Webサイト16選
スノーパウダーの雪見亭 名前のとおりのかき氷ではない新感覚スイーツ雪見亭のお店をイメージし
-
サイトチェックツールのWebsite Explorer(ウェブエクスプローラー)が復活していた!
サイトチェックツールとして数年前までずっと使い続けてきていた「Website Explorer(
-
テキストエディタ「EmEditor」指定する文字列を強調表示する方法
仕事でEmEditorを使っているのだが、便利な機能だから備忘録として記載。 指定する文字列を
-
保有効果 | Web Marketing用語
人は手に入れたモノに対し、入手する前よりも価値を感じる傾向にあります。これを「保有効果」とい
-
社会的証明の原理 | Web Marketing用語
他人の行動に自身の行動もつられてしまう性質を「社会的証明の原理」といいます。 Facebo