Mapをレスポンシブ表示させる方法2020.06.19レスポンシブWebデザイン自社サイトを運営している方は、サイト内に自社のオフィスやお店の場所を載せたいと考えている方も多いのではないでしょうか。その際、レスポンシブ表示の設定ができていないと、PCでは正常に表示されていても、スマホやタブレットなどではレイアウトが崩れてしまうことがあります。Mapを、どのデバイスでもしっかりと表示させる方法をご紹介したいと思います。(今回はWordPressでの設定方法を紹介します。Mapを開いて、自分のサイトに表示させたい住所を検索してください。表示ができたら、赤丸で囲んだ「共有」のボタンをクリックしてください。「地図を埋め込む」をクリックします。地図の大きさは既定では中になっていますが、大きさを指定することもできます。今回は中のまま「HTMLをコピー」をクリックしてください。Mapを埋め込みたいページに移動します。Mapを埋め込みたい部分で、右側の+ボタンをクリックし、カスタムHTMLを選択します。Mapのコードを貼り付けます。Mapを表示させることができました。一度PCでの表示を確認してみてください。ステップ2:レスポンシブ表示の設定をする次に、スマホやタブレットでもしっかり表示させるための、レスポンシブ表示の設定について解説します。Mapがどの様に表示されているか確認してみてください。WordPressにレスポンシブ表示の設定がなされていない場合や、サイトをHTMLで直書きしている場合は、動作がおかしかったり、地図の「拡大・縮小」のボタンが見切れている場合があります。PCでの表示はこれでいいけど、スマホでの表示はもう少し小さくしたい、ということもあると思います。それらを解消するために、レスポンシブ表示の設定をしていきます。ダッシュボード内の外観>カスタマイズをクリックします。追加CSSを選択し、以下のコードを入力してください。いってデバイスの横幅に応じて表示を変えるというものです。Mapを表示させているHTMLのタグは「iframe」という名前なので、その中のwidthやheightの値を調節することで、大きさを調節しています。widthやheightの値を変更することで、自分の思うサイズに調節することができますが、大きさによっては、マップ内の要素が表示されなくなることがあるので注意が必要です。これで、レスポンシブ表示の設定は完了です。スマホやタブレットで表示を確認してみてください。Mapを埋め込みたいという方のために、各要素がしっかりと表示される最小値を紹介しておきます。height:200px;ぜひマップの大きさに関しては、自分のサイトにあったものを調節してお使いください。Mapをレスポンシブ表示させる方法についてご紹介してきました。スマホやタブレットでもしっかりと表示させることができたでしょうか。メディアクエリの指定は理解が難しいですが、レスポンシブ表示には欠かせない要素です。Mapを表示させたいと考えている方も、是非参考にしてみてください!では!商品の販売に“夢中”になれるクラウド型ECサイト構築ASPECサイト構築、リニューアルを2000社以上支援してきた知見からECの専門家として御社のEC事業成長をサポートします。aiship_rモバイルファースト・マーケティングラボおすすめRANKINGECサイトの構築方法を徹底比較。Mapをレスポンシブ表示させる方法2019.01.11SEOに強いECサイトを構築する4つのポイント2018.10.01Googleモバイルファーストインデックス対策はレスポンシブが最適な理由クラウドECのサイト構築はaiship-カスタマイズも可能なカートASP累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。モバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。-サブスク対応ASP国内唯一のレンタル・サブスクECサイト構築専用のクラウド型カートシステムで、レンタルECの運営に必要な、直感的にレンタル期間を選択できるカレンダー表示や日毎の在庫/スケジュール管理などの機能を全て標準搭載しており、ドレス/着物/アウトドア用品/バッグ/家具等あらゆる業種のレンタルECサイト構築に完全対応。継続課金のサブスクリプションにも対応しているため幅広いサービスに最適で、導入200社以上の実績。毎月無償バージョンアップを実施しているため常に最新の状態でレンタル・サブスクECサイトを運用可能。新規立ち上げからシステムのリプレイスまで月額29,800円より実現できます。