【CSS】Googleマップの埋め込み用HTMLコードをレスポンシブに対応させる

Googleマップで、埋め込み用HTMLコードを発行して、ブログやサイトに貼り付けて使うことがよくあると思います。

サイトがレスポンシブ対応の場合、本文中のGoogleマップが、要素からはみ出して見栄えが崩れたり、案内したい所在地のポインタが表示されないということがあります。

responsive-google-map-no-good

Googleマップの埋め込み用HTMLコードは「iframe」形式になっており、表示する「横幅:width」「高さ:height」が指定されています。標準ではpx単位なので、そのままHTMLコードを貼り付けると固定値のため、レスポンシブには対応せずに表示が崩れてしまう原因になります。

responsive-google-map-customized

それでは、Googleマップの埋め込み用HTMLコードのカスタマイズ画面で調整してみようと思って幅に「100%」を入力したら・・・反映されませんでした・・・。

responsive-google-map-customized-02

ブログなどの投稿エディターに貼り付けをしてから、幅を変更するしかなさそうです。

responsive-google-map-html-code

CSSを用いたGoogleマップのレスポンシブ化

HTMLコードの横幅を直接編集して調整もできますが、CSSで指定しておくことでレスポンシブ化することもできます。

responsive-google-map-html-code-02

Googleマップを <div class=”googlemap”>~</div> で囲みCSSを追加しておきます。

.googlemap iframe,
.googlemap object,
.googlemap embed {
    height: auto;
    max-width: 100%;
}

親要素からGoogleマップの横幅が超える場合、100%に調整して表示されるようになります。

responsive-google-map-02

関連記事

プロモーションビデオ制作の制作事例を公開いたしました!

店舗や会社、商品やサービスを動画で紹介してみませんか。 インターネット環境の高速化やスマートフォンの普及により多くの方が動画コンテンツを身近に楽しむようになりました。そして、動画コンテンツは、新しいマーケティングツールとして注目されています。 店舗のオープンやイベントのお知ら...続きを読む

2018.09.11

【WP】ワードプレスで会員登録機能を実装するプラグイン「WP-Members」

今回紹介するプラグイン「WP-Members」を使用すると、WordPressでユーザーの登録フォームを公開したり、会員情報として住所やフリガナなど項目をカスタマイズすることや、登録しているユーザーのみに記事を限定に公開する機能を構築することができます。 WP-Member...続きを読む

2016.07.01WordPress

【CSS】linear-gradient(グラデーション)を使ったボタン作成

CSSのlinear-gradient()関数を用いることで画像を使わずとも、グラデーション色のボタンを作成することができます。 ※矢印は、「Font Awesome」、文字はGoogle Fontsの「M PLUS Rounded 1c」を組み合わせております。 ボ...続きを読む

2021.02.19CSSHTMLコーディング

【WP】管理画面で操作をしていたらForbiddenが表示された

さくらインターネットのレンタルサーバで、WordPressを用いてWEBサイト(ホームページ)やブログを開設し、WordPressの管理画面を操作中に「Forbidden」が表示されたことありませんか? Forbidden The server refuse to...続きを読む

2018.08.02WordPressさくらインターネットレンタルサーバ

MakeShop(メイクショップ)の販売代理店となりました

デザインスタジオ・エフではこのたび、GMOグループのMakeShop(メイクショップ)の販売代理店となりました。 月額無料から利用できるショッピングカート。MakeShopは、ネットショップの開店から運用までの一連の作業を効率化し、ネットショップオーナーをサポートします。 ...続きを読む

2015.03.24