Googleではレスポンシブ ウェブ デザインの推奨していますので、Google Mapも画面サイズ(PC Tablet smartphone)によって表示サイズが変わると便利だと思います。
そこで今回はGoogle Mapのレスポンシブ ウェブ デザイン対策を紹介します。対策はとっても簡単で単純なことです。
Google Mapのレスポンシブ ウェブ デザイン対策
Google Mapよりウェブサイトへの地図埋め込み用 HTML コードを取得すると<iframe width=”425″ height=”350″ frameborder=”0″・・・みたいなコードを取得することが出来ます。この取得したコードのwidth=”425″をwidth=”100%”に書き換えるでけです。
これでGoogle Mapが画面サイズ(PC Tablet smartphone)によって表示サイズが変わります。
次はアメブロの記事のサイズに合わせてGoogle Mapサイズを自動変更出来る方法を紹介します。
設定の仕方は以前紹介したYouTubeをcssで可変にするトリックで説明してあるコードと同じコードを使います。
すでにアメブロにYouTubeをcssで可変にするトリックできるcssコードを追加している方はここで紹介するcssコードは新たに追加する必要はありません。
それではアメブロの記事のサイズに合わせてGoogle Mapサイズを自動変更出来る方法を紹介していきます。
アメブロの記事のサイズに合わせてGoogle Mapサイズを自動変更
ここで使うコードはCSS: Elastic Videosで紹介されているコードでGoogle Mapサイズを自動変更する方法です。
アメブロはスマートフォン対応になっています。スマートフォンだとGoogle Mapは自動変更されますが、PCではGoogle Mapサイズは自動変更されません。デザインをカスタマイズした際、記事サイズを大きくしたり、小さくしたりすることもあると思います。
Google Mapサイズより記事が小さい場合
cssで可変にするトリックを使うと小さい記事でもそのサイズに合わせて表示されます。
コードを使っていれば記事サイズを大きくしても、そのサイズに合わせてGoogle Mapサイズが自動変更されます。
コードは以前紹介したYouTubeをcssで可変にするトリックで説明してあるコードと同じコードを使います。すでにアメブロにYouTubeをcssで可変にするトリックできるcssコードを追加している方はここで紹介するcssコードは新たに追加する必要はありません。
html
htmlコードはGoogle Mapで取得したiframeコードを<div class=”video-container”>~</div>で囲むだけなんですが、囲む箇所がYouTubeと違い一番外側に囲むわけではないので画像で紹介します。下記画像のようにGoogle Mapで取得したiframeコードを<div class=”video-container”>~</div>で囲んでください。
続いてcssコードを追加します。
css
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
デザインが「CSS編集用デザイン」の場合は「こちらから」css編集にコードを追加してください。
それ以外のデザインはフリープラグインにコードを追加して使います。
これでアメブロをカスタマイズした際、記事サイズが変わってもGoogle Mapサイズも自動変更されるのでとても便利になると思います。
最終更新日: 2013年3月27日
ピンバック: googleマップの挿入 | studio-0