イメージマップがスマホでは位置がずれてしまい、予期せぬところにリンクしているという現象が起きました。
コメントをいただきjQuery RWD Image Mapsプラグインの導入でずれを解消できたので備忘録として書きました。
対処
レスポンシブ対応にするための方法をリサーチするとjQuery RWDイメージマップ
を使用するという記事がいろいろ出ていました。
ページ内にjQueryとダウンロードしたファイルを読込むというものです。
プラグインだというので、なにぶんにも無精者の私としては、
そんな面倒をしないでも、いつものプラグイン導入手順
ダッシュボード⇒プラグイン⇒新規追加⇒プラグインを検索⇒インストール⇒有効化。
ができるんじゃないのかな？と、
とにかく試しに、プラグインを検索してみました（＾＾；）
出てきたのはResponsive Image Mapsが一つだけ。
（日にちが経ってからは数が増えていましたが･･･）
う～ん、どうなんだろうと、開発者のページを覗くと、説明に
（引用）
「このプラグインはWordPressで使用するためのRWD Image Maps jQueryプラグインを単にパッケージ化し、WordPressテーマに対応したイメージマップを作成する簡単な方法を提供します。」
とありました。
ふむ、では、これをインストールして有効化すればＯＫ？
それだけではダメなようなので更に
「JAVASCRIPT警告
言うまでもないことですが、RWD Image MapsのjQueryプラグインでは、ユーザーのブラウザでjavascriptを有効にして魔法を働かせる必要があります。」
「RWDイメージマップjQueryプラグイン自体（WordPressラッパーではない）に関する質問や問題がある場合は、GitHubのjQuery RWD Image Mapsプラグインページを参照してください。」
・・・とにかく試してみました（＾ｏ＾；）
Responsive Image Mapsのインストールと有効化
通常のプラグインの導入手順でWordPressのダッシュボードから
「プラグイン」⇒「新規追加」⇒「RWD Image Maps」と入れて検索
インストールしたら「有効化」をクリックします。
プラグインに追加されました。
実行コードを記述する必要があるようです。
クリッカブルマップを使っているページの最後に以下を記述。
書き加えたもの
$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
});
</script>
クリッカブルマップ(イメージマップ)を作る際には、画像を原寸大に対して設定されている必要があります。
座標をとった画像のサイズでメディアライブラリにアップロードします。
大きすぎる画像は縮小されると、座標がずれてしまいます。
使っているテーマなどで違うと思いますが、私の場合はStinger3です。
元画像が少し大きかったようです。
メディアにアップした画像を確認すると、フルサイズにしたのに、少し縮小されていました。
なので、元画像を小さくして、座標を取り直してアップすると改善されました。
スマホでずれるのは確認していなかったのでしばらく気づかずにいましたが、
コメントをいただきズレを確認（＞＜）
このプラグインを導入で解決しました（＾＾； ご指摘ありがとうございました。
これでスマホでもちゃんと指定したところにリンクされました（＾＾）
イメージマップがスマホでずれる さいごに
(￣Д￣;) なんて思っていたけど･･･
1つのページに書くだけでいいようです。
（＾＾）
全部ＯＫです！
