WordPress&レスポンシブデザインで、map areaタグを使う方法

HTMLでは、画像内にリンクを作ることができます。クリッカブルマップイメージマップと言われるものです。リンクの領域は画像内の座標で指定できます。デモはこちら

ところが、最近のウェブサイトの主流はレスポンシブデザインです。画像が縮小してしまうと、リンクの座標が合わなくなってしまいます。jQueryをつかってゴニョると解決するのですが、WordPressだとjQueryが動かない! その辺の対策をまとめました。

方法

下記コードをマップをWordPress上の設置する記事の中にコピペすればOKです。

jQuery RWD Image Mapsというコードがあるので、ダウンロード(Downroad ZIPというボタンを押す)して解凍。jquery.rwdImageMaps.min.jsというファイルを、サーバーにアップロードしておいてください。上記の「src=”jquery.rwdImageMaps.min.js”」は、アップロードした場所によって変更してください。

WordPressでjQueryを動かす方法

WordPress上では、jQueryコードはそのままでは動きません。コンフリクトを防止するため、jQueryお馴染みの$(…)の表記が使えないのです。$をjQueryに置き換えると、動くようになります。

また、記事中にjavascriptコードを書くと、pタグとかが入ってしまうことがあるので、上記コードは改行をなくしてます。

ぜひお試しを!

参考

今日のわかった

jQuery RWD Image Mapsの情報はすぐに見つかったのですが、Wordpress&jQueryの挙動については知らず、2時間ほど試行錯誤してしまいました。

WordPressデザイン
スポンサーリンク
管理人かん吉をフォローする
わかったブログ

コメント

  1. Pchan より:

    サイトを作成中で、これまで他のサイトを見てどうがんばってもうまくいかなかったのですが、ここに書いてある方法でうまくいき、大変助かりました。ありがとうございました。

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