【初心者でも簡単!】Googleマップで取得した地図がブログからはみ出す時の対処法




map-1272165_640

どうも!茨城のおじさんブロガー、「いばらじお♪」の

清宮真(@makoto_seimiya)です。

今回は、FC2やライブドアブログなどの無料ブログにGoogleマップを貼りつけた時、ブログのレイアウトから大きくはみ出してしまう場合の対処法について書いてみます。

CSSをいじらない方法なので、初心者でも簡単に出来るかもしれませんよ。

ブログからグーグルマップがはみ出す!?

以前FC2でブログを書いていた時、ブログからグーグルマップが大きくはみ出して困っていました。

今はライブドアブログなので、レスポンシブ対応って言うんですかね、自動で修正してくれてるみたいなんですけど、ブログを読み込む際に一度大きくはみ出してしまいます。

気にならない人は良いと思うんですけど、ライブドアブログも、たまに修正が上手くいかず「はみ出したまま」の状態の時がある気がするんですよね・・・。(気のせいだったらごめんなさい)

この症状を簡単に直す裏ワザを見つけたので紹介しますね。

Googleマップの埋め込みコードを取得

まずは、Googleマップの埋め込みコードを取得します。

▼埋め込みコードを取得するやり方はコチラを参考にしてください。

ブログでお店を紹介する時の地図、お店情報の載せ方

クリック1つでレスポンシブ対応できるembed responsively

なんと!取得したコードを1クリックでレスポンシブ対応できるページがありました!!

▼ここembed responsivelyにアクセスしてみてください

embedresponsively.com

 

すると、下のような画面が出ます。

2016-09-13 (5)

①のところで「GoogleMaps」を選んで、

②へGoogleマップで取得した埋め込みコードを貼りつけます。(はじめに記載されている文字は消してしまうみたいです)

③をクリックするとPreview画面が出ます。そしたら下へスクロールすると~

2016-09-13 (6)

赤枠の所にレスポンシブ対応されたEmbed code(埋め込みコード)が生成されます。

これをコピーしてブログのHTML編集画面に貼りつけるとFC2でもはみ出さないんじゃないかと思います。

ライブドアブログの場合も、読み込み時の段階でも地図がはみ出さず、ブログが左右にブレる事がありません。

僕は、けっこう気になるタイプの人なので、これからはこの方法でブログに地図を載せようかと思います。

CSSをいじる必要がないので初心者でも簡単ですね。

▲今回の方法で貼り付けたGoogleマップ

embed responsivelyはYouTube、インスタグラムにも対応

embedresponsively.com

embed responsivelyはユーチューブやインスタにも対応できるみたいですよ。

僕が試したときはYouTubeは上手くいきませんでした。原因は不明。

2016-09-17 (2)

YouTubeの場合は「埋め込みコード」ではなく、「共有」をクリックしてコピー。

2016-09-17 (3)

embed responsivelyへアクセスして「YouTube」を選択。

先ほどコピーしたものを貼り付け「Embed」をクリック。

「共有」でコピーしたコードが長いとエラーになる感じです?

2016-09-17 (4)

Preview画面の下に出た文字列をコピーしてブログのHTML編集画面に貼りつけると~

これならライブドアブログの読み込み時にもはみ出さない!レスポンシブ対応が上手くいかずはみ出す事もないと思います。

にほんブログ村 地域生活(街) 関東ブログ 茨城県情報へ
にほんブログ村

がんばって書いてます。応援してちょ!

 

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

最新情報をお届けします

Twitter でいばらじお♪をフォローしよう!



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

清宮 真

茨城のおじさんブロガー いばらじお♪を運営している清宮真です。 陽気なおじさんがラジオパーソナリティのように茨城の魅力を届け読む人の気持ちを明るくします。 食いしん坊なので茨城県内の食レポ多め。 3人の子どもの子育て中につき、こどもと一緒に行けるお出かけスポットやイベントも紹介しますよ~ 好みの記事があると幸いです。 どうぞよろしくお願いいたします。