友達がお店を開いたんだ！ブログで紹介してあげたいんだけど、お店の場所を地図で表示することってできるの？ できますよ！グーグルマップをワードプレスに埋め込めば、簡単に表示できます。 埋め込む・・・？なんか難しそう。 大きく分けて2ステップなので大丈夫ですよ！ 2ステップならいけるかも！ 目次Google Map（グーグルマップ）の埋め込み方 お店や会社などのホームページで、グーグルマップが載っているのを見たことがありますか？例えば、以下の画像のような地図です。 </noscript><iframe data-src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6490.69004685359!2d139.371628!3d35.569875!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018fd7ba2601e4f%3A0xabbf0fb3a7d50927!2z55u45qih5Y6f5ZWG5bel5Lya6K2w5omAIOacrOaJgA!5e0!3m2!1sja!2sjp!4v1688639016775!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="lazyload" > あ、これ見たことある！！ これが「グーグルマップを埋め込んだ」状態です。 一見埋め込むのに大変な作業が必要と感じるかもしれません。しかし、大きく分けて以下の2ステップで埋め込むことができます！ ①グーグルマップで地図のコードをコピーする ②ワードプレスに貼り付ける それでは、それぞれの流れを説明していきます。 ①グーグルマップで地図のコードをコピーする まず、グーグルで地図を表示したい場所の住所・店舗名・会社名・建物名などを検索します。 検索するキーワードによって地図が出てくる場合と、出てこない場合があります。今回は出てこなかったので、検索結果の上部にある「地図」をクリックします。 すると、検索した場所のグーグルマップが表示されます。 地図を埋め込むためのコードは、住所などの情報が載っている画面の「共有」から取得できます。 上部にある「地図を埋め込む」をクリックすると、地図を埋め込むためのコードが表示されます。 次に埋め込みたい地図のサイズを選択します。（小・中・大・カスタム）すると、サイズに合った埋め込み用のコードが自動的に表示されます。 ちなみに、サイズはこんな感じです。 ▼小サイズ（400px×300px） </noscript><iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3245.3450201773326!2d139.36943961525577!3d35.569875080220505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018fd954586a235%3A0xa2137a7ef3e1632a!2z44Op44Oz44OB44OR44OD44OJ44OG44Kv44OO44Ot44K444O877yG44OR44O844OI44OK44O85qCq5byP5Lya56S-!5e0!3m2!1sja!2sjp!4v1688640346814!5m2!1sja!2sjp" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="lazyload" > ▼中サイズ（600px×450px） </noscript><iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3245.3450201773326!2d139.36943961525577!3d35.569875080220505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018fd954586a235%3A0xa2137a7ef3e1632a!2z44Op44Oz44OB44OR44OD44OJ44OG44Kv44OO44Ot44K444O877yG44OR44O844OI44OK44O85qCq5byP5Lya56S-!5e0!3m2!1sja!2sjp!4v1688640346814!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="lazyload" > ▼大サイズ（800px×600px） </noscript><iframe data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3245.3450201773326!2d139.36943961525577!3d35.569875080220505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018fd954586a235%3A0xa2137a7ef3e1632a!2z44Op44Oz44OB44OR44OD44OJ44OG44Kv44OO44Ot44K444O877yG44OR44O844OI44OK44O85qCq5byP5Lya56S-!5e0!3m2!1sja!2sjp!4v1688640346814!5m2!1sja!2sjp" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="lazyload" > お好みのサイズを選んだら、「HTMLをコピー」をクリックします。※今回は中サイズを選択しました。 「コピーしました」って出なくても、きちんとコピーできているみたい！ 細かく説明すると長くなってしまいますが、これで「①グーグルマップで地図のコードをコピーする」完了です！ ②ワードプレスに貼り付ける コードをコピーしたら、ワードプレスを開きます。※投稿ページ・固定ページどちらでも貼り付けられます。 あわせて読みたい 【WordPress】初心者でもわかる！ログインとログアウトの方法 – テクこや 一緒にログアウトの方法も教えます。 ホームページを作成する際によく利用されるワードプレスですが、例えば制作会社 あわせて読みたい 【WordPress】投稿と固定ページとの違いをわかりやすく解説 – テクこや この二つってどう違うの？ 「投稿」はブログやお知らせ「固定ページ」は会社紹介やお問い合わせなどで使用します。 ワードプレスで編集画面を開いたら、ブロックエディタの「カスタムHTML」を追加します。 カスタムHTMLの追加方法は3種類あります。どこから追加しても同じブロックが表示されますので、1番使いやすい方法で追加してください。 詳しい追加方法については、こちらをご覧ください。※「見出し」を「カスタムHTML」に置き換えてください。 カスタムHTMLを表示したら、枠内に先ほどコピーしたコードを貼り付けします。 貼り付けは、Ctrl+Vです！ これってちゃんと貼り付けできているの？？ 文字が並んでいてもわかりませんよね。「プレビュー」をクリックして確認してみましょう。 おお！ちゃんとできているね！ 「HTML」とは、コンピュータがデータを読み取るための言語です。実際の見え方とは異なるので、「プレビュー」から確認しましょう。 Google Map（グーグルマップ）を埋め込むメリット 手作りの地図などではなく、グーグルマップを埋め込むメリットとして、例えば以下のような例があります。 パソコンでもスマートフォンでも見やすいパソコンの画面は大きく横長、スマートフォンの画面は小さく縦長のものが主流です。グーグルマップなら、設定不要で自動的に画面のサイズに合わせて調整してくれます。 そのままルート案内ができるグーグルマップではルート案内機能もあるので、地図で表示している場所へのルートもすぐに確認できます。 常に最新の情報が表示されるグーグルマップは様々なユーザーが情報の更新をしているので、手作りの地図と比べて更新が楽です。 グーグルマップに慣れているユーザーが多いグーグルマップは見慣れている方が多いので、地図の表記に戸惑ったり使い方に困ったりすることが少ないです。 まとめ 今回はワードプレスにグーグルマップを埋め込む方法を紹介しました。 ①グーグルマップで地図のコードをコピーする②ワードプレスの「カスタムHTML」に貼り付ける 大きく分けて、この2ステップでしたね。 かなり大股の2ステップだったー。 慣れてしまえば簡単にできますよ！ グーグルマップの埋め込みは誰でも簡単にできるので、ぜひ2ステップを使いこなしてくださいね！ ※今回紹介した方法は、「Google Maps API」 を利用していないため、何回地図が表示されても「無料」です。 Google Maps APIとはグーグルマップをカスタマイズして、より使いやすくするサービスのこと。表示回数に応じて料金が発生します。 このブログ記事はお役に立てましたか？ 〇 役に立った 0 × よくわからなかった 0 ワードプレス よかったらシェアしてね！ URLをコピーする URLをコピーしました！ URLをコピーしました！ 【WordPress】管理画面でタイトルが縦長なるのを修正する方法 【ひな形あり】MW WP FORMとzipaddr-jpを利用して郵便番号から住所の自動入力を実装 このブログ記事を執筆したパソコン講師 千枝子 ワードプレス勉強中です。 初心者だからこその視点で、わかりやすくお伝えしていきます。 一緒にテクこやで学んでいきましょう！ この著者の記事一覧へ この記事を読んだ方は以下の記事も読んでいます 【WordPress】ボタンブロックの使い方をわかりやすく解説 2023年4月25日 【WordPress】段落ブロックの使い方！文字色・太さ・大きさの変え方を徹底解説 2022年7月15日 【WordPress】プラグインなし！表をブロックで作る方法を分かりやすく解説 2023年2月6日 WordPress の セキュリティ の基本的な対策6選とおすすめの セキュリティプラグイン 2023年9月1日 【WordPress】見出しブロックの使い方！大見出し・小見出しの違いを徹底解説 2022年8月5日 【WordPress】管理画面でタイトルが縦長なるのを修正する方法 2023年6月26日 【ひな形あり】MW WP FORMとzipaddr-jpを利用して郵便番号から住所の自動入力を実装 2023年7月31日 【WordPress】投稿と固定ページとの違いをわかりやすく解説 2022年6月3日 質問などあれば気軽に書き込んでくださいね♪ コメントする コメントをキャンセルコメント ※ 名前 ※ メール ※ サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
質問などあれば気軽に書き込んでくださいね♪