この記事で解決するお悩み
- ワードプレスの記事に設置したイメージマップ（クリッカブルマップ）をレスポンシブ対応することができる
この記事では、WordPress（ワードプレス）の記事に設置したイメージマップ（クリッカブルマップ）を、パソコン以外のデバイス（タブレットやスマホ）も正常に表示できるようレスポンシブ対応する方法を、図を使って解説します。
イメージマップ（クリッカブルマップ）の作り方
イメージマップ（クリッカブルマップ）は「HTML Imagemap Generator（HTMLイメージマップ ジェネレーター）」を使うと簡単に作成することができます。
イメージマップの作成手順はこちらの記事をご参照ください.
この記事では、以下のようなイメージマップを用意しました。（積み木の画像をクリックしてみてください）
「HTML Imagemap Generator（HTMLイメージマップ ジェネレーター）」では、イメージマップ を作成することができるのですが、1つ問題があります。
それは、スマホやタブレットなどパソコン以外のデバイスやブラウザの種類によって「イメージマップをずれてしまう」ということです。
イメージマップではHTMLで「areaタグ（area要素）」を使いリンク箇所の領域を指定します。
スマホやタブレットの場合、パソコンと比べて画面幅が小さくなるため画像サイズは縮小されてしまいます。
しかし、レスポンシブ対応にしていないと、area要素のサイズはそのままであるため、リンク箇所がずれてしまいます。
ですので、どのデバイスから見てもイメージマップが正常に表示されるように、イメージマップをレスポンシブ対応しましょう。
WordPressに設置したイメージマップをレスポンシブ対応にする方法
WordPress（ワードプレス）に設置したイメージマップをレスポンシブ対応する手順は以下のとおりです。
ワードプレスに設置したイメージマップをレスポンシブ対応する手順（クリックすると段落に移動します）
「jQuery RWD Image Maps」をダウンロードする
イメージマップをレスポンシブ対応するために「jQuery RWD Image Maps」に必要なファイルをダウンロードします。
「jQuery RWD Image Maps」は、WordPress（ワードプレス）のプラグインではなく、「jQuery（ジェイ クエリー）」のプラグインです。
WordPressのダッシュボードにある「プラグイン」の新規追加から検索しても表示されないので、自分でダウンロードする必要があります。
GitHub社（ギットハブ社）の「jQuery RWD Image Maps」の配布ページにアクセスします。
緑色のボタン「Code」をクリックします。
クリックするとメニューが表示されるので「Download ZIP」をクリックします。
「Download ZIP」をクリックすると、「jQuery-rwdImageMaps-master.zip」というZIPファイルがダウンロードできます。
ZIPファイル「jQuery-rwdImageMaps-master.zip」を解凍（展開）します。
解凍すると4つのファイルが入っています。
jQuery-rwdImageMaps-masterのフォルダに入っているもの
- jQuery-rwdImageMaps.js
- jQuery-rwdImageMaps.min.js（後ほど使います）
- LICENSE
- README.md
「jQuery RWD Image Maps」をサーバーにアップロードする
この記事では、「jQuery RWD Image Maps」のファイルをエックスサーバーにアップロードする手順を紹介します。
エックスサーバー以外のレンタルサーバーを使用している方や、FTPでファイルを転送したい方は各自で調べてください。
うみがえるGoogleなどで「（サーバー名） ファイル アップロード」で検索すると、サーバーへのアップロードする方法が見つかると思います
「jQuery RWD Image Maps」のファイルをエックスサーバーにアップロードする流れ
- エックスサーバーにログインする
- 「ファイル管理」を開く
- 目的の階層にファイルをアップロードする
「XserverアカウントID または メールアドレス」と「パスワード」を入力して「ログインする」をクリックします。
「ファイル管理」を開くと以下のような画面が表示されます。
「jQuery RWD Image Maps」のファイルをアップロードする場所は以下のとおりです。
（ドメイン名）/public_html/wp-content/uploads
まず「自分のサイトと同じ名前のファイル」をクリックします。
うみがえる当サイトのドメインの場合は「wplab.blog」をクリックします）
次に「public_html」→「wp-content」→「uploads」をクリックします。
「ファイルをドラッグ＆ドロップ」または「ファイルを選択」をクリックし、解凍したZIPファイルに入っていた「jquery.rwdImageMaps.min.js」をアップロードします。
「jquery.rwdImageMaps.min.js」をアップロードしたら「アップロード」をクリックします。
「jquery.rwdImageMaps.min.js」（種類：JISファイル）が表示されていたら、アップロード完了です。
WordPressのテーマにコードを設置する
最後に、WordPress（ワードプレス）のテーマにコードを設置します。
この記事では「THE THOR（ザ・トール）」「SWELL（スウェル）」と「GOLD MEDIA（ゴールドメディア）」の子テーマに設置します。
ここから先は「テーマファイルエディター」をカスタマイズするので、不具合が生じた場合は自己責任でお願いします
THE THORにコードを設置する
WordPressの管理画面にログインして、ダッシュボードメニューにある「外観」から「テーマエディター」を選択します。
このような画面が表示されたら「理解しました」をクリックします。
次に「選択するテーマを選択」でTHE THORの子テーマを選択し、「テーマフッター（footer.php）」をクリックします。
うみがえるこの事例のTHE THORの子テーマ名は「THE THOR CHILD」です。
サーバーにある親テーマのファイルを子テーマにアップロードする方法
うみがえるここではエックスサーバーから親テーマのファイルを子テーマにアップロードします。
うみがえるこの事例での…/the-thorは、THE THORの親テーマのファイルを意味します。
うみがえるこの事例での…/the-thor-childは、THE THORの子テーマのファイルを意味します。
画像の部分にコードを入力（コピー&ペースト）します。
入力後「ファイルを更新」をクリックします。
イメージマップ（クリッカブルマップ）用コード（以下をすべてコピーしてください）
/* イメージマップ（クリッカブルマップ）用コード */
<script type=”text/javascript” src=”/wp-content/uploads/jquery.rwdImageMaps.min.js”></script>
<script>
$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
});
</script>
うみがえるこのコードは<body></body>の間に設置すればよいのですが、わかりやすいように</body>の上に設置しました。
「保存」をクリックすれば、レスポンシブ化が完了です。
SWELLにコードを設置する
「SWELL（スウェル）」の子テーマにコードを設置する手順は以下のとおりです。（準備中）
GOLD THEMEにコードを設置する
「GOLD THEME（ゴールドテーマ）」の子テーマにコードを設置する手順は以下のとおりです。（準備中）
正常に動作しなかった場合の対処法
TCDテーマ「HAKU」では、以下のコードを入力したら正常に作動しました。
/* イメージマップ（クリッカブルマップ）用コード */
<script type=”text/javascript” src=”/wp-content/uploads/jquery.rwdImageMaps.min.js”></script>
<script>
$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
});
</script>
$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
を
jQuery(document).ready(function(e) {
jQuery(‘img[usemap]’).rwdImageMaps();
にすると正常に作動しました。
もし「$」でイメージマップが正常に作動しないテーマがあったら、「$」を「jQuery」に置き換えてみてください。
まとめ：WordPressでイメージマップ（クリッカブルマップ）をレスポンシブ対応する方法
この記事では、WorrdPress（ワードプレス）の記事に設置したイメージマップをレスポンシブ対応する方法を解説しました。
ワードプレスに設置したイメージマップをレスポンシブ対応する手順（クリックすると段落に移動します）
/* イメージマップ（クリッカブルマップ）用コード */
<script type=”text/javascript” src=”/wp-content/uploads/jquery.rwdImageMaps.min.js”></script>
<script>
$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
});
</script>
WordPressテーマによっては、コードの「$」を「jQuery」に置き換えることで正常に作動することがありますので試してみてください。
関連記事
