みなさんこんにちは！おさかなです！
今回は「【かんたん！】サイト内に「Googleマップ」を埋め込む方法をご紹介！【HTML】」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・Googleマップの埋め込み方法を知りたい方
・埋め込みコードの取得方法を知りたい方
・HTML/CSS初学者の方
Googleマップを埋め込みたい！
ナビまる～！
この前「YouTubeの動画」を埋め込んだみたいに「Googleマップ」も埋め込めるの？
かんたんに出来ちゃうよ～！
(心強い球体だな！！)
埋め込みコードを取得しよう！
それではまず、Googleマップで埋め込みたい「場所」を表示してください。(今回はディズニーランドを指定しています！)
次にサイドバーの中にある「共有」ボタンをクリックします！
するとこのようなウィンドウが表示されるので、「地図を埋め込む」タブに切り替えます！
タブが切り替わったら、右側にある「HTMLをコピー」をクリックします！
下から「クリップボードにコピーしました」と表示されればOKです！
無事に埋め込みコードが取得できたので、次の項では実際にサイト内に埋め込んでいきたいと思います！
マップを表示させてみよう！
それでは先ほど取得したコードを貼り付けていきましょう！
まずは「ダッシュボード」>「投稿」>「新規投稿」を開きます！
次に右上のタブを「テキスト」に切り替えます。
ここに先ほどコピーしたコードを貼り付けます！(いい感じ…♪)
先ほどのタブを「ビジュアル」に戻すと、ディズニーランドが示されたマップが表示されていると思います！(ハハッ！やったね！)
基本的な設定はこれで完了です！(おつかれさま☕)
サイズをカスタマイズしてみよう！
サイズをカスタマイズしたい場合は、HTMLを編集します！
今回はWordPressの中で、コードに慣れていない人でもできるように解説するので、ご安心ください！
コピーしたコードをよく見てみると「width=”600″ height=”450″」と表示されている箇所があると思います。
デフォルトでは、横600px、縦450pxになってるよ！
(↓横300px、縦300pxに指定した場合、こうなります。)
動作チェックをしよう！
↓実際に埋め込んだものがコチラ✨
↓サイズをwidth(横)300px、height(縦)300pxにカスタマイズしたものです…！
これで全ての設定が完了しました！(やった～！)おつかれさまでした🍵
いかがだったでしょうか？
おさかなびではプログラミング学習中の人や、IT初心者に向けて「デジタル時代を楽しむためのミニ知識」をご紹介しています！
ぜひ他のページも覗いてみてください…！
それでは今回はこの辺で！
ここまで読んでくださり、ありがとうございました！
おさかなでした！
