レスポンシブに対応したクリッカブルマップを作る

クリッカブルマップ（イメージマップ）を作ってほしいと相談を受けて、レスポンシブだからどうしようかなとググったら素敵なjQuery-rwdImageMapsにたどり着いたのでブックマーク

デモ

配布先デモ

配布

jQuery-rwdImageMaps　
使い方もgithubにのってます。

クリッカブルマップ生成サイト

上記のjQuery-rwdImageMapsにも使えます。
HTML Imagemap Generator

WordPressでもクリッカブルマップを使いたい

1. HTML Imagemap Generatorでクリッカブルマップを作成する
2. jQuery-rwdImageMapsでレスポンシブに対応させる（必要なjsファイルはテーマフォルダ内に入れて、クリッカブルマップが欲しいページにのみ条件分岐で必要なソースコードを出力させる）
3. FancyBox for WordPressをインストール有効化する
4. 作成したクリッカブルマップのソースコードはHTMLブロックに張り付ける
5. areaタグ内に data-fancybox="gallery0" をつける（複数areaがある場合はgallery1,gallery2とdata-fancyboxの値を変える）

data-fancybox="gallery"のサンプル

<img src="クリッカブルマップのベースになる画像URL" usemap="#ImageMap" alt="画像の説明">
<map name="ImageMap">
  <area shape="rect" coords="23,65,236,88" href="クリックしたときの画像のURL" alt="画像の説明" data-fancybox="gallery0">
  <area shape="rect" coords="23,90,241,111" href="クリックしたときの画像のURL" alt="画像の説明" data-fancybox="gallery1">
  <area shape="rect" coords="22,113,267,136" href="クリックしたときの画像のURL" alt="画像の説明" data-fancybox="gallery2">
</map>