インターネット集客

ブログにGoogleマップを貼りたい 埋め込む方法

目安時間 8分
  • コピーしました
ブログにGoogleマップを貼る

こんにちは☆

大阪で内装工事の施工店を営んでいる アオゾラです。

 

当店は 店舗ブログを持っており、店情報や施工日記など投稿し ネットより集客しています。

 

そんなブログ記事内で『地図』を表示したい、埋めこみたいときがあります。

笑うおじさん

お客さんに店の位置(住所)を伝えたいとき 地図があれば便利ですよね。

そこで、今回は【店舗の住所などのグーグルマップ】をブログに埋め込む方法。

 

WordPressにおいて グーグルマップ掲載方法を案内します。

 

ブログに貼りたい地図を検索する

まずは WordPressブログに貼りたい、載せたい場所の地図(googleマップ)を検索します。

アオゾラ

例えばブログ記事内に「大阪城の地図」を載せる とします。

Googleマップで「大阪城」と検索窓に入れてクリック。

 

大阪城のマップ

 

 

すると、Googleマップが自動的に「大阪城」を位置した画面に移動します。

 

Googleマップの大阪城

 

 

そのあと、丸で囲った『共有』という箇所をクリックします。

 

『共有ボタン』で地図を埋め込むを選択

『共有』をクリックすると「リンクを送信する」「地図を埋め込む」と2つ表示。

 

右側の「地図を埋め込む」を選びクリックください。

 

地図を埋め込む方法

 

すると[小サイズ][中サイズ][大サイズ][カスタム]

 

と 地図の埋め込みサイズを選ぶことができます。

アオゾラ

画像では、紫色矢印で「中」と表示しています。

 

グーグルマップの埋め込みサイズ

 

中の隣「▼」を押すと、ほかにも[小サイズ][大サイズ][カスタム]と出てきます。

 

[小サイズ]=画像幅400ピクセル、高さ300ピクセルの地図サイズ。

 

[中サイズ]=画像幅600ピクセル、高さ450ピクセルの地図サイズ。

 

[大サイズ]=画像幅800ピクセル、高さ600ピクセルの地図サイズ。

 

「▼」を押せば 地図サイズを変更できます。

WordPressブログに中サイズ地図を埋め込む方法

例えば「中サイズの地図」をブログに埋め込みたい場合の方法です。

 

「中」をクリック。

 

すると、すぐ右横に ズラズラ~と長文の ⇓英文字コード が表示します。

 

<iframesrc="https://www.google.com/maps/embedpb=!1m18・・・・・

 

『HTMLをコピー』という青文字をクリックすると勝手にコピーされる😁

 

つぎに 自分のブログ投稿画面へ移動して 先ほどコピーしたコードを貼り付けます。

 

貼り付けるときの注意点を1つ書きます。

アオゾラ悲しい

ブログ投稿画面は「ビジュアル」ではなく「テキスト」に変えてから貼り付けよう!

「中サイズの地図」を埋め込んだ。

 

 

「小サイズの地図」を埋め込み★

 

 

 

「大サイズの地図」を埋め込みました。

 

 

質問する男性

ブログに埋め込むなら、サイズはどれがお勧めですか?

アオゾラ

「小サイズ」で良いです。地図を詳しく見たいなら「拡大地図を表示」できますから♪

グーグルマップのカスタムサイズの使い方

大中小サイズのほか「カスタムサイズ」があります。

 

googlemapでカスタムサイズを使用する方法を 最後に案内します。

 

カスタムサイズを選ぶと、以下の画像が表示されます。

 

グーグルマップのカスタムサイズ

 

赤枠のサイズ箇所を お好みサイズに変え入力します。

 

すると、希望サイズのグーグルマップ埋め込みができます★

アオゾラ

あとは「HTMLをコピー」を押し コピーされたコードをブログに貼れば 埋め込み完了。

ちなみに、カスタムの700ピクセル×400ピクセルサイズの地図は以下★

 

 

先ほども書きましたが、ブログ投稿ページは「テキスト」で貼り付けください🌸

まとめ:ブログにGoogleマップがあると便利

店用のブログに「グーグルマップ」を埋め込むことができれば便利です。

笑うおじさん

店舗の場所(位置)を 地図でお客様に教えられますからね。

ブログで時には プライベート記事を書くこともありますよね。

 

アオゾラ嬉しい

そんなとき、〇〇のクレープ屋さんは美味しいよ!と その地図を載せることもできます🍀

グーグルマップを埋め込むと 記事内容が より分かりやすくなります。

 

ブログは文章ばかり並ぶより 写真やイラストが文の間に 挿入されると 読みやすいもの♪

 

写真までの効果はないですが、マップを入れることで 文章が少しは読みやすくなり、理解も早まります。

 

Googleマップをブログへ埋め込んだことがない方は 難しい操作に感じるかな。。。

 

しかし、当記事を読んで試してみてください☆

 

意外と カンタンに地図を貼ることができますよ😊

 

以上【ブログにGoogleマップを貼りたい 埋め込む方法】の話をアオゾラがしました。

 

ー関連記事ー

 

写真画像 ピクセルとは?(twitterプロフィール画像やヘッダー画像サイズは?)

 

パソコン画面が横向きになった!画面を元に直す方法

 

スマホ撮影した大きい写真画像を縮小する方法

 

 

↓下記リンクをクリック頂くと「アオゾラのブログランキングポイント」が加算☆

 

 

人気ブログランキング参加してますので、応援よろしくお願いします😊

  • コピーしました