Japan Clickable Map（無料版） 無料版

概要

地図はサーバー側でインライン SVG として出力されます。外部の地図サービスも API キーも JavaScript ライブラリも使わず、プラグインが外部へ HTTP リクエストを送ることもありません。 JavaScript を読み込むのは、地方ごとのポップアップを実際に使う地図だけです。

できること

• 47都道府県すべて、または選んだ都道府県だけを表示する
• 都道府県ごと、または地方ごとに色とリンク先を設定する
• 地方単位でまとめる（標準8地方、または自分で決めたエリア）
• 地方をクリックしたときに、直接リンクさせるかポップアップを開くかを選ぶ
• リンク先を URL 直接入力ではなくサイト内検索で選ぶ（投稿・固定ページ・カスタム投稿タイプ・タクソノミーターム）
• 都道府県名・地方名を地図上に描画する
• よく使う配色をプリセットとして保存し、どの地図でも使い回す
• 編集画面を離れずにプレビューで仕上がりを確認する

動作環境

マルチサイト環境でも動作します。ただし v1.0.1 では、アンインストール時のデータ削除 （後述）は実行したサイト 1 つだけが対象で、ネットワーク全体のデータは掃除されません。

インストールと有効化

1. WordPress 管理画面の プラグイン → 新規追加 で「Japan Clickable Map」を検索してインストールします。 zip を直接アップロードする場合は /wp-content/plugins/japan-clickable-map/ に展開されるようにします。
2. プラグイン 画面で有効化します。
3. 管理メニューに クリッカブル地図 が追加されます。

クイックスタート

最短の手順は次の3ステップです。

1. クリッカブル地図 → 新規追加 で地図を作り、タイトルを付けます。
2. 都道府県の選択 / 上書き タブで表示したい都道府県にチェックを入れ、必要ならリンク先を入力して公開します。
3. 投稿・固定ページに [plg_jcm_map id="123"] を貼るか、クリッカブル地図 ブロックを挿入して地図を選びます。

マップ編集画面

地図の設定は マップ設定 メタボックスの8つのタブと、右側の 出力サイズ ボックスで行います。表示モードによって意味を持たないタブは自動的に隠れるので、 常に8つ見えているわけではありません。

下書き保存でもプレビューには反映されます。

モード

「区切り」以降は、全国表示を選んだときだけ表示されます。地方ごとにまとめると、 クリックできる範囲が都道府県ではなく地方単位になります。標準8地方は 北海道・東北・関東・中部・近畿・中国・四国・九州です。

ポップアップは、地方の隣にカード（見出し・本文・リンク項目）を開く動きです。 タッチ端末ではホバー指定でも自動的にタップとして扱われます。

配色

地図全体の規定色と、地方ごとの色を設定します。色の優先順位は次のとおりです。

県別 上書き ＞ 地方の色 ＞ 規定色（画面上の表記もこの順です）

• 規定色… 地図全体の規定色。初期値は #dddddd
• 地方ごとの色… 8地方それぞれの色。空欄のままにした地方は規定色になります。 全国表示・地方ごと・標準8地方を選んでいるときだけ表示されます

独自エリアの色は「配色」タブではなく 独自エリア タブで設定します。 各カラーピッカーの横には、保存済みのプリセット色が並びます。

表示オプション

• 都道府県名を表示する… 都道府県名を地図上に描画します（初期値: OFF）
• 地方名を表示する… 地方名を描画します（初期値: OFF）。全国表示・地方ごとのときだけ表示されます
• 付属の離島も描画する… 離島も描画します（初期値: ON）。選んだ都道府県だけを表示するモードのときだけ表示されます

独自エリア

「東海（愛知・岐阜・三重）」のように、標準8地方とは違う区分けを自分で作るタブです。 「モード」タブで 全国表示 → 地方ごと → 独自エリア を選ぶと表示されます。

エリアごとに次を設定します。

どのエリアにも入れなかった都道府県は規定色で描画され、クリックできません。 画面下部の 未割当の県 に未割り当ての一覧が出ます。

ポップアップ

標準8地方 ＋ ポップアップを選んだときに表示されます。地方ごとに見出し・本文・リンク項目を設定します。 空欄の項目は表示されません。

その地方がクリックできるようになるのは、見出し・本文・リンク先・リンク項目のいずれかを設定した場合か、 その地方に含まれる都道府県のどれかにリンクを設定した場合です。どちらも無い地方はクリックできません。

• 見出し… 空欄なら地方名が使われます
• 本文… 営業時間や住所など。改行できます
• リンク項目… 1つでも追加すると、ポップアップはその項目を一覧表示します。 1つも無い場合は 都道府県の選択 / 上書き タブで設定した都道府県ごとの URL が使われます （リンクを設定した都道府県だけが並び、項目名はラベル上書きがあればそれ、無ければ都道府県名になります）

地方リンク

標準8地方 ＋ 直接リンクを選んだときに表示されます。地方ごとに遷移先 URL を入力します。 空欄の地方はクリックできません。

除外設定

全国表示のときだけ表示されます。チェックした都道府県は描画自体から外され、空いた場所は詰められます。

• 残った領域に合わせてズームする（初期値: ON）… 除外後に残った範囲を表示領域いっぱいに拡大します。 オフにすると全国の位置と縮尺が保たれ、除外した部分は余白になります

都道府県の選択 / 上書き

8つの地方ごとにアコーディオンが並び、都道府県を1行ずつ設定します。

選んだ都道府県だけを表示するモードでは、地方ごとに この地方を全選択と この地方を解除のボタンが使えます。

色とリンクの上書きが実際に効くかどうかは、モードの組み合わせで変わります。 とくに独自エリアではリンクの上書きが使われない点に注意してください。

出力サイズ

