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の多様だけは避けましょう!
関連記事
-
-
バーナム効果 | Web Marketing用語
よく占いで利用される手法ですが、誰にでも当てはまるような曖昧な内容の表現でも、「あなたは◯◯
-
-
社会的証明の原理 | Web Marketing用語
他人の行動に自身の行動もつられてしまう性質を「社会的証明の原理」といいます。 Facebo
-
-
Youtube の 埋め込み動画 がプルダウンなどの上に表示されてしまう方法
ボディ内でYoutubeの埋め込み動画(iframe)を使用するときの対策です。
-
-
【秘伝】写真を粗くしない状態でPDFファイルは劇的に軽量化することができる方法
どうも、MURAKAWAです。 どのビジネスでもPDFファイルを扱うことはあるかと思い
-
-
覚えたらブラウジングが別格に早くなるChromeブラウザのショートカットのまとめ
以前にもChromeのショートカットについて記事を更新したけど、今回はもっと多くのショートカットを使
-
-
CSSで文章の頭文字を大きくする(ドロップキャップ)方法
時として、文字しかないページに装飾したい一つの手段の覚書。 以下のCSSを入れればドロップ
-
-
【My study】Excelで文字数をカウントする方法(LEN関数)
仕事で文字数をExcelでカウントする必要があり勉強になったので覚書として。 ネットで検索する
-
-
MicrosoftがIEのサポートを2016年1月から各OSで動作する最新版にのみに限定
8月7日にMicrosoftがInternet Explorerのサポートを最新版のみサポートをする
-
-
サイトチェックツールのWebsite Explorer(ウェブエクスプローラー)が復活していた!
サイトチェックツールとして数年前までずっと使い続けてきていた「Website Explorer(
-
-
営業(販促・PR)ツールで使うべき、参考にすべき最強のモーション(動画、ビデオ)インフォグラフィックス20選
以下を読む前にこちらをどうぞ! ※すみませんが、自動再生中(笑) The Economy of C