【WordPress】記事にGoogle Map(グーグルマップ)を埋め込んでレスポンシブ対応する方法

【WordPress】記事にGoogle Map(グーグルマップ)を埋め込んでレスポンシブ対応する方法

【WordPress】記事にGoogle Map(グーグルマップ)を埋め込んでレスポンシブ対応する方法

【WordPress】記事にGoogle Map(グーグルマップ)を埋め込んでレスポンシブ対応する方法
最終更新日:2019.03.12

オススメのお店を紹介したり道順を案内したり、記事に地図を載せたい時ってありますよね。
そんな時はGoogle Mapを記事に貼り付けましょう!

やり方は簡単!

Google Mapを貼り付ける

Google Mapのサイトでブログに貼り付けたいポイントをチェック!

今回は明治神宮をポイントにしました。

  • 【WordPress】記事にGoogle Map(グーグルマップ)を埋め込んでレスポンシブ対応する方法左の情報エリア内にある【共有】をクリック
  • 【WordPress】記事にGoogle Map(グーグルマップ)を埋め込んでレスポンシブ対応する方法①地図を埋め込むを選択し②HTMLをコピー
  • コピーしたタグをテキストモードにした記事内に貼り付けると…
完成!!

レスポンシブ対応

ん?でもなんだか横幅がフィットしていません。
これは貼り付けたタグの中にwidth="600"と指定がある為です。

この部分をwidth="600"width="100%"に変更してください!

<iframe src="https://www.google.com/maps/embed?pb=☓☓☓" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe><br />

【WordPress】記事にGoogle Map(グーグルマップ)を埋め込んでレスポンシブ対応する方法

結果…

きれいにフィットしました。
横幅を100%にしておけばスマフォ表示の時もキレイに収まってくれますよ。

なこ
できたー!!情報サイトっぽくていかしてる!