はてなブログで旅行系記事やお店紹介の記事を書くときにGoogleマップを貼ることができます。
この記事でははてなブログへのGoogle Mapsの貼り方をPCの場合とスマホの場合に分けてご紹介します。
- はてなブログへのGoogleマップの貼り方-PCとスマホどちらにも貼れる
- PC版はてなブログのGoogleマップの貼り方
- スマホ版はてなブログへのGoogleマップの貼り方
- はてなブログPROの紹介
- 終わりに
はてなブログへのGoogleマップの貼り方-PCとスマホどちらにも貼れる
旅行系記事などを書いたときに、その場所などを紹介する場合、Googleマップの地図をはてなブログへ掲載したい時が出てきます。そんな時に役立つのが、Googleマップの地図の共有機能です。
とくにスマホの場合、GoogleマップのアプリからだとGoogleマップの地図情報を共有することができません。一方で、スマホでもブログへ地図を共有する方法が存在するので、その方法をご紹介します。
PC版はてなブログのGoogleマップの貼り方
まず、ご紹介するのはPCでGoogleマップを貼る操作方法です。
①Googleマップを検索
②Googleマップで目的地を検索
③検索結果の左のほうにあるの共有をクリック
例えば、東大寺で検索したとしたら、地図の左のほうにある情報部分の「共有」をクリックします。
④「地図を埋め込む」をクリック
共有をクリックすると、上の様な画面になるので、「地図を埋め込む」をクリックします。
⑤「HTMLをコピー」をクリック
「地図を埋め込む」をクリックしたら、その右下のほうにある「HTMLをコピー」をクリックします。
これでGoogleマップでの操作は終わりで、続いてはてなブログへ戻ります。
⑥記事を書くページの「HTML編集」をクリック
はてなブログへ戻ったら、普段書いているページの「HTML編集」というタブをクリックします。
⑦GoogleマップでコピーしたHTMLをはてなブログのHTMLの編集ページにペースト
HTMLのタブをクリックすると上の画像のような画面に切り替わるので、<p>と</p>の間にGoogleマップでコピーしたHTMLをペースト。
上のように地図を貼り付けが完了しました。
スマホ版はてなブログへのGoogleマップの貼り方
続いて、スマホ版へのGoogleマップの貼り方をご紹介します。
①スマホのGoogleマップアプリは使わず、インターネットから目的地を検索
②iPhoneの場合:下のほうにある□をクリック
③「デスクトップ用サイトを表示」をクリック
四角をクリックすると、「リーディングリストへ追加」というボタンが出てくるのですが、右のほうにスライドしていくと、「プリント」の横に「デスクトップ用サイトを表示」というボタンが現れるので、こちらをクリックします。
②Androidの場合:右上のタブをクリック
Androidの場合は、画面を触った時に出る上の緑色の部分の「タブ」をクリックします。
③「PC版サイトを表示」をクリック
すると右側に上の写真のようなウィンドウが出てくるので、そこの「PC版サイトを表示」をクリックします。
④検索結果の右の方のマップの画像をクリック
するとパソコンの画面と同じ検索画面が出てくるので、画面の右のほうに出てくる地図の絵をクリックします。
⑤共有をクリック
地図の絵をクリックすると、八坂神社の地図を検索してくれるので、この画面の「ルート・乗り換え」の右のほうにある「共有」をクリックします。
⑥地図を埋め込むをクリック
「リンクを送信する」の右側にある「地図を埋め込む」をクリック。
⑦HTMLをコピー
「地図を埋め込む」をクリックすると、HTMLのコードが出てくるのでそれをコピー。コピーできたらはてなブログへ戻ります。
⑧はてなブログの記事を軽くタップしHTMl貼り付けをクリック
はてなブログで自分の記事の地図を貼りたいところを軽くタップすると、黒い吹き出しが出てくるので、「HTML貼り付け」をクリックします。
無事に地図をはてなブログへ貼り付けることができました。
はてなブログPROの紹介
はてなブログには無料ブログと有料プランのはてなブログPROがあります。
初心者の場合は最初は無料ブログでブログを書きながら、収益化などを図りたいと思った場合にはてなブログPROへ切り替えるのがおすすめ。
私も最初は無料ブログで初めて今ははてなブログPROを使っています。
良いところとして、
・自動広告が表示されない（自分で広告をつけて収益化できる）
・カスタマイズの幅が広がる
・メンテナンスフリーなので書くことに集中できる
・はてなブロガーさんとのつながりができる
という4つがあります。
私としては無料ブログでやっていたころよりもはてなブログProに変えたほうが使い勝手がよく、サブブログも作りやすいのでお勧めです。
ブログをこれまでよりもさらに良くしていきたい、将来的には収益化も考えているという場合に特におすすめですので是非ご検討ください。
※はてなブログProの登録はこちら
※はてなブログProの詳細はこちら
終わりに
この記事では、「はてなブログへのGoogleマップの貼り方」について、PC版とスマホ版の２つのパターンでやり方をご紹介しました。
はてなブログへのGoogleマップ貼付はとても簡単にできますので、お店紹介などでは是非活用してみてください。
※はてなブログのブログデザイン編集についてはこちら
※はてなブログのbingウェブマスターツールについてはこちら
にほんブログ村