こめなべ

マンガ・アニメ・ドラマや映画の感想&声劇台本置いてます

【CSS不要!簡単コピペのみ!】Google MAPをブログ内にレスポンシブで貼りつける方法

こめなべ-ブログのコツ-タイトル

CSSを追記するのも難しい!私みたいな人向け

長年ブログを書いておりますが、正直、書くこと以外はサッパリわかりません。 レンタルサーバーがどうのとか、WordPressがこうだとか…噛み砕いて説明してもらっても、理解できる脳みそを持ち合わせていないのです。

なので「こういうことがしたい」と思ったときは、毎回ネットの海に船を出すことから始まります。 大量の情報の中から”自分が理解できる”情報を、見つけなくてはならないので、困難を極める始末。

今回は「Google MAPをレスポンシブで貼りつけたい」と思いました。 ところがどのサイトにも「CSSで装飾すれば簡単」と、書いてあります。

世間一般の簡単のレベルが、ハードル高過ぎる…orz だって…これだと、テンプレート変えるたびにCSS書き換えしないといけないんでしょう? ワードプレスのテンプレート、下手に触るとブログの表示が真っ白になったりするし。

「どうにかコピペだけで、簡単にサクッとレスポンシブ化できないの?!」と、探してみたら…見つけました!!

Google MAPのレスポンシブ化がコピペだけでできる!

はじめは、CSSを追記してレスポンシブ化する方法が書かれています。

中盤あたりに、コピペだけでできる方法が載っているのですが…こちらの記事の通りにやってみたら、本当にコピペだけでできました CSSは、触っていません。

いちいちCSSを書くのが面倒な場合はこんなサービスもありました。 Embed Responsively http://embedresponsively.com/ You TubeやGoogleMapなどの埋め込みコードをレスポンシブ対応にしてくれます。 使い方は、サービスを選択して、URLをコピペすればレスポンシブ対応のコードを生成してくれます。
引用元:googlemap のhtml埋め込み(レスポンシブ対応) コピペ用 | web制作の覚え書き

さて、こだわっている“レスポンシブ”。

現在はブログを読む環境も、様々です。 主になるのは、スマートフォンタブレットでしょうか。

パソコン画面で、いい感じに配置できたとしても、スマホタブレットから見ると「はみ出してるよ」とか、「見づらい」ということもあります。

レスポンシブデザインというのは、「読む環境が変わっても、ワシに任せろ!パソコンじゃろうが、スマホじゃろうが、タブレットじゃろうが、何にでも見やすいように対応しちゃるわい!!」という、頼もしい存在なのです!!(勝手な超解釈)

レスポンシブってものにすればいいんだ…と理解していても、自分では何をどうすりゃいいのか、全くわかりません。 結果「どなたか、レスポンシブ化教えてくださいー!!」と、やり方をネットの海で探すことになるのです。

できるだけ簡単に! コピペだけでできるの、希望!!って。

それが『Embed Responsively』を使うと、できちゃう!! 魔法みたい…(拝)。

【自分用メモ】Google MAPをコピペでレスポンシブ化する方法

詳しくは上記サイトを参照するとして、やり方を自分用にもメモっておこう。

1.Google MAPを開く

2.住所などを入力して地図を表示させる

3.左側に表示される”共有”をクリック

4.”地図を埋め込む”をクリック

5.コードが表示されるので、"HTMLをコピー”をクリック  ※これでコードが、コピーされている

6.Embed Responsivelyを開く

7.”Google MAPs”のタブをクリック

8.先程コピーしたGoogle MAPのコードを枠内に貼りつけ  ”Embed”をクリック

9.下に向かってスクロールすると、地図の下に”Embed code:”という枠がある  その中に表示されているコードを全てコピー

10.地図を載せたい場所へEmbed Responsivelyのコードを貼りつけ

完成!! (ACTシアターで作ってみた、見本)

すごいー!すごいー!! コピペのみで、レスポンシブー!!!

こんたけ感動しても、すぐに忘れそうなので自分用のメモとして書き残しておきます。