はてなブログの記事に地図をかんたんに貼る方法
ブログやサイトにGoogleMapを埋め込みたいけど、普通に貼り付けてしまうと使えない。
拡大表示やその場で地図を使えるようにする方法はどうするのだろう？って出来るようになるまで、そう時間はかかりませんでした。
ほんと、ネットって凄いなと思います。
無事に地図を貼り付けることができましたので、これから同じように思う人のために、なるべくわかりやすく、画像を多めに説明する記事を作成します。
【目次】
GoogleMapをはてなブログに貼り付ける
GoogleMapをはてなブログに埋め込んでみましょう。
新しいタブかウインドウでGoogleマップを開く
埋め込みたい地図を検索します。
例として「松島」と入力して検索したところです。
Google検索の場合、最初は「すべて」の所にアンダーラインがありますが、その横の「地図」をクリックするとGoogleマップに移動します。
拡大縮小で拡大率を好みに合わせる
右下の「＋」「ー」で拡大縮小して好みの大きさに合わせます。
地図の取り込み
この地図を取り込むために下の図の赤丸の「共有」というところをクリックします。
すると、こんな画面があらわれますね。
最初は「リンクを共有」というところの下に青いアンダーラインが入っていると思います。
横にある「地図を埋め込む」をクリックします。
下の赤丸の所です。
すると下の絵のような表示に切り替わると思います。
このまま、地図の上に表示されたコード(青く反転している部分）をコピーしても良いのですが、ブログの画面に貼った時に大きすぎてしまう場合もありますので、大きさを変えてみます。
下の図のうえの赤丸で囲んだ「中」というところをクリックすると、サイズを変更できるウインドウがあらわれます。
任意で変えたいので、「カスタムサイズ」をクリックします。
すると、下のような画面になります。
カスタムサイズの横にある数字を変えることで表示される地図の大きさが決まります。
ここを300ｘ300など、自分が思う大きさを入力します。
入力が終わったら、その下に表示されているコードを左クリックすると青色に反転します。
反転したらその場で右クリックでコピーするか、Ctrl＋Cでコピーします。
はてなブログに貼り付ける
はてなブログの記事の編集画面です。
「編集見たまま」の所にアンダーラインがあります。
右横にある「HTML編集」をクリックします。
HTML編集の画面で、先ほどのコードを貼り付けます。
これで埋め込み成功です。
実際に貼り付けて埋め込んだ地図
実際に埋め込んでみた画像がこれです。
３００ｘ３００だとこの大きさになります。
少し小さいですね。
でも、任意に拡大表示することができますから、読んでくれている方が地図を見たい場合はクリックしてくれるはずです。
WordpressのブログへGoogleMapを貼り付ける
Wordpressで作成するブログについても、今回紹介した方法で同じように貼り付けることができます。
他のブログサイトでは試してみた事は有りませんが、HTML編集ができれば同じように貼り付けてｍ地図を埋め込むことができると思います。
