背景画像をリンクにする？

解決済

質問者：MAGATA
質問日時：2007/01/17 16:50
回答数：4件

タイトルの通りなのですが、よくブログなどにある、headerの部分を画像にしてtopへのリンクを張る方法が分かりません。
例えば森永卓郎さんのブログだと、タイトルの「つながるモリタクBLOG」の部分にリンクが張ってあり
ブログのトップページに移動するようになっていますが、このクリックできる範囲を広げて、
緑色の背景画像の部分をクリックしても同じく移動できるように指定することはできませんでしょうか？
単に画像にリンクを張るだけならできますが、背景にしてみたところ詰まってしまいました…。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： dezimac
回答日時：2007/01/17 17:11

背景とタイトルを別に考えないで、背景も含めた大きな1枚の画像にしたらどうですか？

<a href=""><img src="" alt="タイトル" widht="500" height="50"></a>

もしくはスタイルシートで範囲を指定するか
a#header{
display: block;
margin: 0px;
padding:0px;
width: 500px;
height: 50px;
}

<a href="" id="header">タイトル</a>

- 0
- 件

通報する

この回答へのお礼

dezimacさん、ありがとうございます。

headの部分を<h1>扱いにしていたので、画像だけでなく
文字も入れたほうがよいのかと思い苦心していました。

スタイルシートの手順とても参考になりました。
というのも、<h1>の<a>に対して display : block;の指定を
していたのです。そこまでしておきながら、
気づかないとは…

どうもありがとうございました!!

通報する

お礼日時：2007/01/17 18:33

No.4

回答者： ratoa
回答日時：2007/01/17 23:19

よく使われる方法として、余分なテキストをtext-indentで弾くという方法もあります。

【html】
<h1><a href="#">タイトル</a></h1>

【css】
h1{
text-indent:-9999px;
}
h1 a{
display:block;
width:500px;
height:50px;
background:url(××.gif）no-repeat left top;/*タイトルも含めた画像*/
}

- 1
- 件

通報する

この回答へのお礼

ratoaさん、遅くなってしまいましたが、ありがとうございます。
お恥ずかしながら実際やってみてからでないと、どんな具合になるのか
イメージできないので、教えていただいた方法、明日試してみようと思います。
どうもありがとうございました！

通報する

お礼日時：2007/01/19 00:16

No.3

回答者： nyanko_2003
回答日時：2007/01/17 17:38

こんにちは。

こんなんでどうでしょう。

<html>
<head>
<title></title>
<style type="text/css">
a.test {
display: block;
width: 100px;
height: 100px;
background-image: url('test.gif');
}
</style>
</head>

<body>
<a href="hoge.html" class="test"><br></a>
</body>
</html>

ちなみにIE6・ネスケ7.1・FireFox・Opera9.1など等、動作確認済みです。