こんにちは！
サクライです。
クリッカブルマップを作成して、「完成した！」と思っても、携帯で確認すると凄くずれていたりすることは良くあります。
それは、レスポンシブル設定にしておくと、自動でマップの大きさが変更になっても、元のマップのクリック領域の設定のままになっているからです。
ですが、○○○を使えば、画像の大きさが自動調整されても、その比率に合わせてクリック領域を指定した範囲も自動で調整してくれるんです。
いろいろ調べましたが、ネット情報では現在のところこれしか対応する方法がないようでしたので、絶対に習得しておきたい技術です。
この○○○の使い方は、便利な割には設定は超カンタンだとどのサイトにも書いてあります。
確かにhtmlをしっかり理解している人なら、ものすごくカンタンなことだと思います。
ですが、初心者の僕はできるようになるまで5時間かかりました、、、
しかも、参考サイトはほとんどが2012～2016年までの古いものばかりで不安になりますよね。
今回は、僕のような初心者を対象にしながら、自分がした間違いも交えつつ、解説していきたいと思います。
Contents
プラグインをダウンロード
まずは、プラグインをダウンロードしましょう。
GitHubのページからjsファイルを取得します。
画面右側にある、「Clone or download」という緑色のバナーをクリックして取得くださいね。
任意の場所に置く
ダウンロードしたらzipファイルを解凍します。
使うのは「jquery.rwdImageMaps.min.js」だけになるので、これをサーバーに置いてくださいね。
下記にコードを書いているので、下記のアドレスにおいて置くとそのままコピペで使えるようになると思います。
■格納フォルダ名
https:/[自サイトのアドレス]/wp-content/plugins/js
※[自サイトのアドレス]のところには、あなたのサイトのアドレスを記載してくださいね！
発動！コードを書く
jquery.rwdImageMaps.min.js”のアドレス指定と、発動指令を記載する
では、実際に動かしてみましょう！
「jquery.min.js」はサイトから借りてきていますので、このアドレスを書いています。
コピペして使うは、[自サイトのアドレス][画像名]のところを直して、使ってくださいね。
また、このコードを書く位置ですが、同じページ内にある、クリッカブルマップの直前にい書いています。
なので、この直後にクリッカブルマップが続きます。
|
1 2 3 4 5 6 7 8 |
<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://[自サイトのアドレス]/wp-content/plugins/js/jquery.rwdImageMaps.min.js"></script> <script> $(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); }); </script> |
うまくいかない時は、こんなミスをしています
コードを書いても動作しない場合は、何かミスをしています。
ここで、考えられる可能性をいくつかあげてみましたので、もしうまくいかない人は1つずつ照らし合わせてみてくださいね。
置き場所の指定間違い [https:をhttp:にしてる等]
サイトからコピペをすると、「http:」のアドレスで書かれてあることが多いので、「https」にちゃんと変更しておきましょう。
（※これは、古いサイトからの参考サイトのソースをコピペするとよくあります。これを間違うと発動しません。）
もちろん、「http:」で書いてしまうと発動しません。
私は、これのミスに気づくのに一番時間がかかりました笑
本体を書いていない
ダウンロードして、FTPにアップしたファイルのみしか発動させていないことがありえます。
「jquery」の本体もしっかり記載してくださいね。
本体のurlは、下記の部分になります。
|
1 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
コードを書く場所
コードはヘッダーに書くというサイトも見かけますが、使いたいクリッカブルマップと同じページ内のhtmlに記載しても動作します。
ちなみに、ヘッダーに書いた場合は動作しませんでした。
また、</body>の後が良いとか、座標を書いた後が良いとかありますが、座標コードの前においても、自分の方では問題なく動作しました。
画像の大きさを指定していない
画像の大きさを書かなくても問題と書かれているサイトもありますが、僕のサイトでは書かないとちゃんと動きません。
英語の公式サイトでも書いた方が良いという記載もありますので、必須になると思います。
下記のように、”px”や”％”を記載せずに画像のサイズを書きましょう。
width=”399″ height=”559″
画像のサイズの確認方法は、windowsなら「ペイント」という備え付けのツールで確認することができます。
実際に動いたコード
では最後に、実際に私のサイトで動いているコードを書いておきます。
発動のコードとクリッカブルマップは、私のサイトでは連続で書いていますよ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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://[自サイトのアドレス]/wp-content/plugins/js/jquery.rwdImageMaps.min.js"></script> <script> $(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); }); </script> <img class="image_map" src="https:[自サイトのアドレス]/wp-content/uploads/2018/11/[画像名].jpg" alt="" usemap="#ImageMap" width="560" height="578" /> <map name="ImageMap"> <area alt="01" coords="2,490,53,543" shape="rect" href="[リンク先のurl]" /> <area alt="02" coords="59,490,110,543" shape="rect" href="[リンク先のurl]" /> </map> |
まとめ
今回、このようにjQueryのおかげで無事動作しました。
jQueryってうのは、今回のようにレスポン渋るに対応するだけでなく、画像にカーソルを合わせると別画像になったり、画面の大きさによって画像を変えたりと、かなりいろんなことに対応しているようです。
覚えておくと、サイトのクオリティはかなりあがりそうなので覚えておきたいテクニックですね！