HAYAMIZ BLOG

スマホや格安SIM、パソコンなどの設定方法をわかりやすく

WordPress

ブログに地図を表示させたい。だれでもできる方法を紹介

更新日:

旅行が好きでブログをやられている方はたくさんいらっしゃいますよね。

国内や国外、魅力的な場所は星の数ほどあります。

 

ハヤミ
私も旅行は大好きです。今は国内ばかりですが、チャンスがあれば国外も!
アキちゃん
旅行いきたいよねー。

 

はなしがそれましたが!

今回紹介するのは旅行に行った場所の地図をブログに載せたいけど何か便利な方法はないか?

 

旅行に行ってとても魅力的な場所であればみんなにも知ってもらいたいのが人というものです。

ぜひ、ブログに地図を貼り付けてみてください。

 

なお、下記のURLが作成後のページとなります。

 

やり方はとても簡単

今回、はてなブログ(無料サービス版)を例に貼り付け方を紹介します。

 

手順はとても簡単で、概要を書くと、Googleマップなどで、地名を検索し、その地名を「共有」するだけ。

最後に作成中の記事にコピーしたHTMLを貼り付けるだけ!

 

手順の詳細を紹介します。

 

Googleマップで地名を検索

今回は、長野県松本市安曇野にある「上高地」にある「大正池」の地図を紹介したいという想定です。

 

Googleマップで「大正池」を検索します。

きれいな池ですね。

ちなみに、大正4年の6月6日にできたので、大正池と言うそうです。

 

大正池に興味が沸いた方は下記の公式サイトをご覧ください。

 

共有する

地図は正しい場所を示したでしょうか。

 

正しいようであれば、左側の項目に「共有」というものがあるので、クリックします。

すると下図のようにどのように「共有」するか項目が表示されますので、「地図を埋め込む」をクリックします。

 

HTMLをブログに貼り付け

すると、表示がかわり、なにやら難しい英数字がズラズラっと出てきたと思います。

これらを右側にある「HTMLをコピー」をクリックして文字列コピーをします。

 

コピーできましたら、「メモ帳」などにいったん貼り付けておきましょう。

 

次はブログに実際に貼り付けます。

上記のままだと、さきほどコピーしたものを貼り付けると正常な表示にならずコピーした文字列がそのまま表示されてしまいます。そのため、上部にある「HTML編集」という場所をクリックし、編集モードを変更します。

すると、記事のHTMLを直接いじれるようになりますので、張りたい場所へメモ帳へ貼り付けた文字列を貼り付けます。

 

最後にもう一度、上図にある「編集みたまま」をクリックして、地図が表示されるか確認してください。

 

表示確認

下図のようになっていれば貼り付けは成功です!

 

あなたのブログでもバッチリはれましたでしょうか。

 

今回は「はてなブログ」の無料版で紹介していますが、有料版はてなブログやワードプレスなどHTML編集機能があるブログではこの方法で簡単に地図を掲載することが可能です。

 

ぜひ、あなたの旅ブログでもお試しください!

 

参考になれば幸いです。

Amazonチャージ!

Amazonマーケットプレイズで掘り出し物が見つかったけど、支払いはクレジットカード払いのみだったりしますよね・・・。

しかし「Amazonチャージ」を利用すればもうあきらめる必要がなくなります!

しかも、チャージするほどポイントが貯まり、お得にお買い物できちゃいます。

\くわしい内容はコチラ/

Amazonチャージの入金方法

関連記事一覧

オススメの記事

1

格安SIMは値段が安いけど、今のメールが使えません・・・。とか。 格安スマホは安いけど、通信速度が遅い・・・。とか。 & ...

2

唐突ではありますが、WiMAX 2+は便利です。 モバイル通信(LTE通信)機能をもたないWiFi専用機も、WiMAX ...

3

タブレットはとても便利ですが、私ふくめなかなかうまく使いこなせていない人が多いようですね。   そこで今回は、 ...

4

「ポケットWiFiって便利なの?」 「外出先からでもパソコンで動画は見れるかな?」 「通信制限って使いづらい?」 &nb ...

5

WordPress(ワードプレス)でブログをはじめたい・・・けど、何がどう必要なのかわからない。 ワードプレスは夢があり ...

6

各社からいろいろな格安SIMが提供されているのはご存知かと思います。   しかし・・ 正直「どこかいいのか」迷 ...

7

タグ管理マネージャー2とは、WING AFFINGER5専用の「プラグイン」です。   ハヤミ私のなかでは「最 ...

8

DVDのコピーはなかなか簡単ではありません。 ソフトウェアはいくつかインターネットに転がってはいますが、英語だったり、怪 ...

-WordPress

Copyright© HAYAMIZ BLOG , 2019 All Rights Reserved.