web周りのことはあまり詳しくないのですが、ひょんなことがきっかけでimagemap (イメージマップ)なるものを導入してみようという話になり、とりあえずやったことを備忘録程度にまとめておきたいと思い、記事化しました。

今ってレスポンシブルデザインが当たり前、みたいな風潮ありますよね。ご多分に漏れずWordPressも同様ですが、とはいえPCでの表示とスマホでの表示って全く違うわけですよ。例えばこのサイトの場合、PC だと↓こんな感じに見えますが、

↓スマホだと縦長に表示されるので見た目の印象はまるで違います。

レスポンシブルデザインのサイトは横幅をかえることで、自動的にPC向けやスマホ向けに表示を切り替えてくれるのですが、その際に、画像サイズも自動的に変えてくれますよね。今回は、画像内にリンクを組み込んだ「イメージマップ」をWordPressで使う場合に、画像サイズが変わっても自動的に対応してくれるjavaScriptの設置方法まで、かんたんに説明したいと思います。

イメージマップとは?

イメージマップとは、簡単に言えばリンクできる箇所(ホットスポット)を内蔵した画像みたいなものです。たとえば、サイトのTOPページが一枚の画像で出来ていて、その画像に任意にクリックできるエリアを設定し、クリックしたときの遷移先リンクを設定すれば、その画像そのものをTOPページとして利用することが出来ます。

画像ファイルなので、スマホで見ようがタブレットで見ようがPCで見ようが、大きさは可変するけれどもデザインが変わらず、見せたいように見せることができるわけです。便利でしょ?

ところが問題があってですね、画像に埋め込むリンク位置はXY軸で設定しているので、画像サイズが変わるとリンク位置がズレちゃうんです。なので、画像の大きさがレスポンシブルに変わっちゃうとリンクが追随しないんですね。でもjavaScriptを設置することで解決しまっせ、っていう話をこれからしていきます。

↓例えばこんなかんじ。3人のキャラクターを押すと、それぞれ異なったメッセージが表示されるはずです。

このサイト、スマホでも見てもPCで見ても(つまり画像サイズが変わっても)、きちんとリンクを踏めてますよね。

どうやって設定すればいいの?

「イメージマップ レスポンシブル」でググれば山のように解説サイトが表示されます。

そこには「jQueryをサーバに挙げてちゃちゃっとコード変えればOK!」って書いてあるんですが、素人にはさっぱり。しかもWordPressだと上手くいかないことも多いらしく…今回は自分でやってうまくいったやり方を皆さんにお伝えしたいと思います!

正統なやり方ではないと思うので悪しからずご了承ください(笑)

参考にしたサイト

路地裏の聖戦 - <メモ>レスポンシブルに対応したイメージマップ(クリッカブルマップ)を作る

TY's Blog - WordPressでjQueryプラグインが動かない時の対処法

まずはheader.phpに呪文を書く

<!--jクエリ イメージマップ用 -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https:// aaaa.com/wp-content/uploads/2018/08/jquery.rwdImageMaps.min_.js"></script>
<script>
jQuery(document).ready(function(e) {
	jQuery('img[usemap]').rwdImageMaps();
});
</script>

<!--jクエリ イメージマップ用 -->

↑上記ソースは右クリック>コピーしておきましょう。header.phpがどこにあるか?ですが、ログイン>外観>テーマを編集、で表示します。

使用しているテーマによっても異なりますが、右側「テーマフィイル」の中に「テーマヘッダー」があるはずなので、それを選択。有料テーマ利用で、子テーマ(○○_childなど)を利用している場合は、親テーマの中にテーマヘッダーが入っている場合が多いと思うので、そっちを参照してください。

テーマ選択は、右上にプルダウンがありますので、そこからチョイスします。

で、無事 header.phpを開けたら、バックアップをとっておきましょう。FTPソフトかサーバーHPにあるファイル管理的な機能を使えば、ローカルに保存できるかもしれません。

タグ <head> と、 </head>が必ず記載されているはずなので、見つけてください。<head>が上、</head>がソース下方にあります。

</head>を見つけたら、その上を何行か改行して、コピーしたソースを貼り付けちゃいます。

<!--○○○-->は「コメント」と呼ばれ、機能的には何も影響しないので、あとからどこの部分を編集したのかわかるようにしておいてください。

書き換えたら保存を忘れずにね!

ちなみに…私はsetTimeoutを使っています。。

<!--jクエリ イメージマップ用 -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https:// aaaa.com/wp-content/uploads/2018/08/jquery.rwdImageMaps.min_.js"></script>
<script>
	jQuery(document).ready(function(e) {
		setTimeout(function(){
	jQuery('img[usemap]').rwdImageMaps();
		},2000);
});
</script>	
<script>
jQuery(document).ready(function(e) {
	setTimeout(function(){
	jQuery('img[usemap]').rwdImageMaps();
		},4000);
});
</script>
<!--jクエリ イメージマップ用 -->

 

