こんにちわ。
先日、公園の地図を埋め込んだ際にちょっと戸惑ったので、備忘録としてやり方を残します。
目次
まず、レスポンシブ対応って何？
「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。
現在はPCやスマートフォンなど、デバイス毎に各HTMLファイルを複数用意し最適化することが、一般的な制作方法となっています。
「レスポンシブWebデザイン」では、1つのHTMLファイルを、CSS3（Media Queries）で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。出典：LIG INC. 必読！5分でわかるレスポンシブWebデザインまとめより
簡単に言うと、「パソコンでもスマホでもいい感じに見える」ということです。
GoogleMapのコードを貼り付けただけではうまく表示されない
GoogleMapで入手する貼り付け用のコードを貼るだけでは、うまく表示されません。
コードの入手のしかたはこちら。
埋め込む前には準備が必要
まずは、WordPressの編集画面から「外観」→「テーマの編集」→「style.css」の最後に
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
を追記し、保存します。※追記するのは最後の行でOKです。
CSSを編集したら、「投稿の編集」画面でコードを入れる
CSSの編集が終わったら、「投稿の編集」画面の「テキスト」タブをクリックします。
GoogleMapで取得したコードを↓の青字部分に入れます。
<div class=”ggmap”>取得したコード</div>
先日紹介した公園のHTMLは、↓になります。
<div class=”ggmap”><iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.0673432554377!2d139.8085873152601!3d35.72456228018409!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ee1027501a7%3A0xe39d3c1e1491fb68!2z44CSMTMxLTAwMzQg5p2x5Lqs6YO95aKo55Sw5Yy65aCk6YCa77yR5LiB55uu77yY4oiS77yR!5e0!3m2!1sja!2sjp!4v1499646952518″ width=”800″ height=”600″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>
これを「テキスト」タブの画面に入れると↓のように表示されます。
スマートフォンでは↓のように表示され、無事にレスポンシブ対応が完了しました。
CSSやHTMLはとっつきにくいかもしれませんが、やっているうちにちょっとずつ慣れていきます。
この方法は便利なので、これからも場所の紹介をするときには使って行きます。