ゆうらり Happy Smile
【コピペOK】Googleマップをレスポンシブ対応する方法、サイズ調整も不要!

【コピペOK】Googleマップをレスポンシブ対応する方法、サイズ調整も不要!

FC2ブログ日記-カスタマイズの所感など
2020/02/04
胃がん_ブログ_ゆうらりHappySmile_管理人M_イラスト_アイコン_画像
M
#Googleマップ #Googleマップ埋め込み #Googleマップレスポンシブ対応 #Googleマップレスポンシブ #iframeタグレスポンシブ #ブログカスタマイズ #FC2ブログ日記 #ブログ運営 #ウェブデザイン

東京ディズニーランド - Google マップ


こんにちは! FC2ブロガーのM(@yulari_happy )です。


ブログを書いていると、記事の内容によっては地図を掲載したい時ってありますよね。そして、ブログに地図を貼る場合に誰もが利用しているのはGoogleマップだと思います。


やり方としては、Googleマップを開いて場所を決めたら地図のサイズを調整。あとは発行された埋め込みコードをブログに貼り付けるみたいな…。


しかし、発行されるhtmlコードはiframeタグ。これってレスポンシブ対応してないから面倒なんですよね(汗)サイズがデカいとブログからはみ出るし、小さいとPC画面では非常に見づらい!


そんな訳で、Googleマップの埋め込みコードをレスポンシブ対応する方法について調べてみたところ、超簡単でした。iframeタグのサイズ調整も不要になり、とても便利だと思ったのでご紹介したいと思います(^^)

スポンサードリンク

コピペで超簡単!Googleマップの地図をレスポンシブ対応する方法

Googleマップの地図をレスポンシブ対応させるにはCSSのコーディングが必要なのだけれど、1回だけスタイルシートに記述しておけば後は楽ちんというわけです。


コピペでそのまま使えるようにコードを書いておきます。

html

<div class="gmap">
<iframe src="GoogleマップのURL" style="border:0" allowfullscreen></iframe>
</div>

CSS

.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

なお、詳しい説明をお知りになりたい方は僕が参考にさせてもらった下記のサイトをご覧下さい。


>>参照元:Googleマップをレンスポンシブに対応する方法 – WEBDESIGNDAY


スポンサードリンク

Googleマップをレスポンシブ対応させた後のデモはこちら

Googleマップが無事にレスポンシブ対応したかどうか、東京ディズニーランドの地図を実際に埋め込んでみます。


まずは、横幅300px&縦幅250pxのサイズで貼ったのが下の地図。



そして、サイズをレスポンシブ対応にしたのが下の地図になります。スマホで見ると違いが分かりにくいので、画面を横向きにしてみて下さい。



ちゃんと画面サイズに応じて地図の大きさが可変していますね(^^)

この記事、おもしろかったわ。
さすがに他の似た記事ないわよねぇ…
あるよ。(田中要次風)
下の「検索」ボタン押してみてや。

頻繁にGoogleマップを記事に埋め込んでいるブロガーさんにはとても便利でおすすめだと思いますよ!

スマホを使ったFC2ブログの書き方、アプリの「地図を挿入」機能とは

スマホでブログを書くときは専ら、FC2さんの旧ブログアプリを普段使いしているFC2ブロガーのMです。いつものように新規投稿の画面を開いて記事の作成に取りかかろうとしたところ、気になるものを発見しまして…。何と!!画面左下のほうに、「地図を挿入」する機能があるじゃないですか!(゚o゚;;何を今さら!なんて思わないで下さいね。ボク自身、ずっと長い間にわたってこのスマホアプリを使ってきたというのに、今までまったく気付...

あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事ランキング
FC2ブログ日記-カスタマイズの所感など