WordPressでimage mapがずれてしまう

更新日: 2019-03-20

wordpressでimage mapを使い、画像の一部分にのみにリンクを貼る!ということをやってみました。こうすると、画像の特定の部分をクリックすることで別のページに読者を誘導させたりすることが可能に!

が、なぜかmapで指定したクリックする部分がずれてうまくクリックできない。。原因と対処法を調べたのでメモしておきます。

画像の一部分にリンクを貼る

これを実現するには、どうやらimage mapという機能を使えば、HTMLで記述できるようです。記述方法は、このような感じでクリックさせたい画像のimgの部分にusemapのパラメータを加えます。

<img src="****" alt="" usemap="#ImageMap" />

そして、usemapで指定した名前と同じ名前でmappingを定義します。定義はimgの直後などに書けば大丈夫です。mapping定義方法は以下のような書式で書きます。

<map name="ImageMap">
  <area alt="" coords="90,32,128,67" shape="rect" href="****" />
</map>

coordsの項には画像上の座標を入れます。正方形で指定する場合は、左上と右下の二点の座標の指定が必要です。share=”rect”は形を正方形にするための指定で、href部分にリンクURLを記述します。これで、usermap=”#ImageMap”を指定した図形のcoordsで指定した座標部分をクリックすると、hrefで指定したリンクに飛ぶことができます!

この座標の設定は大変で、一旦画像をペイントなどのソフトに貼ってメモを取ってもいいですが、以下のページで紹介されているHTML Imagemap Generatorを使うととても楽です。

座標がずれる

ここで問題が発生!mapの部分で指定した座標の場所ではクリックできず、狙った場所とちょっとずれた場所でクリックできてしまう。。

色々調べてみると、wordpress 4.4からレスポンシブイメージという機能が使えるようになっているようで、これが悪さをしているのではないかと思いました。レスポンシブイメージについては以下のサイトが詳しいです。

対処方法

もし、このレスポンシブイメージが悪さをしているとすると、クライアント側のブラウザによって画像サイズが自動で変更されてしまうために座標がずれていると考えられます

追加で色々と調べると、以下のサイトで紹介されているように、jqueryプラグインのRWD image mapsを使えばうまくいきそう

このjqueryのプラグインをwordpressに読み込ませたいが、WordPressプラグインで何かいいのがないかと探していると、ちょうど良さそうなのを発見!

Responsive image map プラグイン

最終更新日がちょっと古いのが気になりますが、とりあえずこのプラグインをインストールして有効化すると綺麗にリンクがmapされるようになりました!

image map はプラグインの影響を受けやすい

こうして、キレイにmapされるようになったのですが、wordpressで使っているpluginによってはこれでも動きません。。私が遭遇したのは以下の2つのプラグインです。

まず、Autoptimizeプラグインなどを使って、JQueryを非同期で読み込んでいると、これらの設定をしてもリンクがずれてしまいました。私の場合は、Async JavaScriptのプラグインを使って、Async Method を「Defer」に、JQueryを除外するように設定すると、リンクのズレがなくなりました。

また、Lazy Loadプラグインを使って画像を遅延読み込みしている場合にも同様にうまくリンクがマップされませんでした。これは対処法が見つからず、結局Lazu Loadプラグインを使うことを優先し、WordPress投稿上で、image mapを使うことは諦めてしまいました。

WordPressとimage mapは少し相性が悪いような気がしますね。

おすすめ記事

  • 登戸の「ビストロカプリシュー」でおしゃれフレンチディナー!登戸の「ビストロカプリシュー」でおしゃれフレンチディナー! 川崎市登戸駅にある「ビストロカプリシュー」でフレンチディナーを堪能してきました!!登戸駅は、小田急線、南武線の二路線が通る便利な駅ですが、駅前はそれほど開発されておらず、商用施設よりは住宅が多いイメージの街!このビストロカプリシューは、多摩区役所に行く際にいつも前を通って気にな […]
  • 体験記)注文住宅で後悔のない理想の家②物件見学編体験記)注文住宅で後悔のない理想の家②物件見学編 我が家の注文住宅を建てるまでの体験記です。 第二回のこの記事では、不動産屋さんにお世話になり、土地や一戸建てを見学して周ったことについて書きたいと思います。 妻と子供を連れて、かなり多くの物件を見て周りましたが、見て周れば周るほど目が養われていくもので、その地域の […]
  • レイ・カーツワイルの未来予測がかなり面白い!2045年世界はどうなるのか!?レイ・カーツワイルの未来予測がかなり面白い!2045年世界はどうなるのか!? この記事の執筆時点は、2018年、もうすぐ2019年になるような時期です。 2018年は、「AI(人工知能)」というキーワードで、多くの製品やサービスが登場した年でした。AIと聞くと、人間のように思考できるコンピュータのようなイメージを受けますが、現在のコンピュータが持つ […]
  • 宿河原八幡宮 例大祭 に参加してきました!宿河原八幡宮 例大祭 に参加してきました! 地元の宿河原八幡宮にて、例大祭が開催されましたので、参加してきました! 宿河原八幡宮の2018年例大祭は10/6(土)10/7(日)の二日間開催!一昨年にこの宿河原に引っ越してきて今回が初めての参加!私は二日目に参加しました! 神社や宿河原駅の周りには、屋台がいっぱ […]
  • モルディブ新婚旅行で一番重要なのはホテル選び!後悔しないために知っておきたいこと!モルディブ新婚旅行で一番重要なのはホテル選び!後悔しないために知っておきたいこと! 2018年4月に新婚旅行でモルディブへ行ってきました! 実際に行ってみて特に思うのは、モルディブハネムーンは計画時のホテル選びがかなり重要ということです。 うまく自分たちに合ったホテルを選ばないと、 スタッフのサービスがよくない、食事が合わなかった、シュノーケリングで魚が […]
  • 私が独身時に買った中古マンションを売って一戸建てに住むことにした理由私が独身時に買った中古マンションを売って一戸建てに住むことにした理由 私は独身時に中古マンションを購入しました。 そのマンションには6年程住んでいたのですが、 その後結婚し子供が産まれたタイミングで、一戸建てに引っ越すために、購入したマンションは売却しました。 マンションを売却した理由は子供が産まれて手狭になったという理由だけ […]

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA