【WordPress】クリッカブルマップをレスポンシブ対応させる方法

【WordPress】クリッカブルマップをレスポンシブ対応させる方法 WordPress
この記事は約4分で読めます。
カイエダ
カイエダ

catacrico design カイエダです。
今回ご紹介するのは、昔からあるWebデザイン技術を、レスポンシブ対応にする方法です。
WordPress上だと、ひと工夫必要です。

お客様のWebサイトリニューアルで、クリッカブルマップを利用することになりました。

クリッカブルマップとは

別名:クリッカブルイメージマップ,イメージマップ
【英】clickable map, clickable image map, image map
クリッカブルマップとは、クリックが可能なURLを任意の位置に埋め込んだイメージのことである。

クリッカブルマップは、イラストや写真などのイメージ上の特定の場所を円や多角形エリアとして設定して、クリック時に設定したURLにジャンプさせる手法を指す。クリッカブルマップでは、好きな場所にリンクを設定できるので、細かい位置設定が必要な地図やイメージを多用しデザインに凝ったサイトでよく用いられる。
▼出典

クリッカブルマップ&とは - Weblio辞書
クリッカブルマップ&とは?
クリッカブルマップ作成サンプル
クリッカブルマップ作成サンプル。

クリッカブルマップは、「HTML Imagema Generator」などのサイトで作成できます。
あまりフレキシブルではありませんが、HTMLがわかる人にだったら便利なサイトです。

HTML Imagemap Generator
Imagemap の HTML コードを作成するジェネレーターです。
カイエダ
カイエダ

最近ではクリッカブルマップ自体、ニーズがないのか、そんなに見かけなくなりましたね。

もし改良したり、スマホ対応にしたいというときは、もともとのWebサイトにあったクリッカブルマップをそのまま使いたい、というリクエストがあった時ではないでしょうか。
 
現在はスマホでのWebサイト閲覧が当たり前ですが、パソコンからの見た目だけの技術だと、スマホでみた時にクリッカブルマップはうまく作動してくれません。

私が解決したい問題は次です。

  • スマホでもきちんと動くこと(レスポンシブ対応であること)
  • WordPressで動くこと

ということで、以下、クリッカブルマップの作り方は掲載しませんが、WordPressでクリッカブルマップをレスポンシブ対応にする方法を載せておきますね。

解決方法

  1. jQuery RWD Image Mapsをダウンロード((Downroad ZIPというボタンを押す)。
    解凍後、サーバーの任意の場所にFTP等でアップロードします。
    GitHub - stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin
    Responsive Image Maps jQuery Plugin. Contribute to stowball/jQuery-rwdImageMaps development by creating an account on GitHub.
  2. 今回ダウンロードしたのはjQueryですが、WordPress上で動かすには、コンフリクトが発生しうまく動きません。
    そこで以下のコードを、WordPress上マップを設置する記事の中にコピペ!
    記事中に設置することも考慮すると、改行はなくしたほうがいいでしょう。
<script src="(サーバーにアップした場所)jquery.rwdImageMaps.min.js"></script><script>jQuery(document).ready(function(e) {jQuery('img[usemap]').rwdImageMaps();});</script>
カイエダ
カイエダ

本来であれば、jQueryですので “$ (…)“という表記が入るのですが、上記コードでは “$ (…)”を”jQuery“にすべて変更しています。この理由は以下です。

わかったブログさんが見つけてくださった方法を参考にしています。

WordPress上では、jQueryコードはそのままでは動きません。
コンフリクトを防止するため、jQueryお馴染みの$(…)の表記が使えないのです。
$をjQueryに置き換えると、動くようになります。
また、記事中にjavascriptコードを書くと、pタグとかが入ってしまうことがあるので、上記コードは改行をなくしてます。

わかったブログ
カイエダ
カイエダ

これだけで、WordPressでクリッカブルマップがPCでもスマホでも正常に動くようになります。
ご参考になさってくださーーい!

タイトルとURLをコピーしました