タイトル部分を画像だけにするには？

質問

DTIブログを使っています。

タイトル部分が、背景画像の上にテキストのブログタイトルと紹介文があって、ブログタイトルがトップにリンクされているんですが、
それをカスタマイズでテキストのブログタイトルと紹介文を消し、背景画像をトップにリンクさせるにはどうすればいいでしょうか？

ヘッダー部分のHTMLは
<div id="header">
<h1><a class="white_link" id="page_top" name="page_top" href="<%url>" title="<%blog_name>"><%blog_name></a></h1>
<p id="introduction"><%introduction></p>
</div>

ヘッダー部分のスタイルシートは
/*ヘッダー*/
#header {width:800px; height:160px; margin:0px 10px 5px 10px;
background :url(http://12.dtiblog.com/1/11010510escape/********.jpg) no-repeat; /* ### 画像データ使用 ### */}

h1 {position:relative; margin:0px; padding:28px 10px 10px 18px; font-size:30px; font-weight:bold; color:#ffffff; line-height:100%;}

#introduction {margin:5px 10px 10px 30px; font-size:16px; text-align:left; font-weight:bolder; color:#ffffff; line-height:100%;}

よろしくお願いします！<m(__)m>

回答No.1

Muller3 · ベストアンサー

多分最も一般的に使われている方法は

#header a {
display: block;
width:800px;
height:160px;
}

h1 { text-indent: -9999px;}
#introduction { text-indent: -9999px;}

リンクはa要素をブロック要素化して範囲を設定
テキストはtext-indentにマイナスの値を使って表示範囲外に飛ばす
というものです。
（上記は概要のみです。いろんなブラウザで表示がどうなるかを調べ、おかしかったらネットで調べて個々に対応して下さい）

これにはいろいろな手法が考えられており、それぞれにメリット・デメリットがあります。
「画像置換」という語句で検索をかけて調べてみて下さい。ご自分で納得できる方法を選択された方がいいと思います。

お礼

御礼が遅くなりました。
回答ありがとうございました！！<m(__)m>
ぜひそのやり方でなんとかがんばってみます！