ブログ初心者のmaikoです。
私が現在使用しているのはWordPressテーマ「ストーク」です。
ブログを書いてますと、もっと読む人に分かりやすいように
伝えたいという気持ちになり、
自ずと新しい知識も増えていきます。
例えば、自分が紹介したいお店がある場合に、
住所だけが書いてあるよりも、お店の地図と行き方が
書いてあったら分かりやすいですよね？
という事で、今回は【Googleマップ】をブログ内に埋め込む方法を紹介したいと思います。
ざっと早み表
２種類の方法
今回は２種類の方法を説明していきます。
- Googleマップから直接コードを習得して記事内に挿入する方法
- プラグインを使って挿入する方法
Googleマップから直接コードを習得して記事内に挿入する方法
地図だけを記事に表示させる
まずGoogleマップを開いて場所を入力します。そうすると場所が地図内に表示されます。（下の写真）
❖例として『ユニバーサルスタジオ』と入力しました
次に左上の赤枠のところをクリックします。
〖地図を共有または埋め込む〗をクリックします。
クリックすると下のように表示されます。
①〖地図を埋め込む〗をクリックする
②コードをコピーする
WordPressに反映させる
コピーしたら、記事内の表示したい場所にコードを貼り付けます。
その時、必ず「テキストモード」の方に貼り付けてください。
すると下の写真ように表示されます。
注意：プレビュー画面では表示されないことがありますが、公開後に表示さていますのでご安心を！！
目的地までのルートを表示させる
ある場所から目的地までの案内ルートを表示させたい場合の方法です。
下の赤枠をクリックしてください。
場所を入力します
❖例として『関西国際空港』と入力します。
そして先ほどと同様に地図を埋め込むコードをコピーして、
記事内に貼り付けます。公開にすると下のように表示されます。
プラグインを使って挿入する方法
地図の挿入でよく使われているプラグインはsimple–map
だと思います。私もインストールしてあります。でも今回は別のプラグインも紹介したいと思います。
このプラグインは、とても便利で簡単にコンテンツの装飾や見栄えを良くしてくれます。
例えば、見栄えのいいボタンやボックスが作れたり、
動画やYouTube、オーディオが簡単に挿入できます。
もちろんGoogleマップも簡単に挿入できます。
プラグインをインストールすると、下のように記事投稿に〖ショートコードを挿入〗のボタンが現れます。
ボタンをクリックします。
クリックしてGoogleマップをクリックします。
次にマーカーの所に目的地の名前もしくは住所を入力します。
プレビューで確認します。ＯＫなら左下の〖ショートコード挿入〗をクリック。
すると下の黒枠のように記事内に表示されます。
プレビューで確認すると下のように表示されています。
まとめ
Googleマップから直接コードを習得して記事内に挿入する方法は、
目的地までのルートを表示させたい場合に
プラグインを使って挿入する方法は、
目的地だけを表示させたい場合に
地図をよく使うサイトではぜひ使ってみて下さい。
コメントを残す