MASA・DIARY

~自分に正直に~

【はてなブログ初心者必見】記事にグーグルマップを埋め込む簡単な方法

f:id:MonsterGoya:20200118092113j:plain

旅行やお店の紹介などを書いたとき、記事の中に地図を入れ込めば正確な場所が分かり、読者により伝わりやすくなります

 

今回はグーグルマップを記事に埋め込む方法について紹介したいと想います

 

とても簡単に覚えられるので、是非、試してみてください

  

実際に入れ込むと、この様になります

地図画像がただ貼ってあるわけではなく、操作することも可能になります

 地図を入れ込むことにより、目的の場所が分かりやすくなりましたね

 

それでは、やり方を紹介していきます

 

グーグルマップを開く

まず記事に載せたい場所をグーグルマップで検索しましょう

f:id:MonsterGoya:20200117215345p:plain

グーグルマップを表示させます

Google マップ

このようにグーグルマップが表示されます(パソコンでの表示)

目的の場所を検索する

f:id:MonsterGoya:20200117220320p:plain

ここで左上にある「Googleマップを検索する」というところに目的の場所を入力します

 

今回は例として「東京ディズニーランド」を目的場所としました

f:id:MonsterGoya:20200117221355p:plain

地図がちゃんと表示され、検索した目的の場所に赤ピンがついていることを確認してください

画面左上の三本線「メニュー」を押す

確認が終わったら、画面左上の「メニュー」を押してください

f:id:MonsterGoya:20200117222535p:plain

「地図を共有または埋め込む」を押す

画面左に出てきたメニューの「地図を共有または埋め込む」を押します

f:id:MonsterGoya:20200117223538p:plain

「地図を埋め込む」を押す

共有と出てくるので「地図を埋め込む」を押してください

f:id:MonsterGoya:20200117224141p:plain

表示されたHTMLをコピーする

表示されたHTMLコードを、全選択してコピーします

f:id:MonsterGoya:20200117230008p:plain

HTMLコードの右にある「HTMLをコピー」を押すと、全選択する手間がはぶけるので便利です

 

HTMLコードの左に「中」とありますが、ここで地図のサイズを変更できます

「中」の右にある▼を押すと「小」「中」「大」「カスタムサイズ」が出てきます

地図のサイズを変更したい場合は、HTMLコードをコピーする前に、サイズを変更しておく必要があります

 

各サイズは下記になります

参考にしてみてください

 

小サイズ

 

中サイズ

 

 ■大サイズ

ブログには適さないので、使用しなくていいと想います

(大きすぎて、はみ出します)

 

カスタムサイズ

カスタムサイズは タテとヨコの大きさを自由に決められます

 

ブログ記事で使用するなら「中」が一番、最適です

 

コピーしたHTMLコードを記事に貼り付ける

先ほどコピーしたHTMLコードを記事に貼り付けます

 「HTML編集」を押して、地図を埋め込みたい箇所にコピーしたHTMLコードを、マウス右クリック「貼り付け」を押して貼り付けます

f:id:MonsterGoya:20200118085556p:plain

地図が入っているか確認する

「編集 見たまま」を押して、地図がしっかりと埋め込まれているか確認しましょう

 

これでグーグルマップの埋め込み作業は完了です

 

いかがだったでしょうか

とても簡単な方法で地図を埋め込めたと想います

 

少しでもみなさんの参考になったなら幸いです

※2020年1月19日現在の情報となります

 

 

ランキングに参加しています、押してもらえると嬉しいです☆

※沢山のブロガーが登録しているランキングサイトです、怪しいサイトではないのでご安心ください

ブログランキング・にほんブログ村へにほんブログ村