ブログ ブログ-ノウハウ

はてなブログの記事に地図をかんたんに貼る方法

投稿日:

ブログやサイトにGoogleMapを埋め込みたいけど、普通に貼り付けてしまうと使えない。

拡大表示やその場で地図を使えるようにする方法はどうするのだろう?って出来るようになるまで、そう時間はかかりませんでした。

ほんと、ネットって凄いなと思います。

 

無事に地図を貼り付けることができましたので、これから同じように思う人のために、なるべくわかりやすく、画像を多めに説明する記事を作成します。

 

 

【目次】

 

 

GoogleMapをはてなブログに貼り付ける

GoogleMapをはてなブログに埋め込んでみましょう。

 

新しいタブかウインドウでGoogleマップを開く

埋め込みたい地図を検索します。

例として「松島」と入力して検索したところです。

f:id:InterMax:20171121114754p:plain

 

 

Google検索の場合、最初は「すべて」の所にアンダーラインがありますが、その横の「地図」をクリックするとGoogleマップに移動します。

f:id:InterMax:20171121114948p:plain

 

 

 

拡大縮小で拡大率を好みに合わせる

右下の「+」「ー」で拡大縮小して好みの大きさに合わせます。

f:id:InterMax:20171121115150p:plain

 

 

 

地図の取り込み

この地図を取り込むために下の図の赤丸の「共有」というところをクリックします。

f:id:InterMax:20171121115324p:plain

 

すると、こんな画面があらわれますね。

最初は「リンクを共有」というところの下に青いアンダーラインが入っていると思います。

f:id:InterMax:20171121115350p:plain

 

横にある「地図を埋め込む」をクリックします。

下の赤丸の所です。

すると下の絵のような表示に切り替わると思います。

f:id:InterMax:20171121115519p:plain

このまま、地図の上に表示されたコード(青く反転している部分)をコピーしても良いのですが、ブログの画面に貼った時に大きすぎてしまう場合もありますので、大きさを変えてみます。

 

 

下の図のうえの赤丸で囲んだ「中」というところをクリックすると、サイズを変更できるウインドウがあらわれます。

任意で変えたいので、「カスタムサイズ」をクリックします。

 

f:id:InterMax:20171121115725p:plain

 

すると、下のような画面になります。

カスタムサイズの横にある数字を変えることで表示される地図の大きさが決まります。

ここを300x300など、自分が思う大きさを入力します。

入力が終わったら、その下に表示されているコードを左クリックすると青色に反転します。

反転したらその場で右クリックでコピーするか、Ctrl+Cでコピーします。

f:id:InterMax:20171121115856p:plain

 

 

 

はてなブログに貼り付ける

はてなブログの記事の編集画面です。

「編集見たまま」の所にアンダーラインがあります。

右横にある「HTML編集」をクリックします。

f:id:InterMax:20171121120223p:plain

 

 

HTML編集の画面で、先ほどのコードを貼り付けます。

f:id:InterMax:20171121120356p:plain

 

これで埋め込み成功です。

f:id:InterMax:20171121120458p:plain

 

 

 

 

実際に貼り付けて埋め込んだ地図

実際に埋め込んでみた画像がこれです。

300x300だとこの大きさになります。

少し小さいですね。

でも、任意に拡大表示することができますから、読んでくれている方が地図を見たい場合はクリックしてくれるはずです。

 

 

 

WordPressのブログへGoogleMapを貼り付ける

WordPressで作成するブログについても、今回紹介した方法で同じように貼り付けることができます。

他のブログサイトでは試してみた事は有りませんが、HTML編集ができれば同じように貼り付けてm地図を埋め込むことができると思います。

 

 

intermax.hatenablog.com

 

 

-ブログ, ブログ-ノウハウ

Copyright© URI-Boo , 2018 All Rights Reserved Powered by STINGER.