日本地図をサイトに導入したくて方法を色々模索しました。
無料～有料まで、プラグインを入れるものから、プログラムをいじるものまでいくつか出てきましたが、一番かんたんに導入できそうな「インタラクティブ日本地図」を導入してみました
19ドルなり（公式サイトでクーポンコードが出てて2300円ちょっとでした）
導入方法は簡単。こちらのサイトで「ダウンロード19ドル」ボタンから購入します
インタラクティブ日本地図 [WordPress プラグイン]
インタラクティブ日本地図WordPressプラグインをインストール、楽々カスタマイズして、ショートコードの挿入をするだけで、ウェブサイトにオリジナルの地図を表示することができます。
www.wpmapplugins.com
購入したら、「japan-map-package.zip」というファイルをダウンロードします
このファイルを、Wordpressのアドミン画面から「プラグイン」の「新規追加」すればいいのですが、注意点は、「japan-map-package.zip」はプラグインファイルではなく、この中に「jp-map」というプラグインファイルが3つ入ってます
(-ⅱ、-ⅲというファイルがあるのは、「最大3種類の地図まで」作成できる時の2つ目、3つ目のファイルです)
なので、一度解凍していただいたうえで、「jp-map」というファイルをアップロードしていただくと、WordPressのメニューバーに、Japan Mapが出てきます。（画像は-ⅱ、-ⅲもアップロードしたものです）
あとは、こちらの画面から簡単にリンク等の編集ができて、上部に表示してあるショートコード[jp_map]を埋め込むだけで、表示できます
こんな感じで完成です
インタラクティブ日本地図の表記を英語に変換する方法
デフォルトでダウンロードしたら、地図の表記は日本語でした
これを英語で表記したいと思ったら、管理画面からは出来ませんでした…
結果的には、「プラグインファイルエディター」から、編集するプラグインで「Japan map」を選択し、「includes」の下部にある「map.php」を選択します
54行目からが、地図上の都道府県名を表示している場所になるので、ここを英語名に編集すれば、表記を英語に変えることが出来ます
↓一つずつタイプするのが面倒であればこちらをコピペすれば一発です
<text id="jpvn_1" class="hokkaido" transform="matrix(1 0 0 1 442 112)" font-size="12">Hokkaido</text>
<text id="jpvn_2" class="aomori" transform="matrix(1 0 0 1 380 231)" font-size="12">Aomori</text>
<text id="jpvn_3" class="iwate" transform="matrix(1 0 0 1 439 267)" font-size="12">Iwate</text>
<text id="jpvn_4" class="miyagi" transform="matrix(1 0 0 1 426 315)" font-size="12">Miyagi</text>
<text id="jpvn_5" class="akita" transform="matrix(1 0 0 1 332 274)" font-size="12">Akita</text>
<text id="jpvn_6" class="yamagata" transform="matrix(1 0 0 1 324 302)" font-size="12">Yamagata</text>
<text id="jpvn_7" class="fukushima" transform="matrix(1 0 0 1 409 364)" font-size="12">Fukushima</text>
<text id="jpvn_8" class="ibaraki" transform="matrix(1 0 0 1 395 412)" font-size="12">Ibaraki</text>
<text id="jpvn_9" class="tochigi" transform="matrix(1 0 0 1 348 388)" font-size="12">Tochigi</text>
<text id="jpvn_10" class="gunma" transform="matrix(1 0 0 1 321 400)" font-size="12">Gunma</text>
<text id="jpvn_11" class="saitama" transform="matrix(1 0 0 1 332 421)" font-size="12">Saitama</text>
<text id="jpvn_12" class="chiba" transform="matrix(1 0 0 1 388 445)" font-size="12">Chiba</text>
<text id="jpvn_13" class="tokyo" transform="matrix(1 0 0 1 380 464)" font-size="12">Tokyo</text>
<text id="jpvn_14" class="kanagawa" transform="matrix(1 0 0 1 359 482)" font-size="12">Kanagawa</text>
<text id="jpvn_15" class="niigata" transform="matrix(1 0 0 1 287 358)" font-size="12">Niigata</text>
<text id="jpvn_16" class="toyama" transform="matrix(1 0 0 1 266 395)" font-size="12">Toyama</text>
<text id="jpvn_17" class="ishikawa" transform="matrix(1 0 0 1 222 384)" font-size="12">Ishikawa</text>
<text id="jpvn_18" class="fukui" transform="matrix(1 0 0 1 208 408)" font-size="12">Fukui</text>
<text id="jpvn_19" class="yamanashi" transform="matrix(1 0 0 1 308 438)" font-size="12">Yamanashi</text>
<text id="jpvn_20" class="nagano" transform="matrix(1 0 0 1 294 416)" font-size="12">Nagano</text>
<text id="jpvn_21" class="gifu" transform="matrix(1 0 0 1 257 436)" font-size="12">Gifu</text>
<text id="jpvn_22" class="shizuoka" transform="matrix(1 0 0 1 295 485)" font-size="12">Shizuoka</text>
<text id="jpvn_23" class="aichi" transform="matrix(1 0 0 1 271 459)" font-size="12">Aichi</text>
<text id="jpvn_24" class="mie" transform="matrix(1 0 0 1 266 498)" font-size="12">Mie</text>
<text id="jpvn_25" class="shiga" transform="matrix(1 0 0 1 228 452)" font-size="12">Shiga</text>
<text id="jpvn_26" class="kyoto" transform="matrix(1 0 0 1 195 424)" font-size="12">Kyoto</text>
<text id="jpvn_27" class="osaka" transform="matrix(1 0 0 1 211 477)" font-size="12">Osaka</text>
<text id="jpvn_28" class="hyogo" transform="matrix(1 0 0 1 186 455)" font-size="12">Hyogo</text>
<text id="jpvn_29" class="nara" transform="matrix(1 0 0 1 220 494)" font-size="12">Nara</text>
<text id="jpvn_30" class="wakayama" transform="matrix(1 0 0 1 207 530)" font-size="12">Wakayama</text>
<text id="jpvn_31" class="tottori" transform="matrix(1 0 0 1 153 430)" font-size="12">Tottori</text>
<text id="jpvn_32" class="shimane" transform="matrix(1 0 0 1 90 447)" font-size="12">Shimane</text>
<text id="jpvn_33" class="okayama" transform="matrix(1 0 0 1 152 466)" font-size="12">Okayama</text>
<text id="jpvn_34" class="hiroshima" transform="matrix(1 0 0 1 120 478)" font-size="12">Hiroshima</text>
<text id="jpvn_35" class="yamaguchi" transform="matrix(1 0 0 1 55 475)" font-size="12">Yamaguchi</text>
<text id="jpvn_36" class="tokushima" transform="matrix(1 0 0 1 171 505)" font-size="12">Tokushima</text>
<text id="jpvn_37" class="kagawa" transform="matrix(1 0 0 1 162 488)" font-size="12">Kagawa</text>
<text id="jpvn_38" class="ehime" transform="matrix(1 0 0 1 110 513)" font-size="12">Ehime</text>
<text id="jpvn_39" class="kochi" transform="matrix(1 0 0 1 154 537)" font-size="12">Kochi</text>
<text id="jpvn_40" class="fukuoka" transform="matrix(1 0 0 1 34 498)" font-size="12">Fukuoka</text>
<text id="jpvn_41" class="saga" transform="matrix(1 0 0 1 1 519)" font-size="12">Saga</text>
<text id="jpvn_42" class="nagasaki" transform="matrix(1 0 0 1 15 548)" font-size="12">Nagasaki</text>
<text id="jpvn_43" class="kumamoto" transform="matrix(1 0 0 1 8 568)" font-size="12">Kumamoto</text>
<text id="jpvn_44" class="oita" transform="matrix(1 0 0 1 107 557)" font-size="12">Oita</text>
<text id="jpvn_45" class="miyazaki" transform="matrix(1 0 0 1 99 580)" font-size="12">Miyazaki</text>
<text id="jpvn_46" class="kagoshima" transform="matrix(1 0 0 1 20 624)" font-size="12">Kagoshima</text>
<text id="jpvn_47" class="okinawa" transform="matrix(1 0 0 1 411 560)" font-size="12">Okinawa</text>これで表記は英語に変わりました！
実装した様子はこちらのページの中ほどをご覧ください
Japan Wonder Travel Blog
Learn about the wonders of Japan including everything from the best things to do, travel itineraries, as well as food, cultural and historical, and seasonal and...
blog.japanwondertravel.com
コメント