38歳無職 5社目の転職活動奮闘記 とその後

まさか会社が倒産するなんて。。。自分は今後どう生きていきたいのか?38歳で無職になった、その後の人生について

【スポンサーリンク】

スマホから簡単に出来る!はてなブログにGoogleマップを埋め込む方法

 

f:id:nodame79:20190309132146j:image

みなさんブログを書く時は、パソコン派ですか?それともスマホ派ですか??

わたしの場合、スマホを使用してブログを書くことがほとんどです。スマホは、場所を選ばず何処でも記事が書けてしまう点がすごく魅力的だと思っています。

電車の移動中、ベッドの上に転がりながらなど空いた時間にブログを更新している事が多くなっています。

面倒くさがりのわたしは、パソコンを立ち上げるのすら億劫なんですよね。。ブログ初心者には、スマホから記事を書く方がハードルが低くなると思っています。

ちなみにこの記事もスマホから書いています。

本日は、わたしのように、ブログをスマホから書いている方に向けての記事になります。

スマホからGoogleマップを埋め込む方法

ブログの更新は、スマホで出来ないことはほとんど無いんではないか?と思ってしまうほどスマホは使いやすいものになっています。

最近まで知りませんでしたが、スマホからでもとっても簡単にGoogleマップを埋め込むことも可能になっています。

順番に説明していきます。

①Googleで行きたい場所を検索

 まずは、普通に検索をします。

f:id:nodame79:20190309135330j:image

②画面下にある、共有ボタンをクリック

画面下に、□に↑のついたボタンをクリックして下さい。ちなみにこのボタンは、共有ボタンと言います。

f:id:nodame79:20190309123050j:image

③デスクトップ用サイトを表示をクリック

今見ている画面は、スマホ用のサイトなのでデスクトップ用のサイトに切り替えます。

f:id:nodame79:20190309122447j:image

④画面右上の地図をクリック

画面がデスクトップ用のサイトに切り替わりましす。そしたら、画面右上に出ている地図をクリックします。

f:id:nodame79:20190309122431j:image

⑤共有ボタンをクリック

画面右下に、矢印が2方向に向かっている共有ボタンをクリックします。

f:id:nodame79:20190309122416j:image

⑥地図を埋め込むをクリック

地図を埋め込むという表示が出てくるので、それを選択します。

f:id:nodame79:20190309122347j:image

⑦HTMLをコピーします

地図のHTMLが表示されます。表示されたHTMLをコピーします。

f:id:nodame79:20190309122333j:image

⑧はてなブログに張り付けます。

はてなブログに移動し、先程コピーしたHTMLコードを張り付けます。

HTML張り付けボタンをクリック

f:id:nodame79:20190309130850j:image

⑨完成!

無事にGoogleマップが埋め込まれました。

⚠︎Googleマップのサイズを変更したい時

このままですと、地図のサイズが少し大きすぎます。スマホの画面いっぱいにGoogleマップが表示されてしまっているので少し小さくしたいと思います。

サイズ変更も、スマホから簡単に出来ちゃいます。

  • コードを張り付ける際に、HTML張り付けボタンではなく、ペーストボタンでコードを貼ります。

f:id:nodame79:20190309125611j:image

すると、HTMLコードがそのまま張り付けられます。

f:id:nodame79:20190309122047j:image

  • サイズを変更するには、width="600" height="450"この数字を変更します。

試しに、高さを150に変更してみます。

450を150に変更します。

f:id:nodame79:20190309130546j:image

  • 変更したHTMLをカット

f:id:nodame79:20190311215440j:image

  • HTML張り付けボタンをクリック

f:id:nodame79:20190309130850j:image

↓サイズを変更した地図が表示されました。

以上の手順でGoogleマップの埋め込みは、無事に完了です。

とっても簡単に出来ちゃいました。

スマホからブログを書いてる方の参考になればなと思います。

【スポンサーリンク】
 

↓読者登録して頂けると、大変喜びます。