ホームページにクリッカブルなメニューを載せたい！Canvaで作ったオリジナル画像をメニューにしてみよう

タイトルだけでは「なんのことを言っているの？」と思われた方もいらっしゃるかもしれませんが、『クリッカブルマップ』や『イメージマップ』というとピンとくる方もいらっしゃるかも…！

例えば「日本地図の画像を用意し、それぞれの都道府県をクリックしたら、都道府県サイトにジャンプする」そんなイメージです。

これの何が大変かというと、1つの画像の中に、クリックするそれぞれの部分があるので、画像全体にリンクを貼れないところです。しかも画像の形もサイズもバラバラ…。

ここでは、その1つの画像の中の特定部分にリンクを貼っていく方法をご案内いたします。

クリッカブルなメニューというのはこんなイメージ

例えば、下記のようなメニュー画像があるとします。

これは1枚の画像ですが、例えば左から『ライフデザインワークブック』『セルフデザイン講座』『セルフデザイン講座が不要な方はワークデザイン講座へ！』…というように、それぞれの要素に対して、別のページへジャンプさせたい、そんなつくりにしたいときもありますよね。

そんなときに使えるのが、今回ご案内するクリッカブルマップ（イメージマップ）です。

まずは画像をご用意ください。どんな形の画像でも使えますが、リンクさせる部分は丸型か四角形が楽です。上記画像はCanvaで作りました。

画像を作ったらクリックできる箇所を設定しよう

画像が準備できましたら、次にその画像のどこにどんなリンクを付けるか設定していきます。

オンラインツールで要素を選択する

こちらの「Free Online Image Map Generator」をクリックして開いてください。

オンラインツールを開く

Free Online Image Map Generator Easy free online html image map generator. Select an image, click to create your areas and generate html your output!

下記のような画面が表示されるので、「Select Image from My PC」をクリックします。

すると、PC内の画像のアップロードの画面が表示されるので、前項で作成した画像を選択してアップロードしてください。するとこのような画面が追加されます。

まず、画像の下の設定項目から設定しましょう。

例えば、このように設定しました。

そうしたら、設定したリンクに対応する上の画像の箇所を選択していきます。

この画像で言うと、一番左にある「ライフデザインワークブック」という四角のメニューがそれに対応します。まず、4つの頂点のうち、どれかをクリックし、次にその対角線上の頂点をクリックします。すると下記のように選択された部分がグレーで表示されます。

もし、選択したグレーの部分が画像からはみ出ていたり、小さすぎたりしたら、白い丸をドラッグしてサイズを調整してください。画像の選択が終わったら、次のクリック箇所の設定に移ります。この例で言うと丸いメニューとなっている「セルフデザイン講座」に移りましょう。

「Add New Area」ボタンをクリックして、リンクなどを設定する行を増やします。

追加された行の「Active」にチェックを入れて、またShapeなどを設定していきます。この例では、設定したいメニュー部分の画像が円形なので、Shapeの箇所で「Circle」を選択します。

そして、また上の画像の選択へと移ります。円形の選択方法は、「中心点」をクリックして「外周のどこか」をクリックすると円形で選択されます。

これも四角の時と同様に白い丸を動かすことで大きさが変更できたり、グレーの部分をドラッグして動かすことができますので、微調整してください。

では、最後に多角形のメニューを設定してみましょう。また、「Add New Area」ボタンをクリックして、リンクなどを設定する行を増やします。

追加された行の「Active」にチェックを入れて、今回は、Shapeの箇所で「Poly」を選択します。

そして、また上の画像の選択へと移ります。多角形の選択方法は、どこからでも結構ですので、ある頂点をクリックして、画像の変形に沿って頂点をクリックしていき、最初にクリックした地点に戻ります。

白い丸の箇所がクリックした部分です。これも今までと同様に白い丸を動かすことで大きさが変更できたり、グレーの部分をドラッグして動かすことができますので、微調整してください。

コードを生成する

前項の手順で、リンクをつけたい画像全てにリンクの設定が終わりましたら、「Show Me The Code」ボタンをクリックします。

