すみくにぼちぼち日記

メキシコ生活や欧米旅行記、語学、大学、美術館について

はてなブログへのGoogleマップの貼り方-PCとスマホ(iphoneやアンドロイド)どちらにも貼れる

はてなブログで旅行系記事やお店紹介の記事を書くときにGoogleマップを貼ることができます。

この記事でははてなブログへのGoogle Mapsの貼り方をPCの場合とスマホの場合に分けてご紹介します。

f:id:k-heki:20201109101143j:plain

 

はてなブログへのGoogleマップの貼り方-PCとスマホどちらにも貼れる

旅行系記事などを書いたときに、その場所などを紹介する場合、Googleマップの地図をはてなブログへ掲載したい時が出てきます。そんな時に役立つのが、Googleマップの地図の共有機能です。

とくにスマホの場合、GoogleマップのアプリからだとGoogleマップの地図情報を共有することができません。一方で、スマホでもブログへ地図を共有する方法が存在するので、その方法をご紹介します。

 

PC版はてなブログGoogleマップの貼り方

まず、ご紹介するのはPCでGoogleマップを貼る操作方法です。

 

Googleマップを検索

 

Googleマップで目的地を検索

 

③検索結果の左のほうにあるの共有をクリック

はてなブログへのGoogleマップの貼り方

例えば、東大寺で検索したとしたら、地図の左のほうにある情報部分の「共有」をクリックします。

 

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

はてなブログへのGoogleマップの貼り方

共有をクリックすると、上の様な画面になるので、「地図を埋め込む」をクリックします。

 

⑤「HTMLをコピー」をクリック

はてなブログへのGoogleマップの貼り方

「地図を埋め込む」をクリックしたら、その右下のほうにある「HTMLをコピー」をクリックします。

これでGoogleマップでの操作は終わりで、続いてはてなブログへ戻ります。

 

⑥記事を書くページの「HTML編集」をクリック

はてなブログへのGoogleマップの貼り方

はてなブログへ戻ったら、普段書いているページの「HTML編集」というタブをクリックします。

 

GoogleマップでコピーしたHTMLをはてなブログのHTMLの編集ページにペースト

はてなブログへのGoogleマップの貼り方

HTMLのタブをクリックすると上の画像のような画面に切り替わるので、<p>と</p>の間にGoogleマップでコピーしたHTMLをペースト。

 

 

上のように地図を貼り付けが完了しました。

 


スマホはてなブログへのGoogleマップの貼り方

続いて、スマホ版へのGoogleマップの貼り方をご紹介します。

 

スマホGoogleマップアプリは使わず、インターネットから目的地を検索

 

iPhoneの場合:下のほうにある□をクリック

f:id:k-heki:20201130105742j:image

 

③「デスクトップ用サイトを表示」をクリック

f:id:k-heki:20201130105453p:image

四角をクリックすると、「リーディングリストへ追加」というボタンが出てくるのですが、右のほうにスライドしていくと、「プリント」の横に「デスクトップ用サイトを表示」というボタンが現れるので、こちらをクリックします。

 

Androidの場合:右上のタブをクリック

f:id:k-heki:20201207110558j:image

Androidの場合は、画面を触った時に出る上の緑色の部分の「タブ」をクリックします。

 

③「PC版サイトを表示」をクリック

f:id:k-heki:20201207110554j:image

すると右側に上の写真のようなウィンドウが出てくるので、そこの「PC版サイトを表示」をクリックします。

 

④検索結果の右の方のマップの画像をクリック

f:id:k-heki:20201130105209p:image

するとパソコンの画面と同じ検索画面が出てくるので、画面の右のほうに出てくる地図の絵をクリックします。

 

⑤共有をクリック

f:id:k-heki:20201130105150p:image

地図の絵をクリックすると、八坂神社の地図を検索してくれるので、この画面の「ルート・乗り換え」の右のほうにある「共有」をクリックします。

 

⑥地図を埋め込むをクリック

f:id:k-heki:20201130105421p:image

「リンクを送信する」の右側にある「地図を埋め込む」をクリック。

 

 

⑦HTMLをコピー

f:id:k-heki:20201130105132p:image

「地図を埋め込む」をクリックすると、HTMLのコードが出てくるのでそれをコピー。コピーできたらはてなブログへ戻ります。

 

 

はてなブログの記事を軽くタップしHTMl貼り付けをクリック

f:id:k-heki:20201130105109p:image

はてなブログで自分の記事の地図を貼りたいところを軽くタップすると、黒い吹き出しが出てくるので、「HTML貼り付け」をクリックします。

 

無事に地図をはてなブログへ貼り付けることができました。

 

終わりに

この記事では、「はてなブログへのGoogleマップの貼り方」について、PC版とスマホ版の2つのパターンでやり方をご紹介しました。

はてなブログへのGoogleマップ貼付はとても簡単にできますので、お店紹介などでは是非活用してみてください。

 

はてなブログのブログデザイン編集についてはこちら

sumikuni.hatenablog.com

 

はてなブログのbingウェブマスターツールについてはこちら

sumikuni.hatenablog.com

 

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

PVアクセスランキング にほんブログ村