Title: Japan Clickable Map Author: plugear Published: 2026年8月10日 Last modified: 2026年8月11日 --- プラグインを検索 ![](https://ps.w.org/japan-clickable-map/assets/banner-772x250.png?rev=3640298) ![](https://ps.w.org/japan-clickable-map/assets/icon-256x256.png?rev=3640298) # Japan Clickable Map 作者: [plugear](https://profiles.wordpress.org/plugear/) [ダウンロード](https://downloads.wordpress.org/plugin/japan-clickable-map.1.0.1.zip) * [詳細](https://ja.wordpress.org/plugins/japan-clickable-map/#description) * [レビュー](https://ja.wordpress.org/plugins/japan-clickable-map/#reviews) * [インストール](https://ja.wordpress.org/plugins/japan-clickable-map/#installation) * [開発](https://ja.wordpress.org/plugins/japan-clickable-map/#developers) [サポート](https://wordpress.org/support/plugin/japan-clickable-map/) ## 説明 Japan Clickable Map は、ただの日本地図をサイトの導線に変えるプラグインです。表示 する都道府県を選び、色とリンク先を設定する——という手順で WordPress の管理画面から マップを作り、ショートコードまたはブロックで投稿・固定ページ・カスタム投稿タイプ のどこにでも設置できます。 マップはサーバー側でインライン SVG として出力されます。外部の地図サービスも API キーも、読み込む JavaScript ライブラリもありません。フロントに読み込まれるのは、 地方のポップアップを実際に使ったときの小さなスクリプトだけです。 #### マップを作る * **表示モード** — 47 都道府県すべて (`full`) を表示するか、選んだ県だけ (`range`) を表示するかを選べます。県の組み合わせは自由です。 * **Detail level** — choose between `low`, `low-smooth`, `mid` and `high` outline accuracy, so you can trade file size for coastline detail. `low-smooth` keeps the simplified `low` outline but joins its points with curves for a softer coastline. * **はめ込み表示** — 沖縄・北方領土・小笠原諸島は、地図の枠を引き伸ばすのではなく、 枠内の決まった位置に配置されます。 * **区切り (全国表示)** — 県ごとにクリック領域を分けるか、地方単位でまとめるかを 選べます。地方は標準 8 地方のほか、マップごとに独自エリアを定義できます。 * **地方クリック時の挙動** — 地方から URL へ直接リンクするか、その地方に含まれる リンク先を並べたポップアップを開くか (ホバー / クリック) を選べます。 * **配色** — マップ全体の規定色を決め、県ごとに上書きできます。 * **リンク** — 県ごと・地方ごとにリンクを設定できます。リンクのない県はクリック できず、カーソルも変わりません。 * **リンク先の指定** — URL を直接入力するほか、サイト内を検索して投稿・固定ページ・ カスタム投稿タイプ・タクソノミーの語句から選べます。パーマリンクが変わってもリンク は切れません。 * **名称の表示** — 都道府県名・地方名を地図に重ねて描画し、`aria-label` としてスクリーン リーダーにも渡します。名称は県ごとに上書きできます。 * **色プリセット** — よく使う色を保存して、どのマップからでも呼び出せます。 * **プレビュー** — 編集画面を離れずに、モーダルで仕上がりを確認できます。 #### マップを設置する ショートコード: ``` [plg_jcm_map id="123"] ``` Optional attributes: `level` (`low` / `low-smooth` / `mid` / `high`) to override the detail level saved on the map, and `class` to add your own CSS class. または **クリッカブル地図 (Clickable Map of Japan)** ブロックを挿入し、表示するマップ を選びます。ブロックはマップの ID だけを保存してサーバー側で描画するため、マップ を編集すれば埋め込んだすべての場所に反映されます。 #### 都道府県マップは、件数無制限 ここまでの機能はすべて無料版で使え、都道府県マップは何件でも作成できます。有料版 が追加するのは、精度の異なる地図——**市区町村単位のマップ**です。クリックできる領域 が都道府県ではなく市・町・区になり、それらを県境をまたいでグループ化できます。 #### 地図データ 同梱の SVG マップ (`assets/svg/`) は、国土交通省が公開する _国土数値情報 (行政区域 データ N03)_ をもとに作成しています (データ基準日: 2024 年 1 月 1 日)。 * 出典: https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v3_1.html * 利用規約: https://nlftp.mlit.go.jp/ksj/other/agreement_01.html — 政府標準利用 規約 (第 2.0 版)。CC BY 4.0 と互換性があり、出典を明記すれば改変・再配布・商用 利用が認められています。 元データに加えた処理: 行政区域ポリゴンを都道府県の輪郭に統合、Web メルカトル (EPSG: 3857) への再投影、沖縄のはめ込み配置への移動、頂点の簡略化、SVG への変換、識別用 属性の付与。詳細は `assets/svg/japan/README.md` を参照してください。 **この地図を掲載する場合は、出典をページ内の見える場所に明記してください** (フッ ターやキャプションなどで構いません): > 「国土数値情報（行政区域データ）」（国土交通省） > (https://nlftp.mlit.go.jp/ksj/ > gml/datalist/KsjTmplt-N03-v3_1.html) を加工して作成 ## スクリーンショット [⌊フロント側に表示した都道府県マップ。47 都道府県を標準 8 地方にまとめ、地方ごと に色を変えています。⌉⌊フロント側に表示した都道府県マップ。47 都道府県を標準 8 地方 にまとめ、地方ごとに色を変えています。⌉[ フロント側に表示した都道府県マップ。47 都道府県を標準 8 地方にまとめ、地方ごとに 色を変えています。 [⌊地方をクリックすると、見出し・本文・リンクを持つポップアップが開きます。⌉⌊地方 をクリックすると、見出し・本文・リンクを持つポップアップが開きます。⌉[ 地方をクリックすると、見出し・本文・リンクを持つポップアップが開きます。 [⌊マップの編集画面。都道府県は地方ごとに並び、色とリンクを 1 県単位で上書きできます。⌉⌊ マップの編集画面。都道府県は地方ごとに並び、色とリンクを 1 県単位で上書きできます 。⌉[ マップの編集画面。都道府県は地方ごとに並び、色とリンクを 1 県単位で上書きできます。 [⌊配色: 全体の規定色に加えて地方ごとの色を設定でき、保存した色プリセットがどのカラー ピッカーの横にも並びます。⌉⌊配色: 全体の規定色に加えて地方ごとの色を設定でき、保存 した色プリセットがどのカラーピッカーの横にも並びます。⌉[ 配色: 全体の規定色に加えて地方ごとの色を設定でき、保存した色プリセットがどのカラー ピッカーの横にも並びます。 [⌊編集画面内のプレビューモーダル。編集画面を離れずにマップを確認できます。⌉⌊編集 画面内のプレビューモーダル。編集画面を離れずにマップを確認できます。⌉[ 編集画面内のプレビューモーダル。編集画面を離れずにマップを確認できます。 [⌊ブロックでのマップ設置。ブロックはマップの ID だけを保存し、描画はサーバー側で 行います。⌉⌊ブロックでのマップ設置。ブロックはマップの ID だけを保存し、描画はサーバー 側で行います。⌉[ ブロックでのマップ設置。ブロックはマップの ID だけを保存し、描画はサーバー側で行い ます。 [⌊保存した色プリセット。どのマップからでも呼び出せます。⌉⌊保存した色プリセット。 どのマップからでも呼び出せます。⌉[ 保存した色プリセット。どのマップからでも呼び出せます。 ## ブロック このプラグインは1個のブロックを提供します。 * Clickable Map of Japan Place a prefecture map (a clickable map of Japan) that you set up under Clickable Maps. ## インストール 1. プラグインを `/wp-content/plugins/japan-clickable-map/` にアップロードするか、ダッシュボード の **プラグイン 新規追加** からインストールします。 2. **プラグイン** 画面で有効化します。 3. **クリッカブル地図 (Clickable Maps) 新規追加** を開き、都道府県・配色・リンクを 設定して公開します。 4. Insert the **Clickable Map of Japan** block and pick your map from the list, or place the shortcode `[plg_jcm_map id="123"]` by hand — `123` is the map ID, which is the `post=` value in the address bar while you edit that map. #### ブロックをソースからビルドする `block/build/` のエディター用スクリプトは [@wordpress/scripts](https://www.npmjs.com/package/@wordpress/scripts) でコンパイルしています。圧縮前のソースは `block/src/` に同梱しています。ビルドし 直すには: ``` npm install && npm run build:block ``` ## FAQ ### Does the map need an API key or an external service? いいえ。地図はプラグインに同梱された SVG ファイルで、お使いのサーバー上で描画され ます。第三者への通信は行わず、プラグインから外部への HTTP リクエストは一切発生しま せん。 ### Can I show only part of Japan? はい。表示モードを `range` にして、表示したい都道府県を選んでください。選んだ県だけ が描画され、viewBox もその範囲に合わせて調整されます。 ### Can a click open a category or a specific post? はい。URL を直接入力する代わりに、サイト内を検索して投稿・固定ページ・カスタム投稿 タイプ・タクソノミーの語句を選べます。リンクは描画時に解決されるため、パーマリンク が変わっても切れません。 ### Are the maps accessible? クリックできる領域は実際のリンクで、都道府県名・地方名を `aria-label` として持ち ます。リンクのない県は不活性で、フォーカスも当たりません。 ### スマートフォンで地図の幅が広すぎます。 SVG は親要素の幅に合わせて拡大縮小します。ショートコードを任意の要素で囲むか、`class` 属性でクラスを付けてテーマの CSS でサイズを指定してください。 ### What happens to my maps if I uninstall the plugin? 既定では何も削除されません。きれいに消したい場合は、プラグインを削除する前に設定 画面で **アンインストール時にこのプラグインのデータをすべて削除する (Delete all data for this plugin on uninstall)** を有効にしてください。 ### What does the paid edition add? 市区町村単位のマップです。クリックできる領域が都道府県ではなく市・町・区になり、 それらを県境をまたいでグループ化できます。 ## 評価 このプラグインにはレビューがありません。 ## 貢献者と開発者 Japan Clickable Map はオープンソースソフトウェアです。以下の人々がこのプラグイン に貢献しています。 貢献者 * [ plugear ](https://profiles.wordpress.org/plugear/) “Japan Clickable Map” は1ロケールに翻訳されています。 [翻訳者](https://translate.wordpress.org/projects/wp-plugins/japan-clickable-map/contributors) のみなさん、翻訳へのご協力ありがとうございます。 [“Japan Clickable Map” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/japan-clickable-map) ### 開発に興味がありますか ? [コードを閲覧](https://plugins.trac.wordpress.org/browser/japan-clickable-map/)する か、[SVN リポジトリ](https://plugins.svn.wordpress.org/japan-clickable-map/)をチェック するか、[開発ログ](https://plugins.trac.wordpress.org/log/japan-clickable-map/)を [RSS](https://plugins.trac.wordpress.org/log/japan-clickable-map/?limit=100&mode=stop_on_copy&format=rss) で購読してみてください。 ## 変更履歴 #### 1.0.1 * Fixed: parts of the admin UI were shown in Japanese regardless of the site language. The preview button and modal, the region popover close button, the selected-prefecture counter, the unassigned list and the color preset controls are now translatable. * Fixed: the prefecture counter next to each region heading was blank on non-Japanese sites. * Fixed: the selected-prefecture counter switched language as soon as you ticked a checkbox, because the initial value and the live update came from different places. * Changed: `Plugin URI` now points at the English documentation. * Docs: corrected the installation steps (there is no shortcode to copy on the edit screen — the map ID is the `post=` value in the edit screen URL) and the list of detail levels (`low-smooth` was missing). #### 1.0.0 * 初回リリース。 ## メタ * バージョン **1.0.1** * 最終更新日 **9時間前** * 有効インストール数 **10未満** * WordPress バージョン ** 6.6またはそれ以降 ** * 検証済み最新バージョン: **7.0.3** * PHP バージョン ** 8.1またはそれ以降 ** * 言語 * [English (US)](https://wordpress.org/plugins/japan-clickable-map/)、[Japanese](https://ja.wordpress.org/plugins/japan-clickable-map/). * [プラグインを翻訳](https://translate.wordpress.org/projects/wp-plugins/japan-clickable-map) * タグ * [clickable](https://ja.wordpress.org/plugins/tags/clickable/)[japan](https://ja.wordpress.org/plugins/tags/japan/) [map](https://ja.wordpress.org/plugins/tags/map/)[shortcode](https://ja.wordpress.org/plugins/tags/shortcode/) * [詳細を表示](https://ja.wordpress.org/plugins/japan-clickable-map/advanced/) ## 評価 レビューはまだ送信されていません。 [Your review](https://wordpress.org/support/plugin/japan-clickable-map/reviews/#new-post) [すべてのレビューを見る](https://wordpress.org/support/plugin/japan-clickable-map/reviews/) ## 貢献者 * [ plugear ](https://profiles.wordpress.org/plugear/) ## サポート 意見や質問がありますか ? [サポートフォーラムを表示](https://wordpress.org/support/plugin/japan-clickable-map/)