【WordPress】イメージマップを作成し画像に複数リンクを設置する方法

とうこ(@ouchiworks_toko)です。

 

この記事では、イメージマップ(クリッカブルマップ)を作成し、WordPress(ワードプレス)の記事の画像に複数リンク(別々のリンク)を設置する方法を解説します。

 

具体的には以下の画像のようなものを作ります。(積み木の画像をクリックしてみてください)

 

この記事を読むと、イメージマップ作成で超面倒なリンクを配置する時に必要な画像の範囲指定(座標の設定)を簡単にすることができますよ!

 

この記事を読むとできるようになること

・1枚の画像に複数リンクを設置することができる

 

当サイトで使っているWordPressテーマ「THE THOR

【当サイト限定】購入特典はこちら

イメージマップで画像に複数リンクを設置する方法

この記事では、下記の画像を使ってイメージマップを作成する手順を解説します。

 

WordPress(ワードプレス)の記事の1つの画像に複数リンクを設置する手順は以下のとおりです。

① ワードプレスに使用するサイズの画像を準備する

② 「HTML Imagemap Generator」にアクセスして、画像をアップロードする

③ リンクさせたい画像の範囲を指定する
④ 生成されたコードをコピーする

⑤ ワードプレスのテキストエディタにコードを貼り付けリンク先を入力する

 

この記事では、イメージマップを作る時に「HTML Imagemap Generator(HTMLイメージマップ ジェネレーター)」を使います。

 

イメージマップは、画像を埋め込む「img要素」、マップを定義する「map要素」、リンク領域を設定する「area要素」、この3種類の要素で構成されています。

 

「HTML Imagemap Generator」を使うと、簡単な操作を行うだけでイメージマップで使われる3種類の要素が書かれたコードを自動生成してくれるので、自分でリンクの座標を調べたり微調整する必要がなくなります。

 

では、手順どおりやっていきましょう。

 

ワードプレスに使用するサイズの画像を準備する

ワードプレスにアップロードする画像と、次の手順のHTML Imagemap Generator」で使う画像は同じものを使います。

 

ワードプレスに使用するサイズの画像を準備してください。

 

「HTML Imagemap Generator」にアクセスして画像をアップロードする

HTML Imagemap Generator」にアクセスします。

Imagemap の HTML コードを作成するジェネレーターです。…

 

ワードプレスに使用するサイズと同じ画像を、ドラッグ&ドロップしてアップロードします。

 

「HTML Imagemap generator」に画像が表示されます。

 

リンクさせたい画像の範囲を指定する

リンクさせたい画像を四角で範囲指定したい場合

「矩形(くけい)を描く」をクリックします。

 

次に、リンクさせたい画像部分をドラッグします。すると、右側にコードが自動生成されます。

 

リンクさせたい画像部分に表示される青色の四角をクリックすると、範囲を広げたり狭くすることができます。なお、範囲を変更すると右側のコードが新しいコードに自動生成されます。

 

リンクさせたい画像を円で範囲指定したい場合

「円を描く」をクリックします。

 

次に、リンクさせたい画像部分をドラッグします。すると、右側にコードが自動生成されます。

 

リンクさせたい画像を多角形(四角と円以外)で範囲指定したい場合

「多角形を描く」をクリックします。

 

次に、リンクさせたい画像部分の頂点(角:かど)をドラッグしていきます。

 

最後に、Escキー(エスケープキー))をクリックします。

WindowsのEscキーの位置
MacのEscキーの位置

 

すると、右側にコードが自動生成されます。

 

生成されたコードをコピーする

「HTML Imagemap generator」の右側に表示されているコードを範囲指定してコピーしてください。

 

なお、コードの右上にある「RAW」をクリックするとコード全体が表示されるので、こちらをコピーしてもよいです。

 

ワードプレスのテキストエディタにコードを貼り付けリンク先を入力する

まず、ワードプレスの投稿画面を開き、「テキスト」をクリックします。

次に、テキスト欄に「HTML Imagemap generator」でコピーしたコードを貼り付けます。

「HTML Imagemap generator」でコピーしたコード

<img src=”img2351.png” usemap=”#ImageMap” alt=”” />
<map name=”ImageMap”>
<area shape=”rect” coords=”128,101,272,209″ href=”#” alt=”” />
<area shape=”circle” coords=”202,61,29″ href=”#” alt=”” />
<area shape=”poly” coords=”95,211,97,393,152,398,151,274,240,269,236,393,297,396,295,212,295,212″ href=”#” alt=”” />
</map>

 

ワードプレスでイメージマップを使うためには、「HTML Imagemap generator」でコピーしたコードの「画像のURL」と「リンク先のURL」を任意のURLに置き換える必要があります。

「画像のURL」を置き換える

「HTML Imagemap generator」でコピーしたコード

<img src=”img2351.png” usemap=”#ImageMap” alt=”” />
<map name=”ImageMap”>
<area shape=”rect” coords=”128,101,272,209″ href=”#” alt=”” />
<area shape=”circle” coords=”202,61,29″ href=”#” alt=”” />
<area shape=”poly” coords=”95,211,97,393,152,398,151,274,240,269,236,393,297,396,295,212,295,212″ href=”#” alt=”” />
</map>

image2351.png」は「HTML Imagemap generator」でアップロードした画像です。ここに「ワードプレスにアップロードした画像のURL」を挿入します。

 

<img src=””> ← “と” の間に「ワードプレスにアップロードした画像のURL」を挿入する

 

まず、投稿画面にある「メディアを追加」をクリックしHTML Imagemap generator」でアップロードした画像と同じ画像をアップロードします。

 

