前回の続きです。
イメージマップの元になる画像を用意し、名前をつけました。
画像の座標もメモして準備が整ったところまででした。
今回はイメージマップを作り、リンクを設定する方法です。
イメージマップの名前の指定
マップの名前(例では“#umap”)を決めたら
イメージマップ用のマップを作成するために「name属性」を使ってマップ名を指定します。
次のように記述します。
<map name=”umap” >
イメージマップの作成（個別リンクを作る）
※WordPressの投稿画面の「テキスト」モードで記述していきます。
マップに使用する画像を読み込みます。
画像の下などに次のように記述してみましょう。
基本的に次のように記述したら間に好きなだけリンクする要素を入れていきます。
<map name=”umap” > ←マップの名前を指定
↑
この間（マップ名を指定してからマップ終了のタグの間に）に座標でクリックする範囲の形を指定してリンクを設定します。
↓
</map > ←マップ終了のタグ
間にいれる要素
要素の意味
area shape=”形状”
coords=”座標”
href=”リンク先”
alt=”代替え文字”
マップ名を指定したタグと終了タグとの間に入れる一連の書き方は以下のようになります。
<map name=”umap” > ←マップの名前を指定
<area shape=”rect” coords=” ここに座標をいれる“href=”リンク先のURL” > ←四角形
<area shape=”poly” coords=” ここに座標をいれる“ href=”リンク先のURL” > ←多角形
<area shape=”circle” coords=” ここに座標をいれる“ href=”リンク先のURL” > ←円形
</map > ←マップここまでの意味
イメージマップ作成の例
猫の写真に赤枠のような範囲でリンクを設定すると次のようになります。
※リンク先は架空のものです。
画像が表示されない場合は
なんらかの事情で画像が表示されないと、イメージマップは役にたたなくなります。
また、画像が表示されていても、マウスが使えない環境では利用しにくくなります。
そのため、イメージマップ上で設定しているすべてのリンク先については、別にテキストリンクなども用意しておくことも必要かもしれません。
例では、別のページへのリンクを設定していますが、同じページ内の離れた場所へのリンクもできます。
その場合はリンク先に先にアンカーを設定しておきます。
詳しくは こちらの記事 を参考にしてください。
1枚の画像でいろいろなところへリンクするイメージマップは作ってみると楽しいですよ～。
ブログ作りのイメージも広がります。
是非試してみてくださいね（＾＾）
スマホでズレる場合の解決方法をＵＰしました。
前の記事へ
1枚の画像で複数リンク！WordPressでイメージマップを作ってみた
次の記事へ
WordPressテーマStinger3の見出しタグのカスタマイズ
少しわかりづらいので、こちらも参照してください
WordPressのイメージマップにSmartArtを使う時の手順