編集画面の右サイドにあるボックスです。

地図の精細度（地図の精度）は4段階から選びます。精細度が高いほど海岸線が細かくなり、 出力される SVG も大きくなります。初期値は high です。

最大幅（最大幅）は数値と単位（px / %）で指定します。 空欄または 0 で無制限になり、地図は親要素の幅いっぱいに広がります。px は 5000 まで、% は 100 までです。

リンク先の指定

リンク欄には URL を直接入力できますが、サイト内を検索して選ぶこともできます。 検索対象は公開されている投稿タイプとタクソノミーで、投稿・固定ページ・カスタム投稿タイプの記事・ タクソノミータームが選べます。

• 1回の検索で表示される候補は最大20件です。絞り込めない場合はキーワードを足してください
• ポップアップのリンク項目のラベルは60文字で切り詰められます
• メディア（添付ファイル）と、このプラグインの地図そのものは検索対象から除かれます

ページへの設置

方法は2つあります。出力される HTML はどちらも同じです。

ショートコード

[plg_jcm_map id="123"]

[plg_jcm_map id="123" level="mid" class="my-map"]

ブロック

ブロック挿入メニューで クリッカブル地図 を選び、 サイドバーの 表示するマップ から地図を選びます。

ブロックが保存するのは地図の ID だけで、実際の描画は表示時にサーバー側で行われます。 そのため、地図を編集すれば埋め込んだすべての場所に反映されます。

表示を確認する

編集画面にはプレビューボタンが表示されます。クリックするとモーダルが開き、 保存されている内容で地図を描画して確認できます。

色プリセットとマップの複製

色プリセット

クリッカブル地図 → プリセット色 で、すべての地図の編集画面に並ぶ カラーチップを編集できます。

• 保存できるのは最大24色です
• ⠿ ハンドルをドラッグして並べ替えられます
• 初期化 を押すと組み込みの初期パレット（8色）に戻ります
• リストを空にして保存した場合も、初期パレットが使われます

この画面の操作には管理者権限（manage_options）が必要です。

マップの複製

地図の一覧画面で行にマウスを乗せると 複製 が表示されます。 設定をまるごとコピーした地図が作られ、タイトルの末尾に (copy) が付きます。 配色やリンクの構成が似た地図を複数作るときに使えます。

CSS での見た目調整

地図は次の構造で出力されます。

<div class="jcm-map">
  <svg …>
    <path id="pref-13" data-pref-code="13" data-pref-name="東京都" fill="…" aria-label="東京都" />
    …
  </svg>
</div>

ショートコードの class 属性で独自クラスを付けたうえで、テーマの CSS から 次のセレクタを狙えます。

例: 特定の都道府県だけホバー時の色を変える

.my-map path[data-pref-code="13"]:hover {
	fill: #4f46e5;
}

アクセシビリティ

• クリックできる領域は本物のリンク（<a>）として出力され、 aria-label に都道府県名または地方名が入ります
• ラベル上書きを設定した都道府県は、その文字列が読み上げに使われます
• リンクを設定していない都道府県はリンクにならず、キーボードのフォーカスも当たりません。 カーソルの形も変わらないので、押せそうに見えて押せないという状態になりません
• ポップアップを開く地方には role="button" と aria-expanded が付きます

設定とアンインストール

クリッカブル地図 → 設定 にある設定は1つだけです。

アンインストール時にこのプラグインのデータをすべて削除する — 初期値はオフです。

オフのまま削除した場合、作成した地図も設定も残ります。もう一度インストールすればそのまま使えます。

オンにしてから削除すると、次のデータが完全に削除されます。

• 作成したすべての地図（カスタム投稿タイプの投稿）とそのメタデータ
• このプラグインの設定（plg_jcm_ で始まるオプション）

地図データと出典表記

同梱している地図データは、国土交通省の国土数値情報（行政区域データ N03） （2024年1月1日時点）を加工して作成しています。

利用規約は政府標準利用規約（第2.0版）で、CC BY 4.0 と互換です。 出典を明記すれば、改変・再配布・商用利用が認められています。

「国土数値情報（行政区域データ）」（国土交通省）
（https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v3_1.html）を加工して作成

元データに対して行っている加工は、行政区域ポリゴンの都道府県輪郭へのディゾルブ、 Web メルカトル（EPSG:3857）への再投影、沖縄のインセット化、頂点の簡略化、SVG への変換、 識別用属性の付与です。

困ったときは

ショートコードを書いたのに何も表示されない

id に指定した番号の地図が存在しないと、エラーではなく何も出力されません。 編集画面の URL の post= の数字と一致しているか確認してください。 下書きの地図は、その地図を編集できる権限を持つユーザーにしか表示されません。

都道府県をクリックできない

リンク先を設定していない都道府県は、意図的にクリックできない状態で出力されます。 地方ごとにまとめている場合は、地方のリンクが都道府県のリンクより優先される点にも注意してください。

独自エリアに入れたはずの都道府県が反映されない

1つの都道府県が複数のエリアに属することはできません。先に登録したエリアが優先されます。 また、エリア名が空欄のまま保存すると、その行はまるごと破棄されます。

スマートフォンで地図が大きすぎる／小さすぎる

SVG は親要素の幅に追従します。最大幅 で上限を設定するか、 class 属性で独自クラスを付けてテーマの CSS で幅を指定してください。

それでも解決しない場合

不具合の報告や質問は WordPress.org のサポートフォーラムをご利用ください。 このページ上部のリンクからアクセスできます。

無料版と有料版の違い

無料版でも、このページで説明した機能はすべて使えます。作れる地図の数にも制限はありません。

市区町村単位のクリッカブルマップが必要な場合は、有料版をご検討ください。 管理画面の クリッカブル地図 → Pro版のご案内 からも案内しています。