SPGアメックス紹介に関するお問い合わせはこちら

 WordPressのブログ記事にGoogleマップを埋め込む方法【プラグインなし】

Googleマップをブログに埋め込む方法

ブログでお店やお出かけスポットを紹介する時Googleマップで場所を表示したいことってありますよね。

例えば以下の記事でお出かけスポットの地図を表示しています。

Googleマップをブログ内に直接表示したほうが公式サイトのアクセス情報にリンクしたり画像の地図を載せるよりもユーザーにとって便利です。

Googleマップをブログに埋め込む方法はいくつかありますが、今回は一番簡単なプラグインを使わない方法をご紹介します。

この記事でわかること
  1. Googleマップを記事に埋め込む方法
  2. 埋め込むGoogleマップのサイズを変更する方法
  3. Googleマップを中央揃えにして表示する方法

Googleマップをブログ記事内に埋め込む方法

GoogleマップをWordPressのブログ記事内に埋め込むには以下の3ステップで簡単にできます。

Googleマップを記事内に埋め込む方法
  1. Googleマップで表示したい場所や経路を検索
  2. 埋め込むGoogleマップのサイズをカスタマイズ
  3. Googleマップのコードを記事に貼り付けて配置を調整

Step1:Googleマップで埋め込みたい場所や経路を検索する

初めにGoogleマップにアクセスしてブログ記事に埋め込みたい場所や経路を検索します。

左上の検索ボックスで表示したい場所を検索してください。
ここでは東京駅で検索してみます。

目的地の経路を表示することもできます。

品川駅から東京駅までの経路を検索してみます。
「ルート・乗換」をクリックしてください。

Googleマップをブログに埋め込む方法

出発地と目的地、移動手段を選択します。

するとルートが表示されます。

Googleマップにブログを埋め込む方法 経路検索

Step2:埋め込むGoogleマップのサイズをカスタマイズする

埋め込みたい地図を表示出来たら次に埋め込むGoogleマップのサイズを調整します。

「共有}>「地図を埋め込む」の順にクリックします。

Googleマップにブログを埋め込む方法 埋め込み

表示されたマップに問題がないことを確認してください。

サイズのカスタマイズを行います。

サイズは小、中、大と自分でサイズを自由に決められるカスタマイズの4つです。

Googleマップをブログに埋め込む方法サイズ変更

実際の表示は以下のようになります。

小サイズ

中サイズ

大サイズ

お好みのサイズを選んでください。

Step3:Googleマップのコードを記事に貼り付けて配置を調整する

サイズが決まったらいよいよブログの記事にGoogleマップを埋め込みます。

「HTMLをコピー」をクリックしてコードをコピーします。

Googleマップをブログを埋め込む方法 コードコピー

コピーしたコードを記事内に貼り付けます。
挿入したい場所を右クリックして「貼り付け」か「CTRL」+「V」キーでできます。

段落ブロックにそのまま貼り付けても問題ないですが、うまく表示されない場合は「カスタムHTML」ブロックに変更して貼り付けてみてください。

ただこのまま張り付けただけでは左寄せで表示されてしまいます。

次はGoogleマップを中央揃えで表示する方法を解説します。

中央揃えにするにはHTMLの修正が必要です。
下の画像の矢印の部分にcenterタグを追加します。

<figure><iframe ~ ⇒ <figure><center><iframe  ~
~ </iframe></figure> ⇒ ~ </iframe></center></figure>
Googleマップ埋め込みコード 中央ぞろえ

「プレビュー」をクリックして表示を確認してください。

これでGoogleマップの埋め込みを完了です。

Googleマップをブログ記事内に埋め込む方法まとめ

記事内に地図があるだけでユーザの利便性が高まります。

Googleマップの埋め込みはとても簡単ですので是非試してみてください。

この記事のまとめ
  • Googleマップの埋め込みはコードをコピペするだけ
  • Googleマップのサイズは自由に調整可能
  • Googleマップを中央揃えで表示するにはHTMLの修正が必要

Googleマップ以外にもWordPressでは簡単にいろいろなサービスと連携ができます。

ブログにツイッターを埋め込ん方法はこちらの記事で紹介しています。

ランキング参加中!応援お願いします
ブログランキング・にほんブログ村へにほんブログ村

コメント

タイトルとURLをコピーしました