追加CSSが効かない？WordPressでカスタマイズが反映されないときの確認ポイント
angleinc0913
合同会社Angle Inc.
【画像付き解説】WordPressにGoogle Mapを埋め込む方法
angleinc0913
お店や事務所、イベント会場の情報をWebサイトで紹介する際、Google Mapの埋め込みはほぼ必須ともいえる要素です。Google Mapをサイト内に埋め込んでおけば、閲覧者がその場で場所を確認でき、すぐにルート検索や拡大縮小が可能になります。「アクセスしやすい」印象を与えることで、来訪・来店のハードルを下げることができるでしょう。
今回は、コードが書けなくてもできるGoogle Mapの埋め込み方法を、画像付きでわかりやすくご紹介します。合わせて、スマホでも崩れないレスポンシブ対応の方法も解説しますので、ぜひ参考にしてください。
目次
Google Mapを埋め込む手順
WordPressにGoogle Mapを埋め込む方法は、とてもシンプル。Google Mapの提供する埋め込みコード（iframe）をコピーして、記事内に貼り付けるだけです。
以下の手順で行いましょう。
① Google Mapで場所を検索
まずは、Google Mapにアクセスし、埋め込みたい場所を検索します。
お店や会社名、住所などを入力すると、目的地のピンが表示されます。
② 「共有」→「地図を埋め込む」を選択
場所が表示されたら、画面左の施設情報パネルから「共有」ボタンをクリックします。
次に表示されるポップアップで、「地図を埋め込む」というタブを選びます。
ここに、iframe形式の埋め込みコードが表示されます。
③ 埋め込みコードをコピー
iframe形式の埋め込みコードが表示されたら「HTMLをコピー」をクリックして、表示されたコードをコピーします。埋め込みコードの横の▼をクリックすることで「中」「小」「大」「カスタムサイズ」などサイズ選択も可能です。
// 小サイズ 400px x 300px
<iframe src="埋め込みURL..."
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
// 中サイズ 600px x 450px
<iframe src="埋め込みURL..."
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
// 大サイズ 800px x 600px
<iframe src="埋め込みURL..."
width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>カスタムサイズでは、横幅と縦幅を自由に変更することができます。用途に応じて調整してください。
④ WordPressの記事や固定ページに貼り付ける
WordPressの投稿画面に移動し、「カスタムHTML」ブロックを追加します。
その中に、先ほどコピーしたiframeコードをそのまま貼り付けます。
貼り付けが完了したら、プレビューページで実際の表示を確認しましょう。地図がきちんと表示されていればOKです。
⑤ 固定ページやウィジェットにも設置可能
この方法は、記事だけでなく「アクセス」ページや「フッターウィジェット」にも応用できます。
ウィジェット内に「カスタムHTML」ブロックを追加して、同様にiframeを貼り付けることで、常に地図を表示しておくことも可能です。
レスポンシブ対応
デフォルトのGoogle Map埋め込みコードは、サイズが固定値（px）で指定されており、スマートフォンで見ると地図がはみ出したり、縮小されすぎたりしてしまうことがあります。
そのため、モバイル対応（レスポンシブ化）するには、CSSを使って表示を調整する必要があります。
以下のような方法で、埋め込んだGoogle Mapをレスポンシブ対応にできます。
① 埋め込みコードをラップするdivを用意
まず、iframeを<div class="map-container">で囲むようにします。
<div class="map-container">
<iframe src="埋め込みURL..."
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>② CSSを追加（外観→カスタマイズ→追加CSS）
以下のCSSを「追加CSS」や子テーマのCSSファイルに追加します。
.map-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9比率 */
height: 0;
overflow: hidden;
}
.map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}このCSSを適用すると、画面サイズに応じて自動的にGoogle Mapが縮小・拡大されるようになります。スマートフォンでも快適に表示されるため、見た目の統一感や使いやすさが格段にアップします。
上記のコードではpadding-bottom: 56.25%;を指定することにより、.map-containerの高さは横幅に対して56.25%（= 9 ÷ 16 × 100）に固定されます。
つまり、画面の幅が変わっても、16:9の比率を保ったまま表示領域が拡大・縮小される仕組みです。デフォルトの56.25%は16:9の比率に基づいていますが、他の縦横比に合わせて調整することも可能です。
4:3の比率にしたい場合 … padding-bottom: 75%;（= 3 ÷ 4 × 100）
1:1の正方形で表示したい場合 … padding-bottom: 100%;
など、画面サイズや埋め込むエリアのデザインに合わせて、最適な比率を設定することが可能です。
PCとタブレット・スマホでサイズを変更する場合
場合によっては、「PCではデフォルトのサイズで地図を表示したいけれど、スマホやタブレットでは画面に収まるようにしたい」というニーズもあると思います。
このような場合には、メディアクエリ（CSSの条件分岐）を使って、PCとタブレット以下で表示方法を切り替えるのがおすすめです。
① HTML（iframe）はそのままでOK
まず、通常通りGoogle Mapのiframeコードを埋め込みます。
<div class="map-container">
<iframe src="埋め込みURL..."
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>②CSSで「タブレット以下」のときだけレスポンシブ表示に変更
以下のようなスタイルを追加CSSや子テーマのCSSファイルに追記してください。
/* タブレット以下（768px）でレスポンシブに変更 */
@media screen and (max-width: 768px) {
.map-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9比率 */
height: 0;
overflow: hidden;
}
.map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
}この方法では、通常のPC表示ではGoogleが発行したiframeのサイズ（width=600, height=450）をそのまま使いつつ、画面サイズが768px以下になったときだけCSSでレスポンシブ処理を適用しています。
まとめ
Google Mapの埋め込みは、Webサイトに“信頼感”と“利便性”を与えるシンプルかつ強力なツールです。
今回ご紹介したように、埋め込み自体は数分で完了する簡単な作業ですが、レスポンシブ対応まで行っておくことで、スマートフォンからの閲覧にも配慮された丁寧なサイト作りが実現します。
この機会に、アクセスページやフッターなど、必要な箇所にGoogle Mapを導入してみてはいかがでしょうか？
ABOUT ME
