WordPress ブログにGoogle マップを貼り付ける

WordPressでブログを作りはじめて1ヶ月。まだまだ、生まれたての赤ん坊ブログです。これから、また一つ覚えたことを記録していきたいと思います。

ブログ初心者ってこんなことも知らないのでございます。

インターネットでお店を検索すると、様々な方がブログやホームページで、お店の情報や感想を載せてくれています。親切なサイトにはGoogleマップが貼り付けてあって、場所を確認するのにとっても便利だなと思っていました。これっていいですよね。

調べてみると割と簡単にできるみたいです。

とにかくやってみるべし。

私のブログにも早速、地図を貼り付けてみたいと思います。

ブログにGoogleマップを貼り付ける

元々貼り付けていた地図

今まではこんな風に、自分で地図の画像を貼り付けていました。これだと動かないし、拡大もできないので、広い範囲で周辺を調べることが出来ませんね。ないよりはましですが。

Googleマップはお店の住所や営業時間などの細かい情報も調べることが出来るので、ブログに貼り付けることが出来たら本当に便利です。

1. Googleマップでお店を検索して共有をクリックする

Googleマップでお店を検索

Googleマップでお店の名前を検索するといくつか候補が出てきます。そこから自分が探しているお店を見つけます。

今回検索したのは、台北に行ったときに小龍包を食べに寄ったお店です。小龍包も美味しかったけどチャーハンも美味しかったな・・・とそれはさておき、画面の左側にお店の名前、住所、電話番号、営業時間まで載っていますね。

お店が見つかったら、共有をクリックします。

 

2. 地図を埋め込むをクリック

Googleマップを地図に貼り付ける

共有をクリックすると、こんな画面が出てきます。今度は地図を埋め込むをクリックします。

 

3. 貼り付ける地図のサイズを選択する

地図のサイズを選ぶ

地図のサイズは小・中・大・カスタムと4種類あります。ここから自分の貼り付けたい地図のサイズを選びましょう。カスタムは自分でサイズを指定するということです。

最初、を選んだら、私のブログにはちょっと小さすぎたので、後でに変更しました。

 

4. コードをコピーする

HTMLをコピーする

↑ HTMLをコピーをクリックするとHTMLの文字が青く反転します。画面では少ししか見えていませんが、長いコードが選択された状態になっています。これを右クリックかCtrl+C でコピーします。

 

5. WordPress 投稿画面でテキストをクリック

WordPress 投稿画面

WordPressの投稿画面で地図を貼り付けたい記事を開きます。

右上にビジュアルテキストというタブがあります。ここでテキストというタブをクリックします。

 

6. HTMLを貼り付ける

HTMLを貼り付ける

テキストタブを開くと自分が書いた記事と、HTMLというアルファベットの文字が混じった状態で表示されています。この中から自分が地図を貼り付けたい場所を探します。

そこに、さっきコピーしたコードを貼り付けします。

右上のテキストのとなりのビジュアルというタブに戻してみると張り付いたことが目で見て分かりやすいです。

 

7.更新する

うまく出来たので、ここで忘れずに更新ボタンをクリックします。

これで出来上がりです。

自分のパソコンで見た地図と、人が見た地図は若干違って見えるようですので、スマホで確認してみました。

出来上がったページがこちら

うまくできていて良かった。

出来ないことがひとつづつ、出来るようになってうれしいです。

 

 

ブログ作りの記録

 

 


人気ブログランキング
にほんブログ村 にほんブログ村へ
にほんブログ村

ブログランキングに参加しています。
ポチッとしていただけるととってもうれしいです。

Posted by しお