知り合いの社長さんから、ブログに地図を入れたいけどどうしたらいい？と電話がかかってきました。
そっか、そう言えば随分前にやったけど、どうしたっけ…？
会社やお店のブログを作っている人には、地図は必須ですね。
という訳で、その方法をご紹介します。
Contents
プラグインを使わずに地図を挿入する方法
割と簡単に出来るし、地図の挿入なんてそう何度もしないし…
そんな場合はわざわざプラグインを使わなくても出来る方法があります。
方法としては
①Google Mapでコードを取得
↓
②Google Mapを埋め込む
これだけでOKです。
では、順番に解説していきます。
1：Google Mapでコード取得
まずはGoogle Mapに行きます。
左上の検索バー内に、表示させたい住所や施設名、ビル名等を入力します。
今回は、私が大好きな埼玉の鉄道博物館にしてみました。
検索すると、↑の様に表示されます。
赤で囲った共有をクリック。
すると↓の様な画面が出るので、「地図を埋め込む」をクリック。
するとこんな↓画面に切り替わります。
次にブログで表示させる地図の大きさを選択します。
小・中・大と好きなサイズに出来るカスタムサイズの4種類があります。
小は400×300ピクセル、中は600×450ピクセル、大は800×600ピクセルです。
サイズを選ぶとそのサイズの画像が表示されるので、サイズを見ながら選んでください。
尚、3種類のサイズではどうも…という場合はカスタムサイズで好きなサイズに出来ます。
ブログのデザインなどによって表示したいサイズは変わると思いますので、ご自身にあったサイズを探して下さい。
サイズが決まったら、コードをコピーします。
記事にコードを挿入する
コードを取得したら、地図を入れたい記事を開きます。
地図を挿入したい場所が決まったら、エディタの「挿入」→「メディア」をクリック。
※この時、ビジュアルエディターのプラグイン「TinyMCE Advanced」が入っていると簡単です。
↓の様な画面が開くので、「埋め込む」をクリックしてから先ほど取得したGoogleMapのコードをペーストし、「OK」をクリック。
これで完成です。
↓の様に地図が表示されました。
この方法はとても簡単なので、わざわざプラグインを必要としません。
会社やお店の紹介なら一度きりで済みます。
プラグインを入れると重くなる他、他のプラグインと干渉する事もあるので、頻繁に使わないならこれで十分です。
地図を挿入するプラグインとしては、「simple-map」というプラグインがよく使われていますが、これだとGoogleでAPIキーを取得する必要があります。
これにはGoogleアカウントがないと使えません。
わざわざそこまでしなくても上記の方法でも出来ますので、一度試してみてください。
ワードプレスに困っていませんか？
初心者向けのワードプレス講座開講中！
