クリッカブルなメニューを作りたい!Canvaで作ったオリジナル画像をメニューにしてみよう

Canvaで作ったオリジナル画像をメニューにしてみよう

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

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

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

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

目次

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

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

サンプルメニュー画像

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

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

まずは画像をご用意ください。どんな形の画像でも使えますが、リンクさせる部分は丸型か四角形が楽です。
上記画像はCanvaで作りました。Canvaって?という方は『オンライン画像編集ツール『canva』でブログのアイキャッチ画像を作ってみる』をご覧ください。メニュー作りにも使えます!

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

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

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

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

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

オンラインツールの画面

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

クリッカブルマップ

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

Active設定する行を選択して、チェックが入っている状態にします。
ShapeRect:四角形に選択できます
Poly:多角形に選択できます
Circle:円形に選択できます
Link選択した部分をクリックした時にジャンプする先のURLです。
Titleその画像の名称を入力します。
Targetクリックした時に別ウィンドウ開きたい時は「_blank」を選択します。
そのままのウィンドウでよければ特に設定は不要です。(ちゃんと設定したい場合は「_self」を選択してください)

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

クリッカブルメニュー

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

この画像で言うと、一番左にある「ライフデザインワークブック」という四角のメニューがそれに対応します。まず、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://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>

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だったり、スマホだったり)によって、その画面サイズに合った大きさに自動変換されますが、先ほどのオンラインツールで設定した位置情報はこのままだと自動で変わってはくれません。

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

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

二通りの作業について

二通りの方法とは、下記のようになります。

  1. PCで見る用(横長でもOK)とスマホで見る用(正方形または縦長の画像)の2種類を作る方法。
    作業はわかりやすいですが、画像サイズが少しでも変わるとリンク位置がズレるので、サイズ(特に横幅)に注意が必要です。(スマホ用画像の横幅は375px、PC用は640px程度に抑えるのがよいでしょう)
  2. 画像のサイズの変化に応じて、リンクの位置情報も自動で変わる方法。
    画像は1つでOKですが、functions.phpを編集します。(あまりに横長の画像だとスマホ閲覧可能にしても、見づらい可能性があるので、その場合は上記画像を2種類作る方法の方がオススメです)

前者の方が、手間がかかりますが、作業自体には不安がないと思います。ただ、画像のサイズが合わないと

後者の方は、作業が楽ですが、普段触らない箇所を編集するので不安な方もいらっしゃると思います。また、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形式で書き出すことでレスポンシブなクリッカブルメニューやクリッカブルマップが作れます。マウスカーソルを上に置いたときに色を変えるのもこちらの方が簡単です。

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

まり子

まり子に直接聞きたいと思ってくださった方、一緒に作業したいと思ってくださった方
オンラインコミュニティでは、質問しながら一緒に作業できます
よかったら、ご参加くださいね!

オンラインコミュニティのご案内はこちら

フリーランス・ひとり起業の女性のためのオンラインコミュニティTAG
SHARE PLEASE!
フリーランス・ひとり起業の女性のお役立ち情報をお届けするメールマガジン
Web集客できるようになる!7つのチェックポイントガイドブック

フリーランス・ひとり起業のお役立ち情報をメルマガでお届けしています。
また、メルマガにご登録いただいた方には、

  1. Web集客できるホームページになる7つのチェックポイントガイドブック
  2. ペルソナ設定シート
  3. ブログライティングシート

がダウンロードできるURLもご案内しています。
ぜひ、ご登録ください!

この記事を書いた人

まり子のアバター まり子 デジタルマーケティングコーチ

スタートアップ期・成長期のフリーランス・ひとり起業の女性のデジタル集客の専門家。
ウェブサイトやSNSの立ち上げ、運用・活用方法やひとりならではの孤独感の解消・情報収集のサポートをコーチングも活用して提供中。
また、子育て中の女性の生き方・働き方についてコーチングも行っている。

目次