WordPress（ワードプレス）で「text-indent:-9999」が効かない時の対処法 #wp

1年以上前の記事です。内容が古い可能性があります。

先日、久しぶりにWordPress（ワードプレス）のサイトを設置した際に起きた現象。
メニューなど、HTMLではテキストの部分を画像のボタンにする際、CSSを使ってbackground-imageでイメージを敷き、text-indentを使い「text-indent:-9999」なんて書いてテキストを飛ばすことがありますよね。

WordPressのテンプレートにする前、普通のHTMLではこれがしっかり効いていたのですが、WordPressのテンプレートにするとなぜか、効かなくなってしまうという現象が起きました。
できたHTMLやCSSを確認してみるもどうみても同じに感じられるのですがなにか違いがあったのかもしれません。

WordPress 3.x (速習デザイン)

posted with ヨメレバ

大曲 仁,星野 邦敏,豊田 有 技術評論社 2012-03-16

Amazon

Kindle

楽天ブックス

7net

honto

ブックオフ

e-hon

ということで、そこを探るのも一考だったのですがそもそもからして「text-indent:-9999」はスパムになってしまう可能性があるとの記事も見つけました。
□ 検索エンジンスパム・ガイドライン違反まとめ | SEO Imagination！ブログ

他にもフォントサイズを0で設置したり、text-indent -9999 ; の様な値を設置している場合は怪しいです。

だったら別の方法はないのかと調べてみると以下の様な表記でもテキストを隠す（飛ばす）ことができることを知りました。
□ text-indent:-9999pxでテキスト飛ばさなくてもテキスト非表示にして画像に置換できる方法 | delaymania

text-indent:100%;
white-space:nowrap;
overflow:hidden;

で、さっそくやってみたらビンゴ！
しっかりと、WordPress上のテキストも消えてくれました。
本当にありがとう。 

ちなみにこの表記に変えてからもう一ついいことがありました。
それはDreamweaverのプレビュー画面。
 この表記にする前はなぜかレイアウトが崩れ、文字も表示されてしまっていたのですが、
上記の表記に変えたらそれも解決しました。

こんなんなってたのが。

↓
見事解決！

ということで、今後は、 「text-indent:-9999」ではなく、上記の表記を使おうかと思っています。
最後に上記の設定をDreamweaverでやるときの設定をお伝えして終わりにしたいと思います。

まずは「ブロック」のText-indentを100%にし、White-spaceをnowrapに。

さらに、OverflowをhiddenにすればOK！

※まとめ

が効かない場合は

で代用できる。