WordPress(ワードプレス)で「text-indent:-9999」が効かない時の対処法 #wp
2014/11/09
1年以上前の記事です。内容が古い可能性があります。
先日、久しぶりにWordPress(ワードプレス)のサイトを設置した際に起きた現象。
メニューなど、HTMLではテキストの部分を画像のボタンにする際、CSSを使ってbackground-imageでイメージを敷き、text-indentを使い「text-indent:-9999」なんて書いてテキストを飛ばすことがありますよね。
WordPressのテンプレートにする前、普通のHTMLではこれがしっかり効いていたのですが、WordPressのテンプレートにするとなぜか、効かなくなってしまうという現象が起きました。
できたHTMLやCSSを確認してみるもどうみても同じに感じられるのですがなにか違いがあったのかもしれません。
そこで、原因を調べようと検索すると「text-align:right」を親CSSや親要素に設定すると効かなくなる事があると書かれているブログを見つけました。
□ text-indentが効かない?! : ノウハウコラム : HTML/XHTML、CSSコーディング最安保障~クロノドライブ~
なるほど、ワードプレスの初期CSSにひょっとすると 「text-align:right」があるのかもしれません。
ということで、そこを探るのも一考だったのですがそもそもからして「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でやるときの設定をお伝えして終わりにしたいと思います。
※まとめ
が効かない場合は
white-space:nowrap;
overflow:hidden;
で代用できる。
アドセンス広告メイン
関連記事
-
-
Web制作会社はいずれなくなる? アメリカにWeb制作会社がない5つの理由
1年以上前の記事です。内容が古い可能性があります。アメリカにはWeb制作会社がな …
-
-
ブラウザは速度で争う時代になってきた
1年以上前の記事です。内容が古い可能性があります。もう、使ってないからどうでもい …
-
-
CMSで使うHTML内のリンクは「絶対パス」でも「相対パス」でもなく「サイトルート相対パス」がベスト【WordPress】
1年以上前の記事です。内容が古い可能性があります。WordPressはじめ、CM …
-
-
CSSでWebサイトをセンタリングさせる方法
1年以上前の記事です。内容が古い可能性があります。まあ、今さら感漂いますが一応自 …
-
-
デザインイメージは9パターン用意しろ
1年以上前の記事です。内容が古い可能性があります。本日、打ち合わせでかつてソニー …
-
-
9月のヒットキーワード及びヒットページ
1年以上前の記事です。内容が古い可能性があります。さて、9月のヒットキーワード及 …
-
-
検索ワード順位アゲアゲ大作戦 #2 ページランクアゲアゲ大作戦
1年以上前の記事です。内容が古い可能性があります。まずはgoogle=ページラン …
-
-
インターネットは強者のツール? #3
1年以上前の記事です。内容が古い可能性があります。では、強者はどのようにインター …
-
-
ワードプレス(WordPress)にRSSを読み込ませる方法 #wp
1年以上前の記事です。内容が古い可能性があります。ワードプレスにはRSSを読み込 …
-
-
これぞHTML5!「藤岡弘、」ファンサイトのクオリティが凄すぎる
1年以上前の記事です。内容が古い可能性があります。過去には仮面ライダーなどでも活 …