【WordPress】Googleマップを埋め込んでブログに表示する

最近ホームページの請負が忙しいので、それはそれでいいことなんですが、ブログがおろそかになっていて、書きたいことが出てきたのに…とちょっと凹んでます。

ホームページの作成を請け負っていると『googleマップを埋め込んでほしい』という依頼が結構あります。

サイトやブログにgoogleマップってどうやって埋め込むんだろう??と思ったのでいろいろ調べてみたら簡単だったので、ご紹介します。

【Wordpress】Googleマップを埋め込んでブログに表示する

googleマップを開いてiframeコードをコピーする

まずはgoogleマップを開いて表示したい目的の場所を検索します。

今回はわかりやすく?『東京都庁』にしてみました。

目的の場所(東京都庁)を検索して、下にある『共有』をクリックします。

 

 

『共有』をクリックすると、下の図のように『リンクを共有』、『地図を埋め込む』と上に項目が二つ出てくるので、『地図を埋め込む』をクリックします。

 

 

そして、『地図を埋め込む』をクリックすると、真ん中にiframeコードが出ますので、こちらをコピーします。

 

コピーしてきたiframeコードをブログに貼り付ける

先ほどコピーしてきた『東京都庁』のiframeコードをこのブログに貼ってみたいと思います。

それでは、このブログに東京都庁の地図を埋め込んでみます。

貼り付ける時は必ずテキストモードで貼り付けて下さい。

すると、下のように、こんな感じで表示されます。

 

レスポンシブ対応でテーブルを作る

レスポンシブテーブルで表示したい時があると思うので、そちらの方法も掲載したいと思います。

レスポンジブとはスマホで表示した時もきれいに見えるというものです。

テーブル(枠)を付けて一覧などで表示する時にはきれいでとても便利です。

レスポンシブ対応にする時はこちらのサイトさんがとても参考になります。

https://inthecom.net/718

テーブルをレスポンシブにできるので、コピペをしてレスポンシブテーブルを作成する時にも使えてとても便利です。

コピペさせていただけるので感謝ですね♪

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

【お名前.com】独自ドメインから個人情報が流出!?Whois情報の変更方法は?

スポンサーリンク
スポンサーリンク



Accessを独学で勉強したい方へ
Accessおすすめの参考書

Accessを独学で勉強しようと思っている方へおすすめの参考書をまとめました。私も使っている選りすぐりの参考書です。ぜひご覧ください。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です