ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

スマホでもしっかり表示!自社サイトでGoogle Mapをレスポンシブ表示させる方法

スマホでもしっかり表示!自社サイトでGoogle Mapをレスポンシブ表示させる方法

自社サイトを運営している方は、サイト内に自社のオフィスやお店の場所を載せたいと考えている方も多いのではないでしょうか。

その際、レスポンシブ表示の設定ができていないと、PCでは正常に表示されていても、スマホやタブレットなどではレイアウトが崩れてしまうことがあります。

というわけで今回は、自社サイトのGoogle Mapを、どのデバイスでもしっかりと表示させる方法をご紹介したいと思います。(今回はWordPressでの設定方法を紹介します。)

ステップ1:Google Mapをサイトに表示させる

まずは、Google Mapを開いて、自分のサイトに表示させたい住所を検索してください。

表示ができたら、赤丸で囲んだ「共有」のボタンをクリックしてください。

そして「地図を埋め込む」をクリックします。地図の大きさは既定では中になっていますが、大きさを指定することもできます。

回はのまま「HTMLをコピー」をクリックしてください。

そして、WordPressのダッシュボードへアクセスし、「投稿」もしくは「固定ページ」の、自分がGoogle Mapを埋め込みたいページに移動します。

編集画面に移動したら、ページ内のGoogle Mapを埋め込みたい部分で、右側の+ボタンをクリックし、カスタムHTMLを選択します。

そして、ここに先程コピーした、自社のGoogle Mapのコードを貼り付けます。

これで、サイトにGoogle Mapを表示させることができました。一度PCでの表示を確認してみてください。

ステップ2:レスポンシブ表示の設定をする

次に、スマホやタブレットでもしっかり表示させるための、レスポンシブ表示の設定について解説します。

まずは、ご自身のスマートフォンで、Google Mapがどの様に表示されているか確認してみてください。

WordPressにレスポンシブ表示の設定がなされていない場合や、サイトをHTMLで直書きしている場合は、動作がおかしかったり、地図の「拡大・縮小」のボタンが見切れている場合があります。

また、PCでの表示はこれでいいけど、スマホでの表示はもう少し小さくしたい、ということもあると思います。

それらを解消するために、レスポンシブ表示の設定をしていきます。

ダッシュボード内の外観>カスタマイズをクリックします。

追加CSSを選択し、以下のコードを入力してください。

/* タブレットでの大きさ */
@media (max-width: 1020px) and (min-width: 768px){
 iframe{
  width:100%; /* 横幅 */
  height:400px; /* 縦幅 */
 }
}
/* スマホでの大きさ */
@media (max-width: 767px) {
iframe{
 width:100%; /* 横幅 */
 height:200px; /* 縦幅 */
 }
}

コードの説明をしておくと、「@media〜」はメディアクエリ といってデバイスの横幅に応じて表示を変えるというものです。

Google Mapを表示させているHTMLのタグは「iframe」という名前なので、その中のwidthやheightの値を調節することで、大きさを調節しています。

widthやheightの値を変更することで、自分の思うサイズに調節することができますが、大きさによっては、マップ内の要素が表示されなくなることがあるので注意が必要です。

これで、レスポンシブ表示の設定は完了です。スマホやタブレットで表示を確認してみてください。

また、最小限の大きさでGoogle Mapを埋め込みたいという方のために、各要素がしっかりと表示される最小値を紹介しておきます。

「拡大地図」のみを表示(縦長):width:50px; height:160px;

「拡大地図」のみを表示(横長):width:135px; height:50px;

「拡大地図」「拡大・縮小のマーク」「航空写真」の全てを表示: width:200px; height:200px;

ぜひマップの大きさに関しては、自分のサイトにあったものを調節してお使いください。

さて、ここまで自社サイトでGoogle Mapをレスポンシブ表示させる方法についてご紹介してきました。スマホやタブレットでもしっかりと表示させることができたでしょうか。

メディアクエリの指定は理解が難しいですが、レスポンシブ表示には欠かせない要素です。

これから自社サイトにGoogle Mapを表示させたいと考えている方も、是非参考にしてみてください!では!

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。