ホームページを作っていると、
・画像をクリックしたら別ページへ移動させたい
・バナーのように使いたい
・文字リンクだけだと目立たない
このようなときもありますよね？
そこでこの記事では、初心者でもすぐできるHTMLでリンク画像を作る方法をわかりやすく解説します。
ホームページでは、画像をリンクとして使いたいこともよくあるので、ぜひ参考にしてくださいね！
HTMLで画像がクリックできないよくある原因
まずは、HTMLで画像がクリックできないよくある原因からお伝えします。
うまくいかない理由を見てみましょう。
imgタグだけ使っている
<img src="sample.jpg">これだけでは、画像は表示されるだけでクリックできません。
aタグで囲んでいない
リンクは必ず aタグ を使います。
書き方を間違えている
閉じタグ忘れなどで動かないことがあります。
HTMLでリンク画像を作る基本の書き方
次に、HTMLでリンク画像を作る基本の書き方をお伝えします。
こちらが一番シンプルな方法です。
<a href="page.html">
<img src="sample.jpg">
</a>これだけで画像をクリックすると page.html に移動します。
なぜこれで動くのか
a タグがリンク、
その中に img を入れているだけです。
外部のホームページへ飛ばすリンク画像
外部のホームページへ飛ばすリンク画像について、お伝えします。
外部サイトへも同じ方法でOKです。
<a href="https://example.com">
<img src="banner.jpg">
</a>別タブで開くリンク画像の作り方
別タブで開くリンク画像の作り方をお伝えします。
外部サイトは別タブがおすすめです。
<a href="https://example.com" target="_blank">
<img src="banner.jpg">
</a>target="_blank" を追加するだけです。
画像サイズを調整しながらリンクにする方法
画像サイズを調整しながらリンクにする方法をお伝えします。
サイズを指定する場合
<a href="page.html">
<img src="sample.jpg" width="300">
</a>スマホ対応する場合（おすすめ）
<a href="page.html">
<img src="sample.jpg" style="max-width:100%; height:auto;">
</a>これで画面サイズに合わせて縮小されます。
よくある失敗と直し方
よくある失敗と直し方について、ご紹介します。
aタグの閉じ忘れ
<a href="page.html">
<img src="sample.jpg">👉 必ず </a> を入れましょう。
リンク先が間違っている
👉 ファイル名・URLを確認しましょう。
（だいたい、このミスでリンク先のファイルがない、という結果になります）
画像が小さすぎる
👉 width指定で調整すると見やすくなります。
初心者向けのリンク画像の基本形
初心者向けのリンク画像の基本形をご紹介します。
通常リンク画像
<a href="page.html">
<img src="sample.jpg">
</a>別タブリンク画像
<a href="https://example.com" target="_blank">
<img src="banner.jpg">
</a>スマホ対応型
<a href="page.html">
<img src="sample.jpg" style="max-width:100%; height:auto;">
</a>まとめ
「HTMLでリンク画像を作る方法｜画像をクリックできるようにする手順」はいかがでしたでしょうか？
HTMLでリンク画像を作るのはとても簡単です。
✔ aタグでimgを囲む
✔ 別タブも追加できる
✔ サイズ調整も同時にできる
これだけで、バナーやボタンがすぐ作れますよ。
ちなみに、ホームページではバナーやボタンを使いすぎると、
クリック率がとても下がります。
そのため、本当にクリックしてもらいたいところにだけ、
バナーやボタンを分かりやすく表示するのがコツです。
あとは、そのバナーやボタンをクリックしてもらって、
申し込みを取るという流れがとても良いので、ぜひ参考にしてくださいね！
（私も、バナーはボタンはほんのわずかしか使わないです）
