comments trackbacks you may also like

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

2020年02月04日
#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゚;;何を今さら!なんて思わないで下さいね。ボク自身、ずっと長い間にわたってこのスマホアプリを使ってきたというのに、今までまったく気付...

この記事、おもしろかったわ。
気に入ったらどしどしシェアしてね♪
\Thanks/

【ランキングに挑戦中】

いつも応援クリック↓
ありがとうございます

にほんブログ村

関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール
iconiconiconicon

この記事が気に入ったら
いいねとシェアしよう!

data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!
未分類 (0)
シン・胃がん闘病記 (45)
┣  AVANT:癌の余命宣告~共存 (32)
┗  セントラルドグマ:父親の胃癌 (13)
胃がん闘病記録まとめ (85)
┣  ステージ3B-多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (27)
胃がん-Stomach_cancer (5949)
┣  胃がんブログ (285)
┣  よりぬき胃がんブログ (16)
┣  胃がん闘病記-日記 (5586)
┣  酒場放浪記 (10)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (36)
┗  がん治療のクラウドファンディング (10)
がんのこと-ガン情報全般-cancer (560)
┣  がんブログ (325)
┗  がんニュース (235)
胃がん障害年金ブログ (71)
┣  障害年金-準備編 (23)
┣  障害年金-審査から年金受給まで (12)
┣  障害年金-審査請求-不服申立 (26)
┗  障害年金-再審査請求 (10)
Amazon (157)
┣  Amazonセール (3)
┗  Kindleセール (153)
おもしろグッズ (11)
今日のエッセイ (141)
ニュース-芸能-話題 (859)
┗  転職-キャリアアップ (21)
占い-心理テスト (6)
恋愛-人間関係 (30)
終活ブログ (12)
グルメ (111)
┣  低糖質レシピ (31)
┗  お酒の飲み方 (2)
胃切除後の食事レシピ (672)
┣  ご飯-おかゆ-和食 (174)
┣  おかず (140)
┣  味噌汁-スープ (75)
┣  カレー関係 (66)
┣  パン-洋食 (63)
┣  麺類 (112)
┗  その他-簡単レシピなど (39)
ブログ (258)
┣  FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など (188)
┣  FC2ブログ日記-カスタマイズの所感など (23)
┣  GoogleAdsense-アドセンス (8)
┣  趣味や将棋のこと (31)
┗  ファッション (8)
iPhoneの使い方-アプリなど (34)
司法書士 (1)
┣  仕事-実務や登記のこと (1)
┗  事件ファイル (0)
COLLECTION (28)
┣  家電 (11)
┣  ホーム&キッチン (5)
┣  ビューティー&ヘルスケア (5)
┣  QOL改善&ヘルスケア (2)
┗  お酒 (5)