画像にリンクをつける方法

著者情報

たった1行のHTMLコードで、ほぼすべてのウェブサイトにクリック可能な画像を追加できます。必要なのは、画像につけるURLとウェブサイトのURL2つだけです。

押さえておくべきこと

<a href="https://www.wikihow.com">wikiHow</a>というHTMLコードでwikiHow.com へのハイパーリンクが作成され、「wikiHow」がクリック可能になります。
リンクのクリック可能な部分を「wikiHow」という単語ではなく写真にしたい場合は、これを<img src="full-path-to-image.jpg"> というHTMLタグに置き換えます。
この例では、正しいコードは次のようになります。<a href="https://www.wikihow.com"><img src="full-path-to-image.jpg"></a>

方法 1

方法 1 の 2:
HTMLコードを書く

1
HTMLファイルを作成する　テキストエディタを開き、新規作成します。index.htmlというファイル名で保存します。
2
基本のHTMLコードをコピー&貼り付けする　下のHTMLコードを選択してコピーした後、index.htmlファイルに貼り付けます。
```
<a href="DESTINATION URL"><img src="IMAGE URL" /></a>
```
3
画像のURLを探す　インターネットで画像を検索し、画像を右クリックします。ブラウザの種類によって、「画像のURLをコピー」「画像アドレスをコピー」「イメージのアドレスをコピー」をクリックします。
4
画像のURLを貼り付ける　index.htmlファイルに戻り、マウスを使って「IMAGE URL」をクリック&ドラッグして選択し、CTRL + Vで画像のURLを貼り付けます。
5
リンク先のURLを追加する　index.htmlの「DESTINATION URL」を削除し、 https://www.google.com と入力します。
6
HTMLファイルを保存する
7
ウェブブラウザでHTMLファイルを開く　index.htmlファイルを右クリックし、好きなウェブブラウザで開きます。
広告

方法 2

方法 2 の 2:
HTMLコードを理解する

1
アンカータグを理解する　HTMLコードは開始タグと終了タグで構成されています。<a href="">タグが開始タグ、</a>が終了タグです。これはアンカータグと呼ばれ、ウェブページにリンクを貼るために使われます。^{[1]
X
出典文献}
- <aは、ブラウザにリンクの表示を指示します。 hrefは「HTML reference」の略語で、=は" "の間の文字すべてをリンクにするようブラウザに指示します。2つのクオーテーションマークの間にはどんなURLでも入力できます。
- </a>はブラウザにアンカータグを閉じたことを伝えます。
- <a href="">と</a>の間に文字を追加した場合、ウェブページ上でその文字がクリック可能なリンクになります。例えば、<a href="https://www.google.com">Google</a> と書くと、Googleへのリンクを作ることができます。
2
画像タグを理解する　<img>タグは終了タグが不要なタグです。<img src="" />または<img src=""></img>と書けば問題ありません。^{[2]
X
出典文献}
- <imgタグは、ブラウザに画像を表示するように指示します。srcは「source」の略語で、=はブラウザに" "の間の文字を読みそこから画像を取得するように指示します。
- />は、ブラウザに画像タグを閉じるよう指示します。
- 例えば、{{samp[|<img src="https://www.google.com/images/srpr/logo11w.png" />}}と書くと、そのURLにある画像が取得されウェブブラウザに表示されます。
3
コードを使う　<a href="DESTINATION URL"><img src="IMAGE URL" /></a> を使って、HTMLコードを読み込めるウェブページどこにでもクリック可能な画像を追加してみましょう。

広告