イメージマップをスマホ対応レスポンシブにする（WordPressで）ときに苦労しました。

カスタマイズ

イメージマップをスマホ対応レスポンシブにする（WordPressで）ときに苦労しました。

導入には初心者レベルなのでタイトルのとおり苦労しました。簡単そうに見えるのは勘違いで、時間をかけイロイロ調べた結果解決しました。

おおきく2ステップで作成することができます。

もちろん下記の通りしても解決できる保証も責任もとれませんが、同じような悩みを回避するのに役立てられ場とそのときの事を記事にしました。

我が家の環境は以下の通り

  • 初心者
  • WordPress

利用したモノ

jquery.rwdImageMaps.min.jsはダウンロードしても配信されているモノでもどちらでもOKです。私はダウンロードしてアップロードしました。

実際の流れ

１フッターに下記コードを挿入する。
よくヘッダーに挿入と紹介されている情報を目にしましたが、私の環境ではフッターに挿入で◎になりました。
このとき必ずsrc="以降のjquery.rwdImageMaps.min.jsまでのパスを正確に書くことが大切です。分からなければhttpとhttpsから書いてもOKです。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script>
<script>
$(function(){
  $('img[usemap]').rwdImageMaps();
});
</script>

▼配信されていモノを利用する場合

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<script>
<script>
$(function(){
  $('img[usemap]').rwdImageMaps();
});
</script>

２HTML Imagemap Generatorを使ってイメージマップを作成しコピーでWordPressの記事にソースを張り付ける

これでイメージマップがレスポンシブ対応になって スマホで見てもずれたりしていないと思います。

今回私の環境ではimgのサイズ、with100%指定をしなくてもOKでした。

以上です。

-カスタマイズ