<メモ>レスポンシブルに対応したイメージマップ(クリッカブルマップ)を作る
最近のサイトってレスポンシブルが当たり前になってきましたねえ。
むしろ今時サイトの制作をお願いしておいて、レスポンシブルじゃない方が不思議なくらい。
そんな中、イメージマップを作ることになったのでメモ。
イメージマップ(クリッカブルマップ)って何？
施設案内のサイトにこういうの使っているのかもしれません。
デモを作るのが面倒だったので、公式サイトから見てください。
mattstow.com
レスポンシブルにも適応しているのでウィンドを小さくしても、顔のあたりにリンクが生きていると思います。
絶対座標と相対座標の違いなんですが、これが面倒を極めるのです。
試したこと
サイトの幅を固定してみる
こうすれば絶対座標も相対座標も関係ないんじゃね？と思ったけど、モニタの幅って結構差がある。
小さいモニタだと、スクロールバーが出てしまってダサいので却下。
そもそもレスポンシブル標準対応のテーマを使っていると、スマホサイトのレイアウトが崩れる。
プラグインを探してみる
さらっと対応してくれるプラグインないかな？と探すも、無い。
仕方が無いのでjQueryを使う
結局「RWD Image Maps」を使うことに。これが今の所ベストのようです。
が、各サイトを回ってもワードプレスで使うことを前提に説明してくれていないんですよね。
stowball/jQuery-rwdImageMaps1.リンク先のダウンロードボタンから「Download ZIP」を選んでZIPをダウンロード。
これは流石に説明はいらないですね。ダウンロード後に解凍してください。
2.FTPを開いて「wp-content/themes/使っているテーマ/」の階層のjsディレクトリを探す。
無ければjsディレクトリを作って、先ほどダウンロードしてきたファイル内の「jquery.rwdImageMaps.min.js」をアップロード。
3.テーマのヘッダーファイルに書き込み
管理画面の外観>>テーマの編集の中にheader.phpがあると思うので、以下を書き込む
|
1 2 3 4 5 6 7 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://url/wp-content/themes/テーマファイル名/js/jquery.rwdImageMaps.min.js"></script> <script> $(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); }); </script> |
いや本当はもっとスマートな方法があるんでしょうけど、jsファイルはどこに保管するんだよ！とか
どこから読み込むんだよ！っていうことにもなるので、敢て絶対パスで書いてます。
4.イメージマップを入れたいページにhtmlを書く
|
1 2 3 4 |
<img src="img/sample.png" alt="" usemap="#map"> <map name="map"> <area shape="rect" coords="796,195,1177,395" href="#" alt="サンプル"> </map> |
イメージマップの座標っていちいち調べるのが面倒なので、以下のサイトを使うと便利です。
使いたい画像をドラッグすれば、それぞれ指定した座標のコードを書き出してくれます。便利。
