新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

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

      2014/11/09

  • このエントリーをはてなブックマークに追加

先日、久しぶりに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のプレビュー画面。
 この表記にする前はなぜかレイアウトが崩れ、文字も表示されてしまっていたのですが、
上記の表記に変えたらそれも解決しました。

こんなんなってたのが。
テキスト飛ばしの新常識01

見事解決!
テキスト飛ばしの新常識02

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

まずは「ブロック」のText-indentを100%にし、White-spaceをnowrapに。
テキスト飛ばしの新常識03

さらに、OverflowをhiddenにすればOK!
テキスト飛ばしの新常識04

※まとめ

text-indent -9999;

が効かない場合は

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

で代用できる。

 - CMS, Webデザイン, WordPress, デザイン , ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

Google Chromeではパスワードを保存しちゃいけない(Google Chromeでパスワードを確認する方法)

誰かにパソコンを貸すことがある人はブラウザにパスワードを覚えさせるのは止めたほう …

WordPress(ワードプレス)に「パンくずリスト」を付けてみた #wp

ここのところ立て続けにWordPress関連の記事が続いていますがご察しの通りW …

no image
Safari

G5についてる標準ブラウザのSafariってすごいですねぇ。

ライトボックス(Lightbox)のJavaScript読み込みはヘッダー<head>じゃなくてボディー<body>【Webデザイン】

最近、LP(ランディングページ)を作ることが多くなりました。 先日、とあるLPを …

「LINE Creators Market(ラインクリエイターズマーケット)」の人気スタンプ。「かわベーコン」さんの「にゃっちーず」他

「LINE Creators Market(ラインクリエイターズマーケット)」と …

WordPress(ワードプレス)でトップページ以外にブログトップを設置する方法【完全版】 #wp

つぶくまブログの「←古い投稿」リンクが正常に動かなかったので修正することにした。 …

no image
プルダウンメニューを全体的にセンタリングさせる方法

InternetExplorer7(以下IE7)での表示バグにてんやわんや。 そ …

縦長すぎる東京スカイツリーのサイトが面白い

5月22日オープン予定の東京スカイツリーのサイトが面白いです。これは1つ目の付け …

国立西洋美術館で「考える人」を見た【古希のお祝い #2】

今までの流れはこちら→| #1 | この先の流れはこちら→| …

「Auto Post Thumbnail 3.4.1」のアップデートに注意。自動サムネール取得ができなくなります【WordPress・プラグイン】

なんか、最近、サムネール画像が設定されずに更新されるようになってしまいました。 …