CSSで表示したヘッダーの画像にリンクを貼りたい場合にどうすればよいのか、ということを悩みまして、検索で調べたり自分で試したりしました。完璧とはいえませんがどうにかリンクを貼りました。ここではその手順を述べてみます。
今回やりました方法は、スタイルシートで表示した画像に、透明な画像を重ねてその重ねた画像にリンクを貼るというものです。ですから正確に言えば背景画像にリンクを貼るではなくて、背景画像にかぶせた画像にリンクを貼るです。
まずは背景画像と同じ大きさの透過画像を作ります。私が使ったツールは「JTrim」です。これで作れます。無料です。窓の杜などからダウンロードできます。
JTrimでﾒﾆｭｰのファイルから新規作成をクリックします。
画像の大きさを指定します。背景画像と同じ大きさを指定してＯＫをクリックします。
そしてＯＫをクリックすると白い画像が登場するのですが周りの背景も白いのでさっぱりわかりません。ﾒﾆｭｰ「表示」の背景色でバックの色を替えられます。そうすると作った画像がわかります。
最後にこの真っ白な画像を透過するようにします。
ﾒﾆｭｰ「イメージ」から透過色設定をクリックします。マウスがスポイトのような形になるのでそのまま先ほどの真っ白な画像の上で左クリックします。そうすると先ほどまで真っ白だった画像がﾁｪｯｸ模様に変わり透過する画像に変わりました。
あとは保存してください。画像の準備は以上です。
まずはindex.htmlなどのHTML側に以下の記述を加えます。
加える場所は、基本的に<body>から</body>のの間でしたらどこには位置してもよいと思います。いろいろ試してみてください。
<a id="header" href="http://www.example.or.jp/example.html">
<DIV STYLE="POSITION:absolute; LEFT:30px; TOP:30px;">
<img src="img/blank.gif" alt="" width="530" height="102" border="2">
</DIV>
</a>
青色の所は皆さんがお使いになる画像の名前、大きさやリンクさせたいアドレスによって変わるところです。
赤字のところが、背景画像にかぶせる透明の画像(透過画像）の位置を調節しているところです。
いちばん最初の<a id="header"の所はＣＳＳ内でその背景画像が記載されている所の＃以降の文字です。例えばわたしのＣＳＳ(スタイルシート）では以下のようになっています。
以下ＣＳＳ（スタイルシート）より----------—-＞
#header {
width: 100%;
height: 220px;
margin-bottom: 20px;
position: relative;
background: url(img/bg-header.jpg) no-repeat 230px 100px;
}
ここまで----------------------------------------—-＞
スタイルシートのこの場所で背景画像を指定してますのでｉｄはＨｅａｄｅｒとしております。
ＤＩＶ ＳＴＹＬＥ＝で先ほどの透過画像の位置を調節しています。画像といっても透明ですので見えませんが、かろうじて枠線だけは見えます。(この枠線は後で＜ＩＭＧ～の所のＢＯＲＤＥＲ＝”２” をＢＯＲＤＥＲ＝”０” に変えることで消します。）
あとは、ブラウザで見ながらＬＥＦＴ：の数字と、ＴＯＰ：の数字を調節してうまく重なるまで訂正してはアップロードして確認するを繰り返します。（結構根気がいりました）
うまく合わせたら最後に枠線を消すために、＜ＩＭＧ ＳＲＣ～以降のｂｏｒｄｅｒ＝”２” を ”０” に書き換えます。そうすると以下のようになります。(例）
<img src="img/blank.gif" alt="" width="530" height="102" border="0">
最後に
この方法ですと、インターネットエクスプロラーとファイヤーフォックスで少し縦方向の位置がずれました。私の場合はそんなにシビアには追求しませんでしたのでインターネットエクスプロラーの方でぴったりに合わせました。ファイヤーフォックスで見るとリンク位置(透過画像の位置)が若干10ピクセルほど、下にずれています。
コメント