画像にリンクを貼る方法

2019年7月5日

画像をクリックするとリンク先に移動できるようにする。

サイトでよくある画像をクリックすると別のページに移動できたり、ボダンをクリックすると別ページへ移動できる方法です。

ショッピングページにもよくある画像をクリックして拡大して表示するということもできます。

クリックすると拡大します。

画像をリンクするようにするHTMLコード

HTML

<a href="リンク先のURL "><img src="画像のURL"height="高さ"width="横幅"alt="画像の説明文"></a>

別のタグで開くようにする

上記コードにtarget="_blank"を追加。

HTML

<a href="リンク先のURL "target="_blank"><img src="画像のURL"height="高さ"width="横幅"alt="画像の説明文"></a>
別タグで開くようにすると見ていたページを閉じるとき、必要なページまで閉じてしまうミスがなくなりますよね。

画像の枠線を消す。

border=”0”を追加する。

HTML

<a href="リンク先のURL "><img src="画像のURL"height="高さ"width="横幅"alt="画像の説明文"border=”0”></a>