【WordPress】サイト内に「Googleマップ」を埋め込む方法をご紹介!カスタマイズも!【HTML】

HTML/CSS

みなさんこんにちは!おさかなです!

今回は「【かんたん!】サイト内に「Googleマップ」を埋め込む方法をご紹介!【HTML】」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・Googleマップの埋め込み方法を知りたい方
・埋め込みコードの取得方法を知りたい方
・HTML/CSS初学者の方

Googleマップを埋め込みたい!

おさかな
おさかな

ナビまる~!
この前「YouTubeの動画」を埋め込んだみたいに「Googleマップ」も埋め込めるの?

ナビまる
ナビまる

かんたんに出来ちゃうよ~!

おさかな
おさかな

(心強い球体だな!!)

 

【WordPress】ブログに「YouTubeの動画」を載せたい!埋め込みコードの取得方法をご紹介!
ブログやサイトに「YouTubeの動画」を埋め込む方法をご紹介!画像付きで1つ1つの手順を解説するので、PCに自信がない方でも安心です!実際にWordPressに動画を埋め込んでいきます!必見です!「おさかなび-osakanav-」では、「デジタル時代を楽しむためのミニ知識」をご紹介しています!ゆるいイラストが目印!

埋め込みコードを取得しよう!

それではまず、Googleマップで埋め込みたい「場所」を表示してください。(今回はディズニーランドを指定しています!)

次にサイドバーの中にある「共有」ボタンをクリックします!

するとこのようなウィンドウが表示されるので、「地図を埋め込む」タブに切り替えます!

タブが切り替わったら、右側にある「HTMLをコピー」をクリックします!

下から「クリップボードにコピーしました」と表示されればOKです!

無事に埋め込みコードが取得できたので、次の項では実際にサイト内に埋め込んでいきたいと思います!

マップを表示させてみよう!

それでは先ほど取得したコードを貼り付けていきましょう!

WordPress以外のサイトでも、同じコードを使用してGoogleマップを埋め込むことが可能ですが、今回は「WordPress」にGoogleマップを埋め込む手順をご紹介します。

まずは「ダッシュボード」>「投稿」>「新規投稿」を開きます!

次に右上のタブを「テキスト」に切り替えます。

ここに先ほどコピーしたコードを貼り付けます!(いい感じ…♪)

先ほどのタブを「ビジュアル」に戻すと、ディズニーランドが示されたマップが表示されていると思います!(ハハッ!やったね!)

基本的な設定はこれで完了です!(おつかれさま☕)

サイズをカスタマイズしてみよう!

サイズをカスタマイズしたい場合は、HTMLを編集します!
今回はWordPressの中で、コードに慣れていない人でもできるように解説するので、ご安心ください!

コピーしたコードをよく見てみると「width=”600″ height=”450″」と表示されている箇所があると思います。

 

実はこの星の部分、width=”” height=”“に数字を入力することができ、この数値を変更することでサイズを変えることができます!(なるほど!)
おさかな
おさかな

デフォルトでは、横600px、縦450pxになってるよ!

それではテキストタブから、サイズを変更してみましょう!
(↓横300px、縦300pxに指定した場合、こうなります。)
この時、数字は必ず「半角」そして、「”ダブルクオーテーションの中”」に入力してください!正しく入力されていないと、変更が反映されません。
こんな感じ”800”
ビジュアルタブに戻すと…?先ほどよりも小さく表示されていると思います!(わ~い!)

動作チェックをしよう!

↓実際に埋め込んだものがコチラ✨

↓サイズをwidth(横)300px、height(縦)300pxにカスタマイズしたものです…!

これで全ての設定が完了しました!(やった~!)おつかれさまでした🍵

いかがだったでしょうか?

おさかなびではプログラミング学習中の人や、IT初心者に向けて「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

この記事は役に立ちましたか?

タイトルとURLをコピーしました