WordPressを用いたホームページ制作はお任せください!岡山県を中心に絶賛活動中!
  • GOOGLEマップをレスポンシブに対応させる方法

GOOGLEマップをレスポンシブに対応させる方法

clock-613842_1280

GOOGLEマップをレスポンシブに対応させる方法をご紹介します。GOOGLEマップは埋め込みコードを設置しただけはレスポンシブに対応していません。この記事を読めば3分でGOOGLEマップをレスポンシブに対応させることができます。

この記事は約 3 分で読めます。

GOOGLEマップをレスポンシブに対応させる

GOOGLEマップを埋め込んでいるサイトを最近よく目にします。
簡単に地図をサイト上に埋め込めるので非常に便利ですよね。

地図の埋め込み=GOOGLEマップと言っても良いのかもしれません。
ただ、1点だけ残念な部分もあります。

それは、デフォルトではレスポンシブに対応していないと言うこと。
今の時代、スマホを無視したサイト構築はありません。

そこで、GOOGLEマップをレスポンシブに対応させる方法をご紹介します。

まずは、以下のようにGOOGLEマップを設置しましょう。

<div id="google_map">ここにGOOGLEマップの埋め込みコード</div>

【<div id=”google_map”></div>】で囲むのがポイントです。

【ここにGOOGLEマップの埋め込みコード】の部分に、GOOGLEマップから取得した埋め込みコードを記述してください。

GOOGLEマップのコードを取得する手順は、以下でご確認いただけます。

WordPressの投稿や固定ページにGoogleマップを埋め込む方法

埋め込みコードを記述したら、続いてCSSに定義を加えてレスポンシブに対応させましょう。
以下のように定義してやります。

#google_map {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
#google_map iframe,
#google_map object,
#google_map embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

上記は【GoogleMapの地図をレスポンシブサイトに埋め込む方法】のを参考にしています。

上記の様にCSSで定義してやると、以下の様にGOOGLEマップがレスポンシブ対応となります。

スマホで確認してみてください。
デバイスの横幅に合わせて縮小されます。

GOOGLEマップのレスポンシブ対応は以上です。

まとめ

GOOGLEマップをレスポンシブに対応させる方法をご紹介しました。

CSSだけで簡単にレスポンシブに対応できます。
興味のある方は参考にしてください。

シェアしていただきありがとうございます。

clock-613842_1280

この記事が気に入ったら【いいね】しよう!

著者:とあるWEBディレクター

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に7年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • PPP_cyairoihushinomegane500

    CSSで背景を半透明にする方法

    「CSSで背景色を半透明する方法」をご紹介します。 記事を読む

  • background-784377_1280

    美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。

    美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。CSSだけでデザインにグラデーションを導入したい方は参考にしてください。5分後にはグラデーションを自由自在に操れるようになります。 記事を読む

  • clock-1205634_1280

    ランディングページでも使える!JavaScriptで作るカウントダウンタイマー

    JavaScriptで作るカウントダウンタイマーをご紹介します。ランディングページなどにカウントダウンタイマーを設置したい方は参考にしてください。1分後には本格的なカウントダウンタイマーの設置方法をマスターすることが出来ます。 記事を読む

  • film-589490_1280

    予想以上に簡単だった!YOUTUBE動画のサムネイルを取得する方法

    YOUTUBE動画のサムネイルを取得する方法をご紹介します。YOUTUBEの様々なサイズのサムネイルを取得したい方に向けたコンテンツです。2分後にはお好きなサイズのサムネイルを自由に取得できるようになります。 記事を読む

  • cat-300572_1280

    サイト上でALT設定を可視化できる「Google Chrome」拡張機能

    サイト上でALT設定を可視化できる「Google Chrome」拡張機能をご紹介します。【Alt & Meta viewer】という拡張機能ですが、Alt属性のチェックには欠かせない拡張機能です。WEBサイトを制作する方は、インストールしておいて損はありません。 記事を読む

コメントを残す


(必須)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)