すると、下記のような画面がポップアップで表示されます。

この中身を選択してコピーします。

コピーしたら、ワードプレスでの作業に移ります。

コピーしたコードを貼り付ける

ワードプレスにログインし、このメニュー画像（リンクの付いた画像）を貼り付けたいページを開き、貼り付けたい箇所にカーソルを置いて、「カスタムHTML」ブロックを挿入します。

そうすると、下図のようなブロックが追加されます。

この「HTMLを入力」と書かれた箇所にFree Online Image Map Generatorでコピーしたコードを貼り付けましょう。

具体的には下記のような内容が貼り付けられました。しかし、まだ画像をアップしていないのと、画像に対するURLが簡易表示になっているため、ちゃんと表示されません。（ピンクの下線部分）

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="img-menu-sample.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="ライフデザインワークブック" title="ライフデザインワークブック" href="https://office-sincere.com/service/self-design-lesson/" coords="34,33,166,300" shape="rect">
    <area target="" alt="セルフデザイン講座" title="セルフデザイン講座" href="https://office-sincere.com/service/self-design-lesson/" coords="300,97,71" shape="circle">
    <area target="" alt="セルフデザイン講座が不要な方" title="セルフデザイン講座が不要な方" href="https://office-sincere.com/service/work-design-lesson/" coords="278,234,291,235,305,236,320,237,336,238,349,239,362,244,367,251,372,264,373,279,364,286,347,290,333,292,317,293,297,293,279,294,260,293,244,289,231,282,227,266,228,250,238,241,255,236,281,225,279,234,279,241" shape="poly">
</map>

そこで、まず、画像をアップロードします。先ほどの「カスタムHTML」の下に「画像」のブロックエディタを挿入し、リンクを貼る画像をアップロードします。すると、下のような表示になるので、右下の「ファイルのURL」をコピーします。

そして、「カスタムHTML」内の下記赤字の部分を置き換えます。先ほどは、「ファイル名.png」しか表示されていませんでしたが、今回は「https://」から始まるURLになっています。

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://granvi.jp/wp-content/uploads/img-menu-sample.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="ライフデザインワークブック" title="ライフデザインワークブック" href="https://granvi.jp/service/self-design-lesson/" coords="34,33,166,300" shape="rect">
    <area target="" alt="セルフデザイン講座" title="セルフデザイン講座" href="https://granvi.jp/service/self-design-lesson/" coords="300,97,71" shape="circle">
    <area target="" alt="セルフデザイン講座が不要な方" title="セルフデザイン講座が不要な方" href="https://granvi.jp/service/work-design-lesson/" coords="278,234,291,235,305,236,320,237,336,238,349,239,362,244,367,251,372,264,373,279,364,286,347,290,333,292,317,293,297,293,279,294,260,293,244,289,231,282,227,266,228,250,238,241,255,236,281,225,279,234,279,241" shape="poly">
</map>

URLの置き換えが終わりましたら、挿入しようとしていた画像ブロックは削除してしまって大丈夫です。

これで、クリッカブルメニュー（クリッカブルマップ）が設置できました。こちらがサンプルです。一番左の画像の上にカーソルを置くと、リンクが有効になっていることがわかります。

画像を中央寄せ（センタリング）したい場合

画像のサイズと見せ方によっては、画像を中央寄せ（センタリング）したい方もいらっしゃると思います。

その場合は、カスタムHTMLの最初に<div style="text-align: center;">を挿入し、最後に</div>を挿入してください。

先程の例だとこのようになります。

<div style="text-align: center;"><!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://office-sincere.com/wp-content/uploads/img-menu-sample.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="ライフデザインワークブック" title="ライフデザインワークブック" href="https://office-sincere.com/service/self-design-lesson/" coords="34,33,166,300" shape="rect">
    <area target="" alt="セルフデザイン講座" title="セルフデザイン講座" href="https://office-sincere.com/service/self-design-lesson/" coords="300,97,71" shape="circle">
    <area target="" alt="セルフデザイン講座が不要な方" title="セルフデザイン講座が不要な方" href="https://office-sincere.com/service/work-design-lesson/" coords="278,234,291,235,305,236,320,237,336,238,349,239,362,244,367,251,372,264,373,279,364,286,347,290,333,292,317,293,297,293,279,294,260,293,244,289,231,282,227,266,228,250,238,241,255,236,281,225,279,234,279,241" shape="poly">
