【簡単！】地図画像の一部をクリックするとリンク先に飛ぶ方法 | SVGによるクリッカブルマップの作り方（マウスをホバーすると色が変わります）

WEBサイトづくり
2023.10.01

旅先のホテルや、不動産物件を検索する際に利用する地図ですが、
地図の上にカーソルを持ってきて、クリックすると、サイト遷移しますよね。
どうやっているのでしょうか。
あの機能を使えるようになりたくて、勉強してみました。
（クリッカブルマップと言うらしいです）

勉強のために閲覧したサイトはこちらです↓↓
【HTML・CSS】<map>タグを使わずにクリッカブルマップを設置する | SAKURAGRAPHICA
WordPressでSVGをアップロード可能にするプラグイン「Safe SVG」 | WebDev Tech

完成イメージ

作業手順

IllustratorでSVG形式の地図を作成

フリー素材をダウンロード

AdobeStockの無料素材で「九州」と検索して出てきたイラストを活用しました。

使用した画像の情報：
日本の地域図・日本地図 九州地方 雨の日カラーで色分けしてみた
作成者 suzumeclub

レイヤーの整理

クリックできる範囲は、レイヤーグループ単位になります。
そのため、県ごとにレイヤーグループを作成して、パーツを整理しておきます。

SVGデータとして書き出す

「ファイル」→「書き出し」→「スクリーン用に書き出し…」を選択します。

フォーマット形式「SVG」を選択します。

⚙歯車のマークをクリックし、形式の設定を確認してください。
縮小のチェックボックスにチェックがない状態になっているか確認してください。

確認が終わったら、「設定を保存」をクリックします。
そして、「アートボードを書き出し」をクリックします。

これでSVG形式のデータができました。

SVG形式のファイルをメディアとしてアップロード

WordPressプラグインをインストール

プラグイン「Safe SVG」をインストール。

有効インストール数を見て、信頼できると判断し、インストールしました。

このプラグインをインストールすると、SVGファイルをメディアに問題なくアップロードできます。

2023/10/1時点の情報（スクリーンショット）

SVGファイルをアップロード

jpgファイルやpngファイルと同様に、「ファイルを選択」をクリックして、対象のファイルをアップロードします。

SVGファイルのコードに手を加えてHTMLに埋め込む

ここで、wordpressから離れて、任意のエディタでSVGを開き、手を加えます。
私の場合は「Visual Studio code」を使ってコードに手を加えます。

※最終的には、下記画像にあるWordPressの「カスタムHTML」にコードを書き込むことになります。

SVGファイルを任意のエディタで開く

私の場合、Visual Studio code を利用して、SVGファイルを開きました。

中を見てみると、「id」として、レイヤー名が設定されています。

<g>タグを<a>タグで囲む

「id」が設定されている全ての<g>タグを、下記の<a>タグで囲みます。
「リンクを挿入」のところに、任意のリンクを挿入してください。

      <a xlink:href="リンクを挿入">
        <g id="okinawa">...略...
        </g>
      </a>
カーソルを当てたら半透明になるように、全体にclassを指定

SVGのコード全体を、classを指定した<div>タブで囲みます。
class=”arealist-map”を指定します。

<div class="arealist-map">
  <?xml version="1.0" encoding="UTF-8"?>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1056 1056">...略...
  </svg>
</div>

これで、wordpressに書き込むコードの準備ができました。
全てのコードをコピーして、wordpressへ戻ります。

WordPressビジュアルエディターの「カスタムHTML」にコードをコピペ

任意のエディターで編集したコード（先ほどコピーしたコードすべて）を、WordPressビジュアルエディターの「カスタムHTML」にコピペします。

WordPressビジュアルエディターのカスタムCSSに”arealist-map”を定義

WordPressのビジュアルエディターの下部へ移動。
ここに、「カスタムCSS」というテキストボックスが存在しています。

ここに、次のコードを入力します。
※もし、SVGファイルコードの一番上に記入した「class=”●●”」の●●の部分を確認してください。
※●●の部分を任意の文字列に変更されていた場合、「.●● a:hover {・・・」と続くことになります。

.arealist-map a:hover {
  opacity: 0.5;
}

最後に右上の保存を押して、確認してください。
クリッカブルマップが生成されているはずです！

コメント

タイトルとURLをコピーしました