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をコピペでレスポンシブ化する方法
詳しくは上記サイトを参照するとして、やり方を自分用にもメモっておこう。
１．Google MAPを開く
２．住所などを入力して地図を表示させる
３．左側に表示される”共有”をクリック
４．”地図を埋め込む”をクリック
５．コードが表示されるので、"ＨＴＭＬをコピー”をクリック ※これでコードが、コピーされている
６．Embed Responsivelyを開く
７．”Google MAPs”のタブをクリック
８．先程コピーしたGoogle MAPのコードを枠内に貼りつけ ”Ｅｍｂｅｄ”をクリック
９．下に向かってスクロールすると、地図の下に”Embed code:”という枠がある その中に表示されているコードを全てコピー
１０．地図を載せたい場所へEmbed Responsivelyのコードを貼りつけ
完成！！ （ＡＣＴシアターで作ってみた、見本）
すごいー！すごいー！！ コピペのみで、レスポンシブー！！！
こんたけ感動しても、すぐに忘れそうなので自分用のメモとして書き残しておきます。
