1. TOP
  2. Wordpress
  3. Wordpress設定・全般
  4. ワードプレスのブログ記事にGoogleマップを埋め込む2ステップ

ワードプレスのブログ記事にGoogleマップを埋め込む2ステップ

 2017/02/25 Wordpress設定・全般  

あなたは何かの建物の場所や住所などを示すのに、

「ブログ記事の中にGoogleマップを埋め込みたいな・・・」と感じていませんか?

ブログ記事の中へのGoogleマップの埋め込みは、

  • 埋め込みコードを取得すること
  • コードを記事に貼り付けること

というたった二つだけです。

ぜひこの記事をご覧いただき、マップの埋め込みをマスターしてください。

グーグルマップの埋め込みコードを取得する方法

まずは記事にGoogleマップを埋め込むためのコードを取得します。

まずは自分が記事の中で紹介したい建物の場所を地図内で指定します。

Googleマップはこちら

マップを開いたら、左上の検索窓に建造物名もしくは、住所を入力します。

マップの使い方

次に「共有」をクリックします。

共有をクリック

「地図を埋め込む」をクリックし、「中」と書いてあるタブをクリックします。

ここでは埋め込む地図のサイズを選ぶことができます。

  • 小=400 x 300
  • 中=600 x 450
  • 大=800 x 600

になります。

埋め込みコードそ設定

また、「カスタムサイズ」では、任意の地図のサイズを選ぶことができます。

カスタムサイズ

サイズが決定したら、埋め込みコードをコピーしておきましょう。

埋め込みコードの取得

ここまでで、埋め込みコード取得は完了となります。

取得したコードをブログ記事に埋め込む方法

次に取得した埋め込みコードを記事に埋め込んでいきます。

ブログ記事のエディタを開いてください。

「テキスト」をクリックし、先ほどのコードを貼り付けます。

コードを貼り付けている

「ビジュアル」に戻って、正しく地図が表示されているか確認してください。

地図の確認

正しく表示されていればOKです。

ショートコードを使ってGoogleマップを埋め込む方法

実は埋め込みコードを使う以外にもGoogleマップを埋め込む方法があります。

ショートコードを使うやり方です。

ショートコードとは、ワードプレスプラグインShortcodes Ultimateのことです。

Shortcodes Ultimate

まずは記事エディタで、「ショートコード」をクリックします。

ショートコードをクリック

次に「Googleマップ」をクリックします。

Googleマップ

次に記事に埋め込みたい地図のサイズを決めます。

スマホで見たときの見栄えがいいように、「レスポンシブ」「はい」にしておきましょう。

サイズ決定

次に「マーカー」の欄に、「博多駅」「福岡市博多区◯◯-◯」などの住所を入力します。

マーカーを追加

そして、「ショートコードを挿入」をクリックします。

ビジュアルエディタを確認するとこんな感じです。

ショートコードで入力したグーグルマップ

たったこれだけで完了となります。

プレビューを確認するときちんと表示されています。

プレビュー

かなり簡単にマップを表示することができました。

※ショートコードを使ってマップを埋め込む時には、Googleマップで検索した時に検索結果が表示される住所や建物でないと、正しく表示されないようです。
架空の建物や一般名称でない建物などは表示されないので気をつけてください。

まとめ

以上がGoogleマップの埋め込み方法となります。

埋め込みコードを取得するやり方をメインでお伝えしましたが、プラグインさえインストールしていれば、簡単にショートコードは使えるのでぜひそちらも活用してみてください。

以下の記事では地図の埋め込み以外にも、ブログ記事に装飾する方法をお伝えしています、ぜひご覧ください。

ブログ記事に画像を挿入する方法

ブログ記事にYoutube動画を埋め込む方法

ブログ記事で表(テーブル)を作成する方法


このサイトでは、情報の専門性・信ぴょう性に配慮しています。そのため、中央省庁のデータやGoogle公式資料、市場分析データ、書籍などの信用できるデータを参照するよう、心がけております。ポリシーについて

無料E-BOOK|0から始めるワードプレスマーケティング実践ガイド

0から始めるワードプレスマーケティング
このE-BOOKは次のようなノウハウをお伝えしています。

  •  ・ワードプレスブログを立ち上げてから、実際にビジネスに繋げる方法
  •  ・ブログを使った集客方法の全体像
  •  ・ブログやメルマガなど、様々なツールをより効果的に使いこなす方法

以下のボタンからダウンロードしてください。

ダウンロードする