</map></div>

赤いラインが引いてある箇所が挿入した箇所です。

レスポンシブ（スマホ）対応させよう

ホームページ上の画像は、閲覧する機器（PCだったり、スマホだったり）によって、その画面サイズに合った大きさに自動変換されますが、先ほどのオンラインツールで設定した位置情報はこのままだと自動で変わってはくれません。

そのままにしておくと、画像は小さくなったのに、リンクの場所は大きい画像のままの位置を示していて、スマホでタップしても適切なページにジャンプされなくなります。

そこで、レスポンシブ対応した作りにしましょう。レスポンシブ化には二通りありますので、やりやすい方で実施してください。

画像を二種類用意する方法

例えば、今までサンプルでご案内していた画像に加えて、下記のような縦長の画像も作成します。

その後、上記「画像を作ったらクリックできる箇所を設定しよう」に沿って、またリンクの設定などを行います。

そして、リンクを貼った画像のPC用はPCのみで表示されるように、スマホ用はスマホのみで表示されるように設定します。条件によって表示させる・させないを分ける「条件分岐ブロック」は、ワードプレステーマによって異なります。

• ワードプレステーマ「Cocoon」の場合、条件分岐のブロックはないため、あらかじめcssを設定しておいてカスタムHTMLブロックに組み込む必要があります。
• ワードプレステーマ「SANGO」の場合、カスタムブロック内に「条件」というブロックがありますので、それによって表示調整をします。
• ワードプレステーマ「SWELL」の場合、swellブロックそれぞれに「デバイス制限」という設定項目があります。例えば、フルワイド背景ブロックにカスタムHTMLブロックを設置して、フルワイド背景ブロックのデバイス制限にて表示調整をされてはいかがでしょう。

画像のサイズの変化に応じて、リンクの位置情報も自動で変わる方法

ワードプレスの重要なファイルを編集しますので、作業前に必ずバックアップを取っておいてください。

functions.phpの編集

ワードプレスにログインしたら、左側メニューの[外観]-[テーマファイルエディター]をクリックします。

『テーマを編集』画面が表示されるので、子テーマを選択したまま、右側のテーマファイル一覧の中から『テーマのための関数（functions.php）』をクリックします。（子テーマがない場合、子テーマにfunctions.phpがない場合、それぞれを作ってから先に進むことをお勧めします。私が普段ご案内しているテーマ『Cocoon』『SANGO』『SWELL』をご利用の方はあります。）

すると、真ん中に表示された入力枠の中に、「functions.phpへの追記は以下に」や「以下に子テーマ用の関数を書く」「その他の読み込みファイルはこの下に記述」といった文章があります。その下に、下記をコピーして貼り付けてください。

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 );

}

この文を貼り付けた後、クリッカブルメニュー（クリッカブルマップ）を貼ったページをスマホで開き、ちゃんとリンクが画像に対応しているかご確認ください。

もし、まだ反映されていないようでしたら、ブラウザのキャッシュをクリアしてから再度お試しください。

イラストレーター（illustrator）で画像が作れる人はこちらが楽かも！

画像を作るときに、クリック要素となる画像別にレイヤーを分けて作り、SVG形式で書き出すことでレスポンシブなクリッカブルメニューやクリッカブルマップが作れます。マウスカーソルを上に置いたときに色を変えるのもこちらの方が簡単です。

こちらのブログがとても参考になります！

参考リンク

レスポンシブ対応を考えて、クリッカブルマップではなく、イラストレーターの地図をSVGで書きだして、ホバ… 「地図をクリックしたら～」というものを制作したい場合以前はクリッカブルマップを使っていました。それだとスマホ対応が難しいのでイラストレーターからSVGで書きだすの…