WordPress ブログに地図を埋め込むやり方[初心者向け]

お店やおすすめの場所を紹介するブログなどを書いていると、グーグルマップを埋め込みたいな～っていうときありますよね。

「他の人のブログを見ると、グーグルマップが表示されているところが多いなぁ。」

「自分もやってみたいけど、やり方がわからない・・・。」

「プラグインとか言われてもめんどくさそうだからやりたくない・・・。」

そんな方のために、プラグインを使わずに簡単に記事に地図を埋め込むやり方をご紹介します。

目次

• 1. 記事にグーグルマップを埋め込む方法
  • 1.1. グーグルで表示させたい場所を検索する
  • 1.2. 埋め込むHTMLをコピーする
  • 1.3. WordPressに地図を埋め込む
• 2. 文章の間に地図を埋め込む方法
• 3. 終わりに

記事にグーグルマップを埋め込む方法

グーグルで表示させたい場所を検索する

まずはグーグルで、表示させたい場所を検索します。

今回は山形で有名な観光スポット、銀山温泉でやってみましょう。

グーグルの[検索ボックス]に[銀山温泉]と打ち込み、検索します。

そうしたら、検索ボックスの下にある[地図]というところをクリックします。

地図が開かれるので、左側の検索ボックスの脇にある横3本線をクリックして[メニュー]を開きます。

[メニュー]が開かれます。

メニューの[地図を共有または埋め込む]をクリックします。

埋め込むHTMLをコピーする

[地図を共有または埋め込む]をクリックすると、[共有]の画面が開きます。

タブ[地図を埋め込む]をクリックし、[HTMLをコピー]をクリックして、コピーします。

クリックするとクリップボードにコピーされます。

WordPressに地図を埋め込む

次はWordPressを開いて、地図を埋め込んでいきます。

ちょっとわかりづらいかもしれませんが、右上にある点が3つ並んでいる所をクリックして、[ツールと設定をさらに表示]を開きます。

そうすると設定画面が表示されるので、その中の[コードエディター]をクリックします。

コードエディターをクリックすることで、[ビジュアルエディター]から[コードエディター]に切り替わります。

赤枠で囲っているところに、先ほどグーグルでコピーしたHTMLを貼りつけます。

貼りつけたら、もう一度[ツールと設定をさらに表示]をクリックして、今度は[ビジュアルエディター]をクリックしてください。

そうすると、記事の中に地図が埋め込まれます！

表示がおかしい？

大丈夫です。プレビューで確認すればわかりますが、しっかりと埋め込まれています。

それではプレビューで見てみます。

プレビュー画面です。綺麗にMAPが表示されていますね！

文章の間に地図を埋め込む方法

やり方は同じなんですが、実際はこの上下に文章が入りますよね。

空白の所にいきなりポンと地図を置くというのはあまりないと思います。

なので、文章が入っている状態だとどういう風に埋め込めばいいのかも見ていきましょう。

今回は、住所と電話番号の間に地図を埋め込みたいと思います。

先ほどと同じように、[ツールと設定をさらに表示]をクリックして、[コードエディター]をクリックします。

住所のブロックと電話番号のブロックの間に地図を埋め込みたいので、赤い矢印の所が実際に地図を埋め込む場所になります。

なにやらコードが書かれていますが、何も考えずに

と

の間にカーソルを置いて、HTMLのコードをぶち込んでください。

ちょっと小さくてわかりづらいので拡大画像もどうぞ。

この状態で、[ビジュアルエディター]に切り替えます。

そうすると、無事に地図が住所と電話番号の間に埋め込まれました！

終わりに

今回は、記事内に地図を埋め込む方法のご紹介でした。

プラグインとか聞くとちょっと難しそうって思ったりして、ちょっと手を出しにくかったりもしますが、今回の方法なら誰でも簡単にできるかなと思います。

初心者の方でもできるように、なるべくわかりやすくまとめていきたいと思います。

このほかにもワードプレスについてまとめた記事がありますので、良かったら少し眺めていってください～♪

WordPressで見やすい記事を作ろう！[初心者向けに解説]