Googleマップをスマホサイトに埋め込むとはみ出す時の対処法
レスポンシブのスマホサイトに Google map を埋め込むと、はみ出してしまう。
これをはみ出さないようにしたい。
共有から
iframeのタグをコピペする。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23796.650854092717!2d140.75646100404356!3d41.79423516221846!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f9ef46bcb8d5525%3A0xa9e4bd2d96c4d502!2z54m55Yil5Y-y6Leh5LqU56ic6YOt6Leh!5e0!3m2!1sja!2sjp!4v1460702096429" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
HTMLをちょこっとだけ改造
<div class="gmap"><iframe...上のコピペソース.../iframe></div>
という感じで、 div でくくってやる。
そして普通にページに貼り付ける。
ちなみに class名の gmap は何でもOK。
CSSに追記
.gmap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .gmap iframe, .gmap object, .gmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
これだけで、勝手にレスポンシブに対応してくれる。
コピペソースに
width="600" height="450"
などの記述があるが、レスポンシブ時にはこれは無視されるのでそのままでOK。
こんな記事も読まれています
WordPressのPhotonが酷すぎる件。画像が表示されなくなる問題
WordPressで画像が表示(ロード)されなくなった 全…twentyfifteenで灰色の線をなくす方法 Wrodpress
Twenty Fifteen シンプルな記事型ブログに最適なテーマ シン…WordPressのカテゴリーページを記事タイトルの一覧表示にする簡単な方法
カテゴリーページに記事一覧を表示する方法 プラグインを使ってWordPr…CSSをIEとMicrosoft Edgeにだけ適用させる5つの方法、CSS記述方法やHTML条件分岐など
IEと、Microsoft Edgeだけ形が崩れてしまったりする場合の対…【出店料・手数料比較】大手オンラインショッピングモール(楽天、ヤフー、Amazon、自前ECサイト)のプランを一斉比較してみた
ネット通販で副業や起業を考えている人がチェックすべきオンラインショップ …