• ベストアンサー
  • 暇なときにでも

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

  • 質問No.4276575
  • 閲覧数58
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 78% (296/377)

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
  • ベストアンサー

ベストアンサー率 81% (800/979)

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

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

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

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

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

お礼率 78% (296/377)

御礼が遅くなりました。
回答ありがとうございました!!<m(__)m>
ぜひそのやり方でなんとかがんばってみます!
投稿日時:2008/08/26 00:41
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

ピックアップ

ページ先頭へ