「スマホからはてなブログにグーグルマップを埋め込みたい！」
本記事では、簡単にできるGoogleマップをブログに埋め込む方法をご紹介します。
こんにちは、のだめです。みなさんブログを書く時は、パソコン派ですか？それともスマホ派ですか？？
わたしの場合、スマホを使用してブログを書くことがほとんどです。スマホは、場所を選ばず何処でも記事が書けてしまう点がすごく魅力的だと思っています。
ブログの更新は、パソコンがなくても問題なくできます。大変そうなGoogleマップの埋め込みも、スマホから簡単に出来てしまいます。
本記事が、スマホでブログを書いている方の参考になれば幸いです。ちなみにこの記事もスマホから書いています。
【スポンサーリンク】
はてなブログにスマホからGoogleマップを埋め込む方法
ブログの更新は、スマホで出来ないことはほとんど無いんではないか？と思ってしまうほどスマホは使いやすいものになっています。
スマホからでも、とっても簡単にGoogleマップを埋め込むことも可能になっています。
順番に説明していきます。
①Googleで行きたい場所を検索
まずは、普通に検索をします。
②画面下にある、共有ボタンをクリック
画面下に、□に↑のついたボタンをクリックして下さい。ちなみにこのボタンは、共有ボタンと言います。
③デスクトップ用サイトを表示をクリック
今見ている画面は、スマホ用のサイトなのでデスクトップ用のサイトに切り替えます。
④画面右上の地図をクリック
画面がデスクトップ用のサイトに切り替わりましす。そしたら、画面右上に出ている地図をクリックします。
⑤共有ボタンをクリック
画面右下に、矢印が2方向に向かっている共有ボタンをクリックします。
⑥地図を埋め込むをクリック
地図を埋め込むという表示が出てくるので、それを選択します。
⑦HTMLをコピーします
地図のHTMLが表示されます。表示されたHTMLをコピーします。
⑧はてなブログに張り付けます。
はてなブログに移動し、先程コピーしたHTMLコードを張り付けます。
HTML張り付けボタンをクリック
⑨完成！
無事にGoogleマップが埋め込まれました。
⚠︎Googleマップのサイズを変更したい時
このままですと、地図のサイズが少し大きすぎます。スマホの画面いっぱいにGoogleマップが表示されてしまっているので少し小さくしたいと思います。
サイズ変更も、スマホから簡単に出来ちゃいます。
- コードを張り付ける際に、HTML張り付けボタンではなく、ペーストボタンでコードを貼ります。
すると、HTMLコードがそのまま張り付けられます。
- サイズを変更するには、width=”600″ height=”450″この数字を変更します。
試しに、高さを150に変更してみます。
450を150に変更します。
- 変更したHTMLをカット
- HTML張り付けボタンをクリック
↓サイズを変更した地図が表示されました。
以上の手順でGoogleマップの埋め込みは、無事に完了です。
とっても簡単に出来ちゃいました。
まとめ
さいごに、スマホからはてなブログへGoogleマップを埋め込む方法をまとめます。
- Googleで行きたい場所を検索
- 画面下にある、共有ボタンをクリック
- デスクトップ用サイトを表示をクリック
- 画面右上の地図をクリック
- 共有ボタンをクリック
- 地図を埋め込むをクリック
- HTMLをコピーします
- はてなブログに張り付けす
本記事が、スマホからブログを書いてる方の参考になればな幸いです。
【スポンサーリンク】
このブログは「はてなブログ」で運営しています。 はてなブログの方は、読者登録お願いします。
