知識0！コピペでOK！イメージマップをレスポンシブにする方法

どうも！こんばんわ！

いや！こんにちわか？

今回の記事は、イメージマップをレスポンシブにする方法をご紹介します。

先日、旅ブログの方でイメージマップを使う必要があったので導入しようとしたのですが、

どうやらイメージマップをワードプレスに導入するにはjava scriptやjQueryなどの知識が必要ということが判明しました。

たぶん、僕と同じで専門知識がほとんどなく記事を書くを専門にしている人は

こういう壁にぶち当たると諦めるか大量の時間を奪われるかのどちらかだと思います。

そこで、この記事では専門知識一切不要！この記事に書いてあることをそのままやれば

サックッとレスポンシブに対応したイメージマップができてしまううれしい内容となっておりまーす。

イメージマップ自体はオンラインツールを使えば簡単に作ることができるのですが

レスポンシブにすることが知識のない僕にとってはめちゃめちゃ大変でした。

僕みたいに時間を無駄に消費して欲しくないので

スパッとレスポンシブにできる方法をお伝えしますね！

ちなみにレスポンシブ対応のイメージマップの作り方をお伝えしますが

細かい理屈や解説はありませんのでご了承ください。

ユウヤ

（ぶっちゃけ深くは理解していないだけなんだけどね…わら）

レスポンシブ対応のイメージマップだけさっさと作りたい人向けの記事となっております。

レスポンシブ対応のイメージマップの作成
イメージマップをレスポンシブ対応にする
イメージマップはサイトの使いやすさが上がる

レスポンシブ対応のイメージマップの作成

とりあえず、まずは僕が作ったレスポンシブ対応のサンプルイメージマップをご覧ください。

ユウヤ

岩手県と兵庫県にリンクが貼ってあるよ！

スマホだと小さいから押しにくいかも…わら

こんな感じのやつを作ることができます。

それでは本題に入ります。

まずはイメージマップを作成していきます。

イメージマップを作れるサイトはいくつかあるのですが、

今回は僕も使用したサイトでご紹介していきます。
HTML imagemap Generator

使用する画像を読み込ませてリンクを貼る位置を決めてイメージマップのHTML を作成します。

こんな便利なものがあるなんて驚きですよね。

触っていると面白くなってきちゃいます。

HTML imagemap Generetorの使い方はこちらの記事でご紹介しています。

超簡単！HTML imagemap Generetorを使ってイメージマップを作る方法

イメージマップをレスポンシブ対応にする

HTML imagemap GeneretorでイメージマップのHTML できたらこれをレスポンシブ対応にしていく必要があります。

このまま出来上がったHTML を記事のテキストエディターに貼り付ければ一応イメージマップは完成なんですが

画像のサイズが変わるとリンクの位置がズレてしまう現象が起こってしまいます。

つまりPCでは正常に表示されるけどスマホやタブレットで見るとリンクが全く関係ないところに貼られている状態になっていると思います。

だからこれから作成したイメージマップがどんな画面に表示されても

ビシッと意図したところにリンクが貼られている状態を作っていきましょう。

注意

専門知識は必要ないと言いましたが、FTPソフトを使ってテキストエディタにコードをコピーする必要があります。

参考【FileZillaの使い方】WordPressでFTPソフトを使おうサルワカ

手順①：ワードプレスにスクリプトを読み込ませる

細かい説明はあえて割愛します。

FTPソフトからテーマの（子テーマを使っているなら子テーマの）フォルダーに入っているfunctions.phpに下記のコードをコピペしてください。

HTML

add_action( 'wp_enqueue_scripts', 'rwdimagemaps_enqueue_scripts' );

function rwdimagemaps_enqueue_scripts() {
  // jQueryプラグインの読み込み
	wp_enqueue_script(
		'rwd-image-maps',
		'https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js',
		array( 'jquery' ),
		'',
		true
	);

  // スクリプトの有効化
	$src = "jQuery('img[usemap]').rwdImageMaps();";
	wp_add_inline_script( 'rwd-image-maps', $src );

}

注意

ワードプレスのテーマエディタから直接コードをコピペすることもできるけど

バックアップや安全性を考えたらFTPソフトを使用した方がいいと思います。