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

当ブログの記事に共感していただけたら、また読みに来ていただけると嬉しいです。読んでくれる方の数が多くなると、更新するヤル気に繋がります(^^)

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

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時間ほど試行錯誤してしまいました。

関連記事
スポンサーリンク

当ブログの記事に共感していただけたら、また読みに来ていただけると嬉しいです。読んでくれる方の数が多くなると、更新するヤル気に繋がります(^^)

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローしていただけると、ブログ更新を見逃しません

push7 feedly
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です