【はてなブログ】ブログにgoogleマップを貼る方法

皆さん、こんにちは!さききちです☆

時々、ブログ記事にGoogleマップを貼っている方がいると思いますが、皆さんはどうやって貼るかご存知ですか?

今回の記事では、はてなブログの記事にGoogleMapを貼る方法についてご紹介したいと思います。

f:id:sakikiti:20201022000548j:plain

はてなブログGoogleマップを貼る手順】Google map編

①まず、Googleマップはてなブログの記事の編集ページを別ページで開きます。

Googleマップのページをアクティブにして、ブログに載せたい目的地の名前を検索します。

f:id:sakikiti:20201021233707j:plain

③写真の丸で囲んである部分、「共有」ボタンをクリックします。

f:id:sakikiti:20201021233854p:plain

④共有タブが出てくるので、「地図を埋め込む」と書いてある部分をクリックします。

地図を埋め込む」をクリックすると下のようなページが出てきます。

f:id:sakikiti:20201021234305p:plain

⑤上のページが出てきたら、左上の「」と表示されている部分をクリックすると地図の大きさを変更できます。ブログに貼りたい地図の大きさを選択します。

地図の大、中、小については実際にこの記事の下に貼るので、もしよければ参考にしてみてくださいね!

一般的には「」がメジャーなようですが、わたしは好みで「」を使っています。

Googleマップを貼り付けた過去記事はこちら↓

⑥上の画像右下の「+」「-」のボタンを押して、地図の拡大率を変更します。そのままでよければいじらなくてOKです。

⑦ここまで出来たら、上の画像の右中央にある「HTMLをコピー」をクリックします。

クリックすると、画面下に「クリップボードにコピーしました」と表示されます。

⑧「クリップボードにコピーしました」という表示を確認したら、はてなブログのページに戻ります。

はてなブログGoogleマップを貼る手順】はてなブログ

はてなブログの編集画面を開いたら、「編集 見たまま」を開いた状態で、記事のどこに地図を入れたいか確認して、一行分改行してスペースを空けておきます。

②今度は、「HTML編集」をクリックします。

地図を入れたいと思って改行した部分に<p>・</p>と表示されていると思うので、この<p>と</p>の間を選択して、先ほどのリンクを貼り付けます。

③リンクを貼り付けたら、「編集 見たまま」をクリック!

リンクを張り付けた場所に地図が表示されていると思います。

 

★「小」サイズのマップはこちら↓

★「中」サイズのマップはこちら↓

★「大」サイズのマップはこちら↓

サイズの大・中・小で大きくサイズが変わりますね。一応「カスタムサイズ」という部分を選択すれば、自分の好きなサイズに編集することも可能です。

最後に

今回の記事では、はてなブログにグーグルマップを貼り付ける方法をご紹介しました。

地図を利用して、記事をアレンジをしてみてくださいね(^^♪

 

★過去の記事はこちら↓ 


プライバシーポリシー お問い合わせ