挿入した画像をリンクにして好きなページへ飛ばす方法

今回は記事中に挿入した画像をリンクにして、画像をクリックした際に指定したURLにリンクさせる方法について書いてみます。

自作の画像を挿入して画像広告（バナー）のような感じで使えるので知っておくと便利です。記事中に挿入した画像やサイドバーに挿入した画像とかもリンクにして好きなページへリンクさせる事ができます。

MEMO

「ヘッダー画像をリンクにする」という場合には別の方法でリンクにする必要があるので、もし需要があればコメント下さいませ。一応Seesaaブログとアメブロに関してはヘッダー画像をリンクにする方法は追記しておきました。

sigezo

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

画像をリンクにする方法

画像などをリンクにする場合には「画像のコード」と「リンクのコード」の２つを一緒にする必要があります。そのため、この２つのコードをまずは別々に見ていきましょう。その方が理解も早くなります。

まずは基本的な部分を説明しておくと、通常ブログの記事などで画像を挿入し、HTMLが見えるエディタ（タグ編集エディタ）に切り替えて見ると次のような感じのコードの部分があるはずです。

<img src="●●●●.png" />

この部分が画像を表示させるコードですね。pngではなくjpgやgifとなっている場合もあります。これはアップロードした画像の形式によって違います。

さらにブログの設定によってはこのコードに画像の幅（width）や高さ（height）、alt(画像の説明文）、class（スタイルシートで編集するためのクラス名）などが一緒になっている場合もありますよ。こんな感じ。

<img src="http://●●●●.png" alt="画像リンク-1" width="524" height="284" class="alignnone size-full wp-image-4476" />

要はこのimgタグの部分「 < 」から「 > 」囲まれた部分が画像を表示させるコードっていう事です。まずはこれを知っておき、次にリンク部分のコードも見てみましょう。

これも実際にブログ記事内で適当にリンクを貼ってHTMLを見れるエディタ（タグ編集エディタ）に切り替えてコードをみると分かりやすいです。

通常ブログでリンクをさせる場合、例えば記事中で別の記事や別のサイトへのテキストリンクを貼る場合には次のようなコードになっています。

<a href="飛び先URL">テキスト</a>

もしくはこんな感じです。

<a href="飛び先URL" target="_blank">テキスト</a>

2番目の方には「target=”_blank”」というタグが付いていますが、これが付いているとクリックした時に「新しいウィンドウ（新しいタブ）」で開くリンクになるので、同じタブで開いて欲しい場合には「target=”_blank”」の部分を削除して1番目のコードのようにすればOKです。

さて、画像をリンクにすれば良いので、このリンクの「テキスト」と書いてある部分に画像のコードを入れてしまえば画像をリンクにする事ができます。こんな感じ。

<a href="飛び先URL"><img src="●●●●" ;></a>

最初に説明したように画像コードには「width（横幅）」や「height（高さ）」、「alt(画像の説明文)」など色々な情報もくっついていると思うので、それもそのままコピーしてリンクコードの中に入れてしまえば良いという事です。

飛び先URLはクリックした時に飛ばしたいページのURLに書き換えて、後は「target=”_blank”」の有無も自分で設定しておけばOK。

以上が画像をリンクにする方法でした。