サイト管理者のGigo(ジーゴ)です(*^^*)
Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。
他にも詳しく無料ブログのBloggerをまとめている方がいらっしゃるので、その方たちのサイトと合わせてご利用いただければと思います(^^)
今回は、ブログの記事内に「地図」を埋め込む方法について説明していきます。
ブログの記事内に地図を埋め込む方法
ブログでお気に入りのお店や観光場所などを紹介するときには、閲覧者がわかりやすいように地図が載せてあるととても見やすく親切です。
ブログ内に地図を掲載する方法はとても簡単なので説明していきます。
①グーグルマップを開きます
まずは、グーグルマップを開きます。
![Bloggerで始める無料ブログ:ブログの記事内に「地図」を埋め込む方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-iV0INW8DKWI/XElN9axlUZI/AAAAAAAALMo/3s3-OveS0dkTsjXoWhfuM3bwUHTLkA9MACK4BGAYYCw/s640/1%25E5%259C%25B0%25E5%259B%25B3.jpg)
②グーグルマップで「目的の場所」を検索
グーグルマップの左上の検索窓に、ブログ内に掲載したい「場所名」や「住所」などを入力し目的としている場所を検索します。
![Bloggerで始める無料ブログ:ブログの記事内に「地図」を埋め込む方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-Cvt3lsfdZOU/XElOBR7m3RI/AAAAAAAALMw/p66VT0mUQtUQ8287XbZhHvNOoxBqKEVbQCK4BGAYYCw/s640/2%25E5%259C%25B0%25E5%259B%25B3.jpg)
③「共有」をクリック
目的の場所が表示されたら、その情報内にある「共有」をクリックします。
![Bloggerで始める無料ブログ:ブログの記事内に「地図」を埋め込む方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-1UJm9m7Eb2o/XElOEWr-RPI/AAAAAAAALM4/ilEQPK5YIHgdiBuAySGj4sNjq7jTtajbQCK4BGAYYCw/s640/3%25E5%259C%25B0%25E5%259B%25B3.jpg)
④共有ダイアログ内の「地図を埋め込む」をクリック
共有をクリックするとダイアログが表示されます。
その共有ダイアログ内にある「地図を埋め込む」をクリックします。
![Bloggerで始める無料ブログ:ブログの記事内に「地図」を埋め込む方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-LQzGw6oUXBY/XElOG4zasvI/AAAAAAAALNA/qT3b3XMr-3QC964YmWxsWwUqShM6NUAiACK4BGAYYCw/s400/4%25E5%259C%25B0%25E5%259B%25B3.jpg)
⑤載せる地図のサイズを選択
地図を埋め込むをクリックすると、「地図のサイズ」と「地図のソースコード」が表示されます。
まずは、「地図のサイズ」を選択します。
地図のサイズは「小・中・大・カスタムサイズ」から選択することができます。
![Bloggerで始める無料ブログ:ブログの記事内に「地図」を埋め込む方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-wmqqY-tCDFk/XElOJtw3ijI/AAAAAAAALNI/u1s6bdzAP1k1MSYm_MEeWQs4kcQLM2_TgCK4BGAYYCw/s400/6%25E5%259C%25B0%25E5%259B%25B3.jpg)
![Bloggerで始める無料ブログ:ブログの記事内に「地図」を埋め込む方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-tQL00iNEQIc/XElONXj9EGI/AAAAAAAALNQ/qG4b0ef191AshM8jR3U2mRRyjPP-XCtlwCK4BGAYYCw/s400/8%25E5%259C%25B0%25E5%259B%25B3.jpg)
⑥「HTMLをコピー」をクリック
地図のサイズの選択が終了したら、「HTMLをコピー」をクリックします。
「HTMLをコピー」をクリックすることにより、ソースコードをコピーしている状態になります。
![Bloggerで始める無料ブログ:ブログの記事内に「地図」を埋め込む方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-NyGZ2LtBlsc/XElOR6J1tVI/AAAAAAAALNg/0HkQzMaHILoWdgJgp2CDciPx__9vaOTOgCK4BGAYYCw/s400/7%25E5%259C%25B0%25E5%259B%25B3.jpg)
⑦Bloggerの記事作成画面を「HTML入力画面」へ変更
ここからは、Bloggerの記事作成画面での作業になります。
Bloggerの記事作成画面を表示したら、「HTML」をクリックし通常の入力画面からHTML入力画面に変更します。
![Bloggerで始める無料ブログ:ブログの記事内に「地図」を埋め込む方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-m2muAwc4Hvs/XElOVBkXXzI/AAAAAAAALNo/sDc6Iuo3APsstVTlj130TNIYr9oG6sBzwCK4BGAYYCw/s640/9%25E5%259C%25B0%25E5%259B%25B3.jpg)
⑧地図のソースコードを貼り付ける
先程、コピーした地図のソースコードをブログの記事内の地図を表示したい部分に貼り付けます。
![Bloggerで始める無料ブログ:ブログの記事内に「地図」を埋め込む方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-YT10vuWPcx8/XElOYeZ7Z1I/AAAAAAAALN0/ZG7V_KL8gGkmQ97nqJRLdFGrBuFgBdDTQCK4BGAYYCw/s640/10%25E5%259C%25B0%25E5%259B%25B3.jpg)
![Bloggerで始める無料ブログ:ブログの記事内に「地図」を埋め込む方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-_U6gN0iNeH4/XElOa51gyjI/AAAAAAAALOA/VPtbJLyZF3w27lP5HFPscvJgbozofV5bQCK4BGAYYCw/s640/11%25E5%259C%25B0%25E5%259B%25B3.jpg)
⑨「作成」をクリック
「作成」をクリックし、HTML入力画面から通常の入力画面へ変更します。
![Bloggerで始める無料ブログ:ブログの記事内に「地図」を埋め込む方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-MRXoby8m-0c/XElOd2sqnZI/AAAAAAAALOI/oRjO210L3HI4ZBP_eo5yRAMQzT6ZZALLQCK4BGAYYCw/s640/12%25E5%259C%25B0%25E5%259B%25B3.jpg)
⑩地図が貼り付けられているか確認
通常の入力画面に戻すと、グーグルマップが貼り付けられていることが確認できます。
![Bloggerで始める無料ブログ:ブログの記事内に「地図」を埋め込む方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-P5zZCglJqSE/XElOg2pVPkI/AAAAAAAALOQ/dy0BXf7yQhgWF6YNkUZc1Ok9mYIiPiXswCK4BGAYYCw/s640/13%25E5%259C%25B0%25E5%259B%25B3.jpg)
⑪実際に貼り付けた地図
下の画像は、実際に「東京スカイツリー」の地図を貼り付けたものになります。
まとめ:今回のおさらい
ブログをされる方は、自分が食べた物や旅行や出かけた場所などを記事にする機会もあると思います。
そのような記事を見て、閲覧されている方は「おいしそう」「どこにあるんだろう」と興味を示し、場所を調べたり行き方を調べたりします。
そんなときのために、地図で場所情報を載せていることは閲覧者に対してとても親切な記事作りと言えます。
地図を埋め込む方法は、とても簡単ですのでぜひ取り入れていってください。