ご訪問ありがとうございます。パソコンを使っていて試行錯誤したことを記載した備忘録です。

このブログは移転いたしました。3秒後に新しい移転先へジャンプします。

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSで表示したヘッダーの画像にリンクを貼りたい場合にどうすればよいのか、ということを悩みまして、検索で調べたり自分で試したりしました。完璧とはいえませんがどうにかリンクを貼りました。ここではその手順を述べてみます。


今回やりました方法は、スタイルシートで表示した画像に、透明な画像を重ねてその重ねた画像にリンクを貼るというものです。ですから正確に言えば背景画像にリンクを貼るではなくて、背景画像にかぶせた画像にリンクを貼るです。

まずは背景画像と同じ大きさの透過画像を作ります。私が使ったツールは「JTrim」です。これで作れます。無料です。窓の杜などからダウンロードできます。

JTrimでメニューのファイルから新規作成をクリックします。

画像の大きさを指定します。背景画像と同じ大きさを指定してOKをクリックします。

そしてOKをクリックすると白い画像が登場するのですが周りの背景も白いのでさっぱりわかりません。メニュー「表示」の背景色でバックの色を替えられます。そうすると作った画像がわかります。

最後にこの真っ白な画像を透過するようにします。

メニュー「イメージ」から透過色設定をクリックします。マウスがスポイトのような形になるのでそのまま先ほどの真っ白な画像の上で左クリックします。そうすると先ほどまで真っ白だった画像がチェック模様に変わり透過する画像に変わりました。

あとは保存してください。画像の準備は以上です。




まずは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"の所はCSS内でその背景画像が記載されている所の#以降の文字です。例えばわたしのCSS(スタイルシート)では以下のようになっています。

以下CSS(スタイルシート)より-------------->
#header {
  width: 100%;
  height: 220px;
  margin-bottom: 20px;
  position: relative;
  background: url(img/bg-header.jpg) no-repeat 230px 100px;
}
ここまで-------------------------------------------->


スタイルシートのこの場所で背景画像を指定してますのでidはHeaderとしております。



 DIV STYLE=で先ほどの透過画像の位置を調節しています。画像といっても透明ですので見えませんが、かろうじて枠線だけは見えます。(この枠線は後で<IMG~の所のBORDER=”2” をBORDER=”0” に変えることで消します。)

あとは、ブラウザで見ながらLEFT:の数字と、TOP:の数字を調節してうまく重なるまで訂正してはアップロードして確認するを繰り返します。(結構根気がいりました)

うまく合わせたら最後に枠線を消すために、<IMG SRC~以降のborder=”” を ”” に書き換えます。そうすると以下のようになります。(例)

<img src="img/blank.gif" alt="" width="530" height="102" border="0">


最後に
この方法ですと、インターネットエクスプロラーとファイヤーフォックスで少し縦方向の位置がずれました。私の場合はそんなにシビアには追求しませんでしたのでインターネットエクスプロラーの方でぴったりに合わせました。ファイヤーフォックスで見るとリンク位置(透過画像の位置)が若干10ピクセルほど、下にずれています。

FC2blog テーマ:ホームページ・ブログ制作 - ジャンル:コンピュータ

【2010/01/19 00:59】 | ホームページ作成
トラックバック(0) |
コメント
この記事へのコメント
コメントを投稿
URL:

Pass:
秘密: 管理者にだけ表示を許可
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック