いいね!は目の前にあるよ

今日の「いいね!」は見つかりましたか?

初心者必見!【はてなブログ】Google マップを記事内に貼り付ける方法

f:id:imaterasu:20190907135746j:plain

はてなブログを始めて間もない方必見です!

 

 

ブログにGoogle マップを貼りたい!

ブログを見ていると、お店の場所や観光地等の地図をが貼ってある記事をよく見かけます。

 

これって、ブログを見ている人にとっては、非常に親切でありがたい機能ではないでしょうか。

 

なんてったって、記事内にGoogle マップがあるんですから!。

 

そこで「記事の中にGoogle マップを貼り付けできたら便利だろうなぁ」「ここの場所をどうしてもみんなに伝えたいんだけどなぁ」と思ったことはありませんか?

 

地図のjpg画像を貼り付けしても伝わるかと思いますが、当然その画面からは何も展開しないので、改めてGoogle マップを開く手間があるため、非常に不親切な記事になってしまいます。

 

今回紹介する方法によって、貼り付けした地図から従来のGoogle マップと同様の操作ができるので、非常に使い勝手の良い便利な記事に生まれ変わります。

 

でも実際にどうやって貼り付けているんでしょうか。

 

とっても難しい?複雑?めんどくさい?手順が多くて大変?

 

いいえ、とっても簡単なので安心してください!。

 

そんな方の為に今から「Google マップを記事内に貼り付ける」方法をお伝えします。

 

かくいう私も、この機能を使ってGoogle Mapを貼り付けてらっしゃるブログを見て、記事で紹介してあるお店や、観光地の場所が非常に分かりやすくいい機能だなぁ~と感心したことがありましたので、はてなブログを始めたばかりの方を対象にその方法を紹介してみようと思ったわけです。

 

そんな私もまだまだ初心者同然ですが、、、。( *´艸`)

 

前置きはこのくらいにしといてそれでは早速いってみましょう!

  

1.Google Mapsを開く

www.google.co.jp

 

2.表示したい住所を入力

f:id:imaterasu:20190907151955j:plain

 

3.「メニューボタン」をクリック

当該の地図が表示されたら画面左上の三本線のマーク「メニューボタン」をクリック。

f:id:imaterasu:20190907152115j:plain


 

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

f:id:imaterasu:20190907152301j:plain


 

5.「地図を埋め込む」をクリック 

f:id:imaterasu:20190907151748j:plain

 

6.「HTMLをコピー」をクリック

f:id:imaterasu:20190907152424j:plain

Google マップでの操作はここまでです。

ここからは、はてなブログの「記事を書く画面」に移りましょう。

 

7.記事を書く画面の「HTML編集」をクリック

f:id:imaterasu:20190907162528j:plain

 

8.「HTLM編集画面に貼り付け」

見たことのないような英数字がたくさん並んでいますが気にしないで!。

上手くいっているかワクワクしてきましたね。

もうすぐ完成ですよ。

f:id:imaterasu:20190907153920j:plain



9.「プレビュー」で仕上がりを確認

あのたくさんあった英数字がこんな感じで表示されるようになりました。

いやはやすごいですね~。

f:id:imaterasu:20190907154323j:plain

以上、こんな感じであっという間にGoogle Mapを貼り付けることができました。

 

地図のスライドやズームもできてとても便利です。

 

どうでしょうかうまくいきましたか?

 

最後に

こういった便利な機能が使えたときってほんとうに嬉しいですね。

 

少しずつこういった機能を徐々に覚えてみんなに楽しく見てもらえるブログを目指してお互いに頑張っていきましょう。

 

千里の道も一歩からです!。

 

おつかれさまでした!(∩´∀`)∩ 

f:id:imaterasu:20190907160904j:plain