「メンタルてんきよほー」は”hikaru3.Labo”へリニューアル。

1分で出来る!Googleマップをブログに簡単に埋め込む方法(レスポンシブ対応)

パソコン技術
スポンサーリンク

ブログを見ているとGoogleマップが埋め込んであるのを見かけます。

 

自分もやってみたいと思いつつ、ググってもよくわからない。

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”]こんにちは~! 姫路のホームページ屋さん うえのです(@flexbox)です。[/speech_bubble]

 

 

専門知識は、まったくいりません(^^)

 

 

1分で埋め込める方法を書いてみます。

 

 

 

スポンサーリンク

Googleマップを開いて、載せたい場所を検索

 

あらかじめ、ワードプレスの記事作成画面・Googleマップの2つを開いておくと、作業がスムーズ。

 

ここからGoogleマップを開いてください。

 

 

赤ワクがワードプレスの投稿画面 / きいろワクがGoogleマップ この状態で話を進めます。

 

 

 

 

神戸モザイクあたりの地図を埋め込みます

 

 

Googleマップは、開くと現在地付近の地図が出ます。

 

 

 

 

 

Googleマップの検索窓に「神戸モザイク」と入力して、虫めがね🔎マークをクリック。

 

 

 

 

 

 

モザイク付近の地図が表示されます。

 

 

地図の左上に、下の写真のように出ているとOK。

 

 

 

 

Googleマップから埋め込みコードをコピー

 

赤のワクでかこんだ「三」をクリック。メニューが出てきました。

 

 

 

 

 

 

メニューを下へ見ていくと「地図を共有または埋め込む」があります。ここをクリック。

 

 

 

 

 

下の写真の「地図を埋め込む」をクリック。

 

 

ここに長いコードが出てきました。

 

 

このコードの上にマウスを移動。右クリックで文字が青反転します。

 

 

 

 

そのままコピーをクリック。

 

 

ワードプレスへ移動しましょう。

 

 

 

ワードプレスのテキストモードでコピーしたコードを貼り付ける

 

 

 

テキストモードにして、地図を埋め込みたいところにマウスを移動。

 

 

 

右クリックして、「貼り付け」をクリック。

 

 

写真のようになります。

 

 

 

 

 

ビジュアルモードにすると、下のように地図が埋め込まれています。

下の地図は、実際に埋め込んでいます。右下の + や – で拡大・縮小します

 

 

 

 

もしも、上手くいかない場合。慌てなくても大丈夫。

 

 

 

 

[speech_bubble type=”drop” subtype=”R1″ icon=”pc-ueno.jpg” name=”うえのさん”]

テキストモードに貼ったコードを、消しましょう。

もう一度、Googleマップに戻ってコードをコピー。

同じ場所に貼ってください。

[/speech_bubble]

 

 

 

記事を更新して確認

 

 

ビジュアルモードで地図が表示されたら、「下書きとして保存」。

 

プレビューで確認。

 

 

 

 

 

 

[speech_bubble type=”drop” subtype=”R1″ icon=”pc-ueno.jpg” name=”うえのさん”] 表示されていたらOK! お疲れ様でした。[/speech_bubble]

 

 

 

スマホからはこんな感じで見えますよ(*^^*)

 

 

 

 

 

Googleマップを1分で埋め込める方法のまとめ

 

いかがでしたか!? 読んでいる時間は長かったですが、ビビるほど簡単です。

 

Googleマップを使う人が多いので、記事に地図があると読者には親切なサイトですね。

 

ぜひ活用してください。

 

[speech_bubble type=”drop” subtype=”R1″ icon=”pc-ueno.jpg” name=”うえのさん”]うえのでした。(@flexbox)[/speech_bubble]

 

 

 

スポンサーリンク
この記事を書いた人
ひかるん

当サイト「hikaru3.Labo(ひかるんラボ)」管理人
45歳で軽度ADHDと分かり、現在リハビリ中。

ミラーレス片手に自然や大地に近づいて、様々な問題が解消。
Perfumeと仮面ライダー電王で「未来に希望を持つ」

詳しいプロフィールはこちらで~す

ひかるんをフォローする
パソコン技術
スポンサーリンク
この記事が気に入ったら最新ニュース情報を、
いいねしてチェックしよう!
hikaru3.labo

コメント メールアドレスは公開されることはありません。*印はが付いている欄は必須項目です。