ブログタイトルと説明文を非表示にする

こんにちは。
『やさしいブログの作り方』の松田です。

ブログタイトルとその説明文は自分のブログが何について書いているブログなのかを説明する上で非常に重要です。

しかしながら標準仕様ではゴシック体の大きいフォントがどーんと出てくるだけなので、特にヘッダー画像を取り付けられている場合、タイトルと説明文の表示位置によってはヘッダーの写真等と被ってしまい逆に見にくくなることもあります。

タイトルと説明文の表示位置を変更するカスタマイズもありますが、それよりもヘッダー画像にブログタイトル等を書いてしまい、テキスト表示されるブログタイトルと説明文を非表示にしてしまう方がすっきりします。


ヘッダー画像にブログタイトルや説明文を入れるメリットとしては、

■　文字数に制限がない。
■　ブラウザにはないフォントが利用できる。
■　表示がブラウザに左右されない。

などです。

ここを非表示にすると検索サイトにひっかからないのでは？と思われる方もいらっしゃるかもしれませんが、あくまで画面上に非表示にするだけで、テキストデータとしては消えませんので検索結果に影響を与えません。


以下の記述をCSSの最後に追記するとブログタイトルと説明文が非表示になります。（新旧両デザインスキンで有効です。）

#header h1,h1.skinTitleArea{
text-indent:-9999px;
}
#header h2,h2.skinDescriptionArea{
text-indent:-9999px;
}


また、ヘッダーにタイトルと説明文を入れ、実際のタイトルと説明文を非表示にすることはこんなメリットもあります。