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シアターで作ってみた、見本)
すごいー!すごいー!! コピペのみで、レスポンシブー!!!
こんたけ感動しても、すぐに忘れそうなので自分用のメモとして書き残しておきます。