
こんにちは!やさしいワードプレスの田中です。
あなたはワードプレスでこんなお困りごとはありませんか??

この記事ではGoogleマップを使った「ワードプレスに地図を埋め込む方法」を初心者にもできるように解説します。
地図を埋め込むことでサイトに信頼性が出るので、ぜひ参考にされてくださいね。
目次
Googleマップ(地図)を埋め込む方法
Googleマップ(地図)を埋め込む作業は以下の3ステップです。
【1】Googleマップで住所入力
【2】コードを取得
【3】Googleマップを記事に埋め込む
特に難しい作業はなく簡単に設定できるので、初心者の方も挑戦してみてくださいね。
(1)Googleマップで住所入力
まずは「Googleマップ」を開き、住所・名所を入力します。
住所・名所を下記の赤枠の中へ入力し、虫眼鏡のマークをクリックすると、その住所の地図が表示されます。
(2)コードを取得
次に記事に埋め込む「コードを取得」します。
先ほど入力した名所・住所から下記の赤枠の「共有」をクリックします。
「共有」をクリックすると下記のような画面が出てくるので、「地図を埋め込む」に切り替えます。
「地図を埋め込む」に切り替えると下記の画面が表示されます。
赤枠の「大・中・小」で埋め込む地図のサイズを選択できます。
埋め込む地図のサイズ
【大】400 × 300
【中】600 × 450
【小】800 × 600
基本的に記事に埋め込むのであれば「中 600 × 450」で問題ありません。
サイズを選択すると下記の赤枠の箇所にコードが表示されます。
こちらを記事に埋め込むとGoogleマップ(地図)が表示されるようになります。
実際のコードをコピペしてもいいですが、右側の「HTMLをコピー」を押すとワンクリックでコピーが可能なので、ぜひそちらを活用されてくださいね。
(3)Googleマップを記事に埋め込む
では、実際にGoogleマップを記事に埋め込んでいきます。
埋め込む方法は、
【1】クラシックエディッター
【2】グーテンベルク
2通りの方法があるので、それぞれ解説していきます。
クラシックエディッターの埋め込み方法
ワードプレスの地図を埋め込む記事を開き、下記の赤枠をクリックし「テキストモード」にします。
Googleマップで「HTMLをコピー」をそのまま添付しすれば完了です。
実際に表示されているか「ビジュアルモード」に戻し、確認してみましょう!
グーデンベルグでの埋め込み方法
次はグーデンベルグでの埋め込み方法です。
埋め込む記事を開き「ブロック→カスタムHTML」を選択します。
」
「カスタムHTML」を選択すると下記の画面が表示されます。
そこにGoogleマップで取得したコードを添付すれば完成です!
実際に設置されているか確認してみましょう。
確認方法は「プレビュー」に切り替えるとできるので必ず確認されてくださいね。
スマホ表示での「Googleマップ」サイズ対策
Googleマップですが「スマホ表示」だと横幅がはみ出して表示される可能性があります。
なので、スマホ画面の枠にしっかりと表示されるように設定しましょう!
ではどうやって設定するのか??先ほど添付したコードを修正していきます。
添付したコード(iframeタグ内)にある「width=”600″」を「width=”100%”」に変更すればOKです。
まとめ
「【ワードプレス】Googleマップ(地図)の埋め込む方法」はいかがだったでしょうか??
Googleマップ(地図)を埋め込む作業は、こちらの3ステップです。
【1】Googleマップで住所入力
【2】コードを取得
【3】Googleマップを記事に埋め込む
Googleマップを埋め込むことで、しっかりと場所が特定できるのでサイトの信頼が向上します。
初心者でも簡単にできるので、ぜひやってみてくださいね。
この記事がワードプレスを活用する上で、何かお役に立つことができれば幸いです。
最後まで読んでいただきありがとうございます。
この記事へのコメントはありません。