『記事に貼った画像をクリックして別ページに移動するようなリンクを設置したいですが、HTMLがわかりません。。やり方を教えてください。』

こんな疑問にお答えします。

ブログを書いていて、記事上の画像クリックから別ページへ飛ぶようなリンク設定をしたいことがあります。

ここではHTMLでの実装方法と、WordPress機能を使った方法をご紹介します。

この記事でわかること
  • HTMLで画像を表示するimgタグの使い方
  • HTMLでリンクを設定するaタグの使い方
  • 画像にリンクを設定する方法

HTMLで画像を表示するimgタグの使い方

画像を表示するためには、imgタグを使用します。さらにimgタグの中にはsrcaltという2つの属性をセットで記述します。

src属性:画像のパス(場所+ファイル名)を記述
alt属性:画像の説明を記述

具体的には以下のような感じです。

<img src=”画像の場所+ファイル名.jpg” alt=”画像の説明”>

alt属性は必ず書く理由

imgタグで画像を表示するときは、必ずalt属性に画像の説明文を入れるようにしましょう。alt属性は代替テキストといって、画像の代わりになるためです。

たとえば、何かしらの理由で画像が削除されたような場合、画像が表示される代わりに代替テキストの内容が表示されます。

あとは、音声読み上げ機能のあるブラウザでは、画像の代替テキストの内容が読み上げられます。

代替テキストに書く説明文は画像の概要を表す簡単なテキストを入れておくと良いです。

画像サイズを指定する方法【width属性とheight属性】

実際の画像のサイズよりも小さく表示したい、といったこともあるかと思います。そんな場合は、width属性height属性を使用することで、画像のサイズを任意の大きさに変更することができます。

width:画像の横幅

height:画像の高さ

具体的には以下のとおり指定します。

<img src=”画像の場所+ファイル名.jpg” alt=”画像の説明” width=”640″ height=”420″>

widthとheightに入れる値はピクセル(px)単位です。上の例なら、横幅が640px、高さが420pxということになります。

HTMLでリンクを設定するaタグの使い方

次はHTMLでリンクを設定する方法を解説します。リンクを設定するにはaタグを使います。アンカータグという呼び方もあります。

aタグにはhref属性を必ず記述します。

href:リンク先のパス、ファイル名(URL)

hrefには、リンクをクリックしてもらった後に移動してほしいリンク先のURLを指定します。

aタグは次のように記述します。

<a href=”リンク先のパス、ファイル名(URL)”>テキスト/画像</a>

リンク先を新しいタブで開くHTMLの書き方

リンクをクリックしてもらったとき、新しいタブで開いてほしい場合があります。

たとえば、記事内で外部サイトを引用するとき、今のページを閉じてほしくない場合は外部サイトへのリンクは新しい(別の)タブで開くことがあります。

この場合、aタグにtarget属性をつけ、次のように記述します。

<a href=”リンク先のパス、ファイル名(URL)” target=”_blank“>テキスト/画像</a>

この方法で設定されたリンクをクリックすると、今のタグではなく、新しいタグでリンク先のページが開かれます。

画像にリンクを設定する方法

ここまで解説してきた知識を活かし、いよいよ画像にリンクを設定してみましょう。次のようにHTMLを記述します。

<a href=”リンク先のパス、ファイル名(URL)” target=”_blank“><img src=”画像の場所+ファイル名.jpg” alt=”画像の説明”></a>

記事で画像をクリックしてみてください。リンク先のページへ移動できたでしょうか。

WordPress機能を使った画像へのリンク設定方法【簡単】

WordPressを使用している方は、WordPressの機能で簡単に画像にリンクを設定することができます。

まずはWordPressの投稿画面から、[メディアを追加]をクリックし、挿入したい画像を選択します。

画像を選択して、[投稿に挿入]をクリックします。

 

ビジュアルモードで画像が表示されていることを確認します。

続いて、画像上でクリックし、画像が選択されている状態で、[挿入]をクリックし、リンク先のURLを入力します。

あとはプレビュー画面で画像をクリックしてみて、目的のリンク先へ移動することを確認してください。

まとめ

HTMLで画像にリンクを設定する方法、WordPressにて画像にリンクを設定する方法を解説してきました。リンクはテキストに設定することもできますが、テキストだけでなく画像にも設定することで、記事が華やかになると思います。参照してほしいリンク先を設定するので、どうせならクリックしたくなるボタンを作りたいですよね。文字よりも画像の方が直観的にリンク先の内容を伝えることもできるかと。