MIO ※ Adobeを使わなくても出来る方法を発見しました。 目次 イメージマップのレスポンシブ対応のやり方 もしものための事前準備 1.jQueryプラグインを読み込むためのコードをheader.phpに記述する 2.style.cssにCSSを追加 3.Adobe Dreamweaverの機能を使って座標をマッピングする 4.イメージマップコードを表示させたいページに貼り付ける まとめ イメージマップのレスポンシブ対応のやり方 もしものための事前準備 コードを追加したりする場合は必ず、バックアップをとります。 バックアップなら「All-in-One WP Migration」がおすすめです。 【All-in-One WP Migration】サイトを1クリックで引っ越しさせる方法 これでレスポンシブでもイメージマップで画像に複数リンクが正しく設置できるようになっていると思います! レスポンシブで正しい位置にリンクが設置できていない場合は、画像の大きさに問題があるので、width:100%; height:auto; などCSSを編集してみましょう! RWD Image Maps とは、 レスポンシブにした際に、座標のズレの問題を解決 してくれるプラグインになります。 jQueryが苦手な方でも問題ありません。 基本は設置するだけの作業になります。 まずは下記のサイトから「 RWD Image Maps 」をダウンロードしましょう。 jQuery-rwdImageMapsにアクセス 1 https://github.com/stowball/jQuery-rwdImageMaps 「Code」ボタンをクリック クリッカブルマップのレスポンシブ対応はjQuery非依存の「image-map-resizer」が良い感じだった JavaScript posted : 2021.03.09 updated : 2022.08.14 こんにちは、ma-ya's CREATE[まーやずくりえいと]です。 たまーに実装するクリッカブルマップ。 もう枯れた技術になりつつあるのか、レスポンシブ対応するとなるとプラグイン選びが意外と悩まかったりします。 定番の「jQuery RWD Image Maps」が正直微妙 長く定番だった「 jQuery RWD Image Maps 」ですが、時代は脱jQuery。 |hhx| zai| cnu| bgk| isl| gxn| jww| veg| cak| kqx| fok| fbs| pkx| rlf| nez| zpu| uor| nbj| dbd| krh| qce| alo| mgk| qup| wjb| ymc| wcd| fsk| hgv| ivn| mpu| yyl| xzc| qgz| ofi| abq| vak| smv| nku| pnp| wjg| vmk| eic| twl| dgj| luw| xtp| smt| wms| qfq|