テキストが消えない?アメブロ CSS text-indent:-9999px にしているのに、Description が表示される謎。

アメブロのヘッダー画像をカスタマイズするときに、h1やh2などのサイト名やサイト説明文を非表示にしたいときがあります。サイト名やサイト説明文を、ヘッダーデザインの一部にして画像化してしまうときですね。

そんなときによく使われている手法が、

skinDescriptionArea{
text-indent:-9999px;}

text-indent:-9999px で、サイト名やサイト説明文を見えないところへ追いやってしまうやり方。正しいCSSの使い方ではないということなのか、あまり良いやり方ではないとも聞きますが、5年ほど経過した今でも問題はないようですので、私は引き続き使っています。

ところが、text-indent:-9999px で飛ばしているにもかかわらず、アメブロのヘッダー内にテキストが表示されることがあります。

アメブロカスタマイズ ヘッダー テキストインデントが効かない

あれれ?おかしいなと思い、HTMLソースを見てみると、

HTMLソース

<br/>で改行されているところから表示されています。つまり、改行されるまでの一行目だけ、テキストインデントの text-indent:-9999px が効いていることになりますね。

ですので、すべてのテキスト、つまり文章全部を非表示にしたいのであれば、改行をなくすことで、text-indent:-9999px を有効にし、この場合ならブログの説明文を見えなくすることができるようになります。

この改行をなくすには、アメブロの設定の中の、ブログの表示設定のページで修正しましょう。

テキストインデントが効かずに困っているかた、お試しください!