画像をアップロードしたら、画面右下にある「URLをクリップボードにコピー」をクリックして、ページを閉じます。

 

ワードプレスのテキスト画面で、「HTML Imagemap generator」でアップロードした画像のファイル名を「メディアを追加」でコピーした画像のURLに置換えます。

修正前

<img src=”img2351.png” usemap=”#ImageMap” alt=”” />
<map name=”ImageMap”>
<area shape=”rect” coords=”128,101,272,209″ href=”#” alt=”” />
<area shape=”circle” coords=”202,61,29″ href=”#” alt=”” />
<area shape=”poly” coords=”95,211,97,393,152,398,151,274,240,269,236,393,297,396,295,212,295,212″ href=”#” alt=”” />
</map>

修正後(「メディアを追加」でコピーした画像のURLに置換えた)

<img src=”https://ouchiworks.net/wp-content/uploads/2021/10/img2351.png” usemap=”#ImageMap” alt=”” />
<map name=”ImageMap”>
<area shape=”rect” coords=”128,101,272,209″ href=”#” alt=”” />
<area shape=”circle” coords=”202,61,29″ href=”#” alt=”” />
<area shape=”poly” coords=”95,211,97,393,152,398,151,274,240,269,236,393,297,396,295,212,295,212″ href=”#” alt=”” />
</map>

 

「リンク先のURL」を置き換える

<img src=”(ワードプレスにアップロードした画像のURL)” usemap=”#ImageMap” alt=”” />
<map name=”ImageMap”>
<area shape=”rect” coords=”128,101,272,209″ href=”#” alt=”” />
<area shape=”circle” coords=”202,61,29″ href=”#” alt=”” />
<area shape=”poly” coords=”95,211,97,393,152,398,151,274,240,269,236,393,297,396,295,212,295,212″ href=”#” alt=”” />
</map>

 

#」に「リンク先のURL」を挿入します。この記事ではWikipediaの記事をリンクします。

 

なお、「HTML Imagemap generator」で囲った矩形(くけい)、丸および多角形のコードは以下のとおりです。

<area shape=”rect”>   :矩形(=四角形)

<area shape=”circle”> :丸

<area shape=”poly”>   :多角形

 

修正前

<img src=”https://ouchiworks.net/wp-content/uploads/2021/10/img2351.png” usemap=”#ImageMap” alt=”” />
<map name=”ImageMap”>
<area shape=”rect” coords=”128,101,272,209″ href=”#” alt=”” />
<area shape=”circle” coords=”202,61,29″ href=”#” alt=”” />
<area shape=”poly” coords=”95,211,97,393,152,398,151,274,240,269,236,393,297,396,295,212,295,212″ href=”#” alt=”” />
</map>

修正後

<img src=”https://ouchiworks.net/wp-content/uploads/2021/10/img2351.png” usemap=”#ImageMap” alt=”” />
<map name=”ImageMap”>
<area shape=”rect” coords=”128,101,272,209″ href=”https://ja.wikipedia.org/wiki/%E5%9B%9B%E8%A7%92%E5%BD%A2” alt=”” />
<area shape=”circle” coords=”202,61,29″ href=”https://ja.wikipedia.org/wiki/%E4%B8%89%E8%A7%92%E5%BD%A2” alt=”” />
<area shape=”poly” coords=”95,211,97,393,152,398,151,274,240,269,236,393,297,396,295,212,295,212″ href=”https://ja.wikipedia.org/wiki/%E5%87%B9” alt=”” />
</map>

 

これで、ワードプレスのイメージマップのPC表示は完成です。

 

なお、下記のように、同じ記事にイメージマップを複数掲載したい場合は、以下のコードを加筆修正してください。

積み木のイメージマップのコード

<img src=”https://ouchiworks.net/wp-content/uploads/2021/10/img2351.png” usemap=”#ImageMap” alt=”” />
<map name=”ImageMap“>
<area shape=”rect” coords=”128,101,272,209″ href=”https://ja.wikipedia.org/wiki/%E5%9B%9B%E8%A7%92%E5%BD%A2″ alt=”” />
<area shape=”circle” coords=”202,61,29″ href=”https://ja.wikipedia.org/wiki/%E4%B8%89%E8%A7%92%E5%BD%A2″ alt=”” />
<area shape=”poly” coords=”95,211,97,393,152,398,151,274,240,269,236,393,297,396,295,212,295,212″ href=”https://ja.wikipedia.org/wiki/%E5%87%B9″ alt=”” />
</map>

煙突と煙のイメージマップのコード

<img src=”https://ouchiworks.net/wp-content/uploads/2021/10/chimney-1.jpg” alt=”” usemap=”#ImageMap-1” />

<map name=”ImageMap-1“> <area alt=”” coords=”116,36,385,172″ shape=”rect” href=”https://ja.wikipedia.org/wiki/%E7%85%99″ /> </map>

<img src=”ワードプレスにアップロードした画像のURL” alt=”” usemap=”#ImageMap” />

<map name=”ImageMap“>

イメージマップを複数作成する場合は、赤字の箇所を画像ごとに任意の文字列に変えてください。

 

ワードプレスのイメージマップをレスポンシブ対応する方法はこちらの記事をご覧ください。

WordPress

とうこ(@ouchiworks_toko)です。   この記事では、WordPress(ワードプレス)の記事に設置したイメージマップ(クリッカブルマップ)を、パソコン以外のデバイス(タブレットやスマホ)も正常に[…]

/* イメージマップ (クリッカブルマップ)用コード */