グーグルマップをライブドアブログの記事に埋め込む方法 HTML

・ライブドアブログの記事にグーグルマップを埋め込む方法を紹介します。お店の紹介や場所を記事にした時、より分かりやすく見やすいようにマップを埋め込むと非常に分かりやすくなるのでおすすめです。PC版での方法ですが、通常のマップだけではなくストリートビューなども同じ方法で簡単に埋め込めれるので見やすい分かりやすい記事が作れると思います。

グーグルアカウントにログインをするとマイマップなども作れて記事に貼れます。今回はログインなしでの方法ですので、誰でも簡単にできる方法です。

スポンサーリンク

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

・グーグルマップには規約がありますので、キャプチャーはひかえて説明します。

①グーグルマップで場所を指定してクリックをします。(説明では東京駅を例に)

②場所をクリックすると左ウインドが登場、左上に「≡」三本線の「メニュー」マークをクリック

③「地図を共有または埋め込む」クリック

④「地図を埋め込む」をクリックするとサイズ(小・中・大・カスタマイズ)を選び
その横にあるHTMLコードをコピーします。
※自分が使って思うことは、記事をスマートフォンで見ることを考えると小サイズで全然いいと思います。

⑤ライブドア記事にHTMLコードを貼り付ける

・左上にあるHTMLタグ編集をクリックをしてからさきほどのマップのコードを貼り付けます。
「東京駅」を例に貼り付けました。


・貼り付けたら「HTMLタグ編集」をクリックして元に戻してからプレビューで確認してみてください。

ストリートビューをブログに埋め込む方法

・ストリートビューの埋め込みも基本的に同じで、見せたい場所を出しておきます

①左上の「⋮」3本縦線をクリック
「画像を共有または埋め込む」と出るのでマップと同じように「画像の埋め込み」クリック
サイズを選びHTMLコードをコピーしてブログに貼るだけで完了です。

※コードを貼り付けたら必ずプレビューで確認してください。

とても簡単なので、お店の紹介や場所を指定する時に埋め込んでみるといいと思います。

コメント