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をコピーしました