画像表示のタイミングが遅いと、jqueryが動いたタイミングで画像取得ができないことがあるみたいなので、読み込み2秒後と4秒後に1回ずつ動かすようにしています。初期表示で動作しないのに、ブラウザサイズを変更すると動き出す、なんて場合はこれでうまく動作するかもしれません。素人手法ですがご参考までに。

GitHubから jsファイルをダウンロードしましょう

jQuery-rwdImageMaps からZIPファイルをダウンロード、解凍してください。

そうすると、中にファイル"jquery.rwdImageMaps.min.js"が入っていると思うので、それをサーバにアップロードします。

"jquery.rwdImageMaps.min.js"をアップロードする

他サイトに書いてあるように、FTPソフトで指定の場所にアップロードしても404エラーが頻発して自力解決が難しかったので、とりあえずメディアとしてUPしてみることにしました。

画像と同じように、ドラッグアンドドロップでアップロードするだけ…だと思いきや、たぶん以下のメッセージが出て怒られます。

「セキュリティ上の理由によりこのファイル形式は許可されておりません。」

プラグイン「disable-real-mime-check」を導入しよう

disable-real-mime-checkは、アップロードするファイル形式チェックを外してくれるプラグイン。

このプラグインを入れた後で再度アップロードすれば…いける。

アップしたら、URLをコピーしておきます。このURLをheader.phpで使います。

header.phpを書き換える。

上記でコピーしたURLで、追加したphpソースを書き換えましょう。 header.phpファイルを開き、先程追加したソースを表示してください。

"aaaa.com/wp-content/uploads/2018/08/jquery.rwdImageMaps.min_.js"と記載されている箇所があるはずなので、まるっと、上記URLに置き換えてください。

書き換えが終わったら、保存。最初にやった作業と同じ要領です。

 wordpressの設定は終わり。画像ファイルを用意する。

HTML Imagemap Generatorという超便利なサイトがあります。画像をアップロードし、任意のリンクを貼りたい場所をホットスポット化する(クリックで枠を作る)と、それをそのままHTMLソースと記述してくれるサイトです。

こんなかんじ。リンクにしたい部分を選択すると、右側にソースとして吐いてくれるんです。

JINSの看板をクリックするとJINSのサイトに、バイクをクリックするとHONDAスーパーカブのサイトに遷移します。

上記サイトで作ったソースは以下のようになっていますよー。

<img src="https://tanikiryo.com/wp-content/uploads/S__3342341.jpg" alt="" usemap="#ImageMap" />

<map name="ImageMap"> 
<area alt="" coords="300,44,276,348,588,381,613,80,554,73,299,46" shape="poly" href="https://www.jins.com/" /> 
<area alt="" coords="334,496,1079,1090" shape="rect" href="https://www.honda.co.jp/SUPERCUB/" />
 </map>

 

では、このサイトで実際に動かしてみましょう。。

JINSの看板をクリックするとJINSのサイトに、バイクをクリックするとHONDAスーパーカブのサイトに遷移します。

参考にしてねー。

httpsとhttpで挙動が変わるので注意

このサイトの場合あるタイミングでうまくいく場合と、うまくいかない場合があり、原因が分からず結構迷いました。

原因はhttpで表示した場合とhttpsで表示した場合でjsの挙動が変わっていた(片方で動かなかった)こと。httpでアクセスしてもhttpsで表示が統一するように設定しておきましょう。

そもそもwordpressを設置しているサーバーがhttpsに対応していることを確認します。自サイトがhttpsでもアクセスできるように設定されていることを確認したら、以下の操作をすすめておきましょう。(ちゃんとバックアップはとっといてね)

wordpressの設定>一般>でURL2項目をhttp→httpsに変更し、

is_sslという関数でHTTPかHTTPSか判別してリダイレクトできるように設定しておきます。wordpressテーマのfunctions.phpに、以下のコードを追記しておきましょう。

function force_https_redirect() {
if ( !is_ssl() ) {
wp_redirect( 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'], 301 );
}
}
add_action ( 'template_redirect', 'force_https_redirect', 1 );

ちなみに設定方法については、下記サイトを参考にしました。

画像遅延処理にも注意

初回読み込み時に、どうしてもイメージマップがずれてしまう場合、WordPressの画像遅延処理設定が悪さをしているかもしれません。

例えば私が使っているWordPressテーマ「Diver」では、設定欄に「画像遅延処理」があるので、チェックを外しておきましょう。

ググると、プラグインが悪さをしている場合もあるようなので、うまくいかない場合はテーマ、プラグインの設定を変更する必要があるかもしれません。

まとめ

うまくいきましたか?

きれいに絵を書いてくれる人がいたら、デジタルチックじゃない美しいサイトを作れるかもしれませんね〜。

上記方法でうまくいかなかったとしても悪しからずご了承くださいませ。ではまた!

Twitterでフォローしよう

おすすめの記事