GOOGLEマップをレスポンシブに対応させる方法
  • GOOGLEマップをレスポンシブに対応させる方法
  • 記事公開:2016/02/15
  • 最終更新:2016/02/28

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

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

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

WordPressサイトの常時SSL化はお任せください。

ADhttps://wordpress-supporters.com/wordpress-ssl/

常時SSL化されていないサイトにGOOGLEが警告文を表示させるまであと僅か!
今すぐにでも必要なWordPressサイトの常時SSL化は、プロに丸投げしてください。
今だけ20,000円OFF、GOOGLE対策、リミット間近、サポート充実。

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だけで簡単にレスポンシブに対応できます。
興味のある方は参考にしてください。

WordPressサイトの常時SSL化はお任せください。

ADhttps://wordpress-supporters.com/wordpress-ssl/

常時SSL化されていないサイトにGOOGLEが警告文を表示させるまであと僅か!
今すぐにでも必要なWordPressサイトの常時SSL化は、プロに丸投げしてください。
今だけ20,000円OFF、GOOGLE対策、リミット間近、サポート充実。

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

あなたのWEBサイトをWordpressで
管理できるようにしませんか?

あなたのWEBサイトを見た目そのままでWordpress化いたします。
以下に興味のある方は、お気軽にご相談下さい。

  • あなたのWEBサイトを、Wordpressで運営できる様にいたします。ページの編集や追加も簡単に行えるようになります。
  • どの様な形式のサイト(例えば、アメブロ、MTサイトなど)でもWordPress化いたします。
  • Wordpress化でサイトのデザインが崩れるなどの心配は必要ありません。デザインもサイト構成もほぼ変わらない、高い再現率が自慢です。
  • 単にWordpress化するだけではありません。デザイン変更など+αの作業にも対応することも可能です。
  • 他案件との兼ね合いもありますが、最短即日であなたのサイトをWordpress化いたします。
  • 初心者でもWordpressが使えるよう、納品後に徹底的な操作サポートをご提供いたします。Wordpress化したけど操作できないと、あなたが頭を抱えることはありません。

興味のある方は、以下のリンクからチェックしてみてください。

詳細を確認する

現在、上記サービスは別ドメインで運用しております。
ドメインは異なりますが、わたしが提供させていただいているサービスです。

著者:takaya kondo

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

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

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

  • 2015-11-21

    チェックボックスを一括でチェックor解除する方法

    チェックボックスを一括でチェックor解除する方法をご紹介します。簡単な記述だけで一括チェックと解除を実装することができます。気になった方は2分間だけこのコンテンツを見てください。 記事を読む

  • 2015-03-14

    【SEO対策】text-indent:-9999pxを使わずテキストを画像に置換する方法

    text-indent:-9999pxを用いて、テキストを画像に置換する手法をご存知でしょうか?この手法、便利なのですが、SEO的に不利だと言われています。そこで今回は、text-indent:-9999pxを使わずテキストを画像に置換する方法をご紹介いたします。 記事を読む

  • 2015-04-29

    CSSで特定の画像だけを中央揃えにする方法

    画像を設置するブロックをセンタリングすることなく特定の画像だけを中央揃えにする方法をご紹介しています。あまり需要はないかもしれませんが、どなたかの参考になるとうれしいですね。 記事を読む

  • 2016-04-04

    画像加工はもう不要!CSSだけで画像を円形にする方法

    CSSだけで画像を円形にする方法をご紹介します。この方法を知っていれば、画像を個別に加工する必要はなくなります。スタイリッシュな円形画像をサイトデザインに取り入れたい方、ぜひ参考にしてください。それでは、CSSだけで画像を円形にする方法をどうぞ! 記事を読む

  • 2016-03-29

    知らずに損した!最初・最後・奇数・偶数・○番目など、要素を指定して装飾する方法

    疑似クラスを使うことで、CSSを複雑にすることなく指定要素を装飾することができます。「この3番目のliタグだけ色を変えたい」など特定の要素だけを装飾したいケースの参考にしてください。 記事を読む

コメントを残す


(必須)