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用語
初頭効果とは逆に、一番最後に見聞きしたものが一番印象に残りやすいことを「親近効果」といびます
-
-
Windows10 PC起動時によく使うアプリを自動起動する設定!スタートアップフォルダに登録
自宅でWindows7を使用している筆者だけど、会社でついにWindows10を使用すること
-
-
FTPソフト Filezilla でタイムスタンプを維持する設定方法
どうも、MURAKAWAです。 タイムスタンプを維持する設定 制作の仕事をしてい
-
-
Excelでリンクのついていない大量のURLにリンクをつける方法 ‐HYPERLINK関数‐
パソコンを使う仕事やパソコンでお金の管理をしている人ならほとんどの人がExcelを使ったことがあると
-
-
Google Chrome拡張機能 6つのマーケティングツールの覚書き
IE(Internet Explorer)しか知らない人にかわいそすぎるけど、インターネットを使
-
-
WordPress Jetpack 余計なCSSやJSの読み込みを 削除して表示速度を早くする方法
Wordpressプラグインでサイトの表示速度を遅くすると有名なJetpackプラグイン。
-
-
HTMLの表を簡単に作成ができるTable Tag Generator
HTMLの表を簡単に作成ができるTable Tag Generator Web制作の仕事を
-
-
引越しの時の粗大ゴミはどうしてる?格安ゴミ捨て法?w
もうじき引越しするんだけど、その時粗大ゴミって出ると思うんだけど、多分粗大の前にリサイクルに出そうと
-
-
スノッブ効果(≒希少性の法則) | Web Marketing用語
※個人的にWebマーケティングの用語を備忘録として掲載しています。 引用元:Fer
-
-
社会的証明の原理 | Web Marketing用語
他人の行動に自身の行動もつられてしまう性質を「社会的証明の原理」といいます。 Facebo