「アフィリエイトを利用した記事があります」

ワードプレスに地図を埋め込みたい!悩んでたけど…3分で解決した話

ワードプレスに地図を埋め込みたい!悩んでたけど…3分で解決した話 ワードプレス

今日はは私が実際に経験したGoogle マップの設置方法についてお話ししたいと思います。

実は先日、WordPressのブログにGoogle マップを設置することになったのですが、最初は「難しそう」と思って尻込みしていたんです。

でも、実際にやってみたら驚くほど簡単でしたよ。

そこで今日は、私のように「難しそう」と思っている方のために、具体的な設置方法を説明していきますね。

ワードプレスに地図を埋め込みたい!

グーグルマップ風アイコン

まずは、この記事のポイントをまとめておきます。

  • Google マップのコードを取得する方法が意外と簡単
  • ブロックエディターを使えばすぐに設置できる
  • 地図のサイズは4つのパターンから選べる
  • プレビューで確認すれば失敗しない
  • 便利なプラグインも紹介します

それでは、順番に説明していきますね。

Google マップのコードを取得する方法

最初に必要なのは、Google マップのコードを取得することです。

私も最初は「コードって何?」と思いましたが、実際にやってみると本当に簡単でした。

まず、Google マップにアクセスして、設置したい場所を検索します。

私の場合は、実家の最寄り駅を検索してみました。

すると、地図上にその場所が表示されます。

次に画面右側にある「共有」ボタンをクリックします。

ここで少し迷ってしまう方もいるかもしれませんが、大丈夫です。

クリックすると「地図を埋め込む」という項目が出てくるので、それを選びます。

地図のサイズが選べる?

ここからが意外と面白いところなんです。

地図のサイズを選べるんですよ。

小さいサイズから大きいサイズまで4つのパターンがあって、自分のブログに合わせて選べます。

  • 小サイズ:400×300ピクセル
  • 中サイズ:600×450ピクセル
  • 大サイズ:800×600ピクセル
  • カスタムサイズ:自分で設定可能

私の場合は、ブログのデザインに合わせて中サイズを選びました。

スマートフォンで見る方が多いので、大きすぎない方が見やすいかなと思ったんです。

WordPressでの設置作業

さて、ここからがWordPressでの設置作業になります。

これが一番心配だったんですが、実は一番簡単でした。

WordPress の管理画面にログインして、編集画面を開きます。

そこで「カスタムHTML」というブロックを選びます。

これ、最初は「HTMLって何?」と思いましたが、要はコードを貼り付ける場所なんですよ。

先ほどGoogle マップでコピーしたコードを、このカスタムHTMLの部分に貼り付けます。

これだけで設置は完了です。

本当に驚くほど簡単でしたよ。

必ずプレビューで確認

ただし、ここで一つ大切なポイントがあります。

必ずプレビューで確認することです。

私も最初は確認せずに公開しようとしましたが、父に「確認した方がいいんじゃない?」とアドバイスをもらって、プレビューで見てみました。

プレビューで確認すると、地図がきちんと表示されているかどうかが分かります。

もし表示されていなければ、コードの貼り付けを間違えているかもしれません。

その場合は、もう一度コピー&ペーストをやり直してみましょう。

ちなみに、さらに便利な使い方もあるんです。

例えば、会社概要ページに地図を設置する場合は、固定ページの編集画面で同じように設置できます。

プラグインを利用する方法もある?

グーグルマップアイコン

また、もっと本格的に使いたい方には「WP Google Maps」というプラグインもあります。

これを使うと、地図上にオリジナルのアイコンを表示させたり、デザインをカスタマイズしたりできるんです。

ただし、このプラグインには無料版と有料版があって、無料版だと機能が限られます。

それに、操作画面が英語なので、最初は少し戸惑うかもしれません。

私も試してみましたが、慣れるまでは基本的な設置方法で十分かなと思いました。

やってみることが大切

さて、ここまで説明してきましたが、実は一番伝えたいことがあります。

それは「難しそう」と思って諦めないことです。

私も最初は「パソコンに詳しくないから無理かも」と思っていました。

でも、実際にやってみたら3分程度で設置できたんです。

今では、ブログの記事に地図を設置するのが楽しみになっています。

特に、お店の場所や観光スポットを紹介する記事には、必ずGoogle マップを設置するようにしています。

読者の方から「地図があって場所が分かりやすかった」というコメントをいただくと、本当に嬉しいですね。

設置手順のおさらい

最後に、設置手順をもう一度おさらいしておきましょう。

  1. Google マップで設置したい場所を検索する
  2. 「共有」から「地図を埋め込む」を選ぶ
  3. 地図のサイズを選んでコードをコピーする
  4. WordPressの編集画面で「カスタムHTML」を選ぶ
  5. コードを貼り付けてプレビューで確認する

このように、思っているよりもずっと簡単なんです。

「私にもできるかな」と思っている方は、ぜひチャレンジしてみてくださいね。

ワードプレスに地図を埋め込みたい時は? まとめ

みなさんも、ブログやWebサイトにGoogle マップを設置して、記事をより分かりやすく、より便利なものにしていきましょう。

最後までお読みいただきありがとうございました!