SWELLでブログやサイトを運営していると、お店のアクセスページやスポット紹介記事に地図を入れたい場面が出てきます。Googleマップはプラグインなしで埋め込めるので、はじめての方でも手順さえわかれば迷わず設定できます。
この記事では、SWELLのカスタムHTMLブロックを使ったGoogleマップ埋め込みの基本手順から、スマホ表示への対応、うまく表示されないときの原因と対処法まで、初心者の方にもわかりやすく整理しています。
副業ブログやWordPressサイトを育てている方が、地図の設置でつまずくことなく先に進めるよう、実用的な情報を順番にまとめました。
SWELLで地図を埋め込む基本の流れ
SWELLでGoogleマップを埋め込む場合、WordPress標準の「カスタムHTML」ブロックを使うのが最もシンプルで安定した方法です。専用のプラグインやAPIキーは不要で、Googleマップの公式機能から取得したコードをそのまま貼り付けるだけで完了します。
Googleマップで埋め込みコードを取得する
まず、Googleマップ（maps.google.co.jp）を開き、サイトに掲載したい場所の名称や住所を検索します。地図上に目的の場所が表示されたら、左側のサイドバーにある「共有」ボタンをクリックしてください。
表示されたウィンドウの中から「地図を埋め込む」タブを選択すると、iframeタグを使った埋め込み用のHTMLコードが表示されます。コードの上にあるサイズ選択では「小・中・大・カスタムサイズ」から選べます。一般的には「中」（横600px×縦450px）が扱いやすいサイズです。「HTMLをコピー」をクリックしてコードをコピーしたら、この作業は完了です。
コードの中には地図の座標情報や表示設定が含まれています。コピー後は別の場所に誤って貼り付けないよう、すぐにWordPressの編集画面に移るとスムーズです。
WordPressの編集画面でカスタムHTMLブロックを追加する
WordPressの投稿・固定ページ編集画面を開き、地図を入れたい位置にカーソルを置きます。ブロック追加ボタン「＋」をクリックして、検索欄に「HTML」と入力すると「カスタムHTML」ブロックが表示されます。それをクリックして追加してください。
追加されたカスタムHTMLブロックの入力欄に、先ほどコピーした埋め込みコードを貼り付けます。「HTMLを入力…」と表示されているエリアにそのまま貼れば問題ありません。コードを加工する必要はなく、この段階ではコピー＆ペーストだけで完了です。
Googleが公式に用意したiframeコードをそのまま貼り付けるため、仕様変更などの影響を受けにくく動作が安定します。
プラグインを追加する必要がないため、サイトの表示速度にも影響しません。
プレビューで表示を確認して保存する
コードを貼り付けたら、編集画面右上の「プレビュー」ボタンから「新しいタブでプレビュー」を選び、実際の表示を確認します。地図が正しく表示されていれば、「下書き保存」または「更新・公開」をクリックして保存すれば設定は完了です。
カスタムHTMLブロックの編集画面では地図のプレビューが表示されないこともありますが、実際のページでは正しく表示されることがほとんどです。確認はプレビューで行う習慣をつけておくと安心です。
- Googleマップで場所を検索し、「共有」→「地図を埋め込む」の順に進む
- 「HTMLをコピー」でコードを取得する
- WordPressのカスタムHTMLブロックにコードを貼り付ける
- プレビューで表示を確認してから保存する
スマホ表示への対応とサイズ調整の方法
Googleマップから取得したコードをそのまま貼り付けると、パソコンでは問題なく表示されてもスマホで画面からはみ出してしまうことがあります。ブログ読者の多くはスマホからアクセスするため、この対応はセットで覚えておくとよいでしょう。
横幅が固定されている原因を理解する
Googleマップから取得した埋め込みコードには、横幅を指定する部分として width="600" のような記述が含まれています。この数値が固定されているため、スマホの画面幅より地図が大きくなり、横にはみ出して見づらくなることがあります。
対処法はコードの中の width="600" という部分を width="100%" に書き換えるだけです。「100%」と指定することで、表示する画面の横幅いっぱいに地図が自動調整されるようになります。高さ（height）の数値はそのまま残してかまいません。
コードのどこを書き換えるか確認する
WordPressの編集画面でカスタムHTMLブロックを選択すると、貼り付けたコードを直接編集できます。コードの中に width="600" または width="800" のような部分を探し、その数値部分だけを 100% に変更してください。
書き換えは引用符（”）の内側の数値だけを変更する点に注意します。引用符やその周辺の記号を誤って削除するとコードが壊れて地図が表示されなくなるため、変更箇所は最小限にとどめましょう。変更後は再度プレビューで表示を確認してください。
小：横400px × 縦300px
中：横600px × 縦450px（バランスが良くおすすめ）
大：横800px × 縦600px
カスタムサイズ：任意の数値を入力して指定可能
縦の高さはどのくらいがよいか
縦の高さ（height）はサイトのデザインやページの用途によって調整するとよいでしょう。アクセスマップとして設置する場合、高さ400〜450px程度が地図の視認性とページのバランスの面から使いやすいサイズです。
縦の高さが小さすぎると地図が見づらくなり、大きすぎるとページのスクロール量が増えて読者の操作感に影響します。実際のページをスマホでプレビューして確認しながら調整するのが確実です。
- 横幅の
width値を100%にするとスマホ対応できる - 変更は数値部分のみで、引用符や記号は削除しない
- 縦の高さは400〜450px程度が扱いやすい
- 変更後は必ずスマホのプレビューで確認する
地図が表示されないときの原因と対処法
手順通りに設定したにもかかわらず、地図が表示されない場合があります。よくある原因はいくつかのパターンに絞られるため、一つずつ確認していくことで多くのケースで解決できます。
コードが完全にコピーされていない場合
最も多い原因の一つが、埋め込みコードの一部しかコピーできていないケースです。Googleマップの埋め込み画面で「HTMLをコピー」をクリックした後、貼り付けたコードが途中で切れていないかを確認します。コードは <iframe で始まり </iframe> で終わる形になっているため、この両端が揃っているかを見てください。
コードに不備がある場合は、Googleマップから再度「HTMLをコピー」をクリックしてコピーし直す方法が確実です。貼り付ける際は既存のコードをすべて削除してから新しいコードを貼り付けてください。
コードを誤って編集してしまった場合
サイズ調整などでコードを編集する際、数値以外の部分（引用符・スラッシュ・山括弧など）を誤って削除するとコードが壊れて地図が表示されなくなります。この場合も、Googleマップから改めてコードをコピーし直して貼り付け直すのが最も確実な対処法です。
編集に自信がない場合は、元のコードをメモ帳などに控えてから作業を始めると安心です。万が一間違えた場合でも、控えたコードに戻すことができます。
SWELLのキャッシュが影響している場合
SWELLには表示速度を高めるためのキャッシュ機能が搭載されています。地図の埋め込みや設定変更を行った後に表示が反映されない場合、キャッシュが原因のことがあります。
キャッシュのクリアはWordPress管理画面上部のツールバーから「キャッシュを削除」ボタンで行えます（SWELLを有効化している場合）。クリア後にページを再読み込みして確認してください。それでも改善しない場合は、サーバー側のキャッシュも確認するとよいでしょう。
| 原因 | 確認ポイント | 対処法 |
|---|---|---|
| コードの一部欠損 | iframeタグの開始・終了が揃っているか | Googleマップから再コピーして貼り直す |
| コードの誤編集 | 引用符や記号が削除されていないか | コードをコピーし直して貼り付け直す |
| キャッシュの影響 | SWELLのキャッシュ削除後でも同じか | 管理画面からキャッシュをクリアする |
- まず埋め込みコードが
<iframeから</iframe>まで揃っているかを確認する - コードに不備があればGoogleマップから再コピーして貼り直す
- SWELLのキャッシュをクリアしてページを再確認する
- 変更前のコードはメモ帳などに控えておくと安心
地図をよりきれいに見せるカスタマイズ方法
基本の設置が完了したら、サイトのデザインに合わせて地図の見た目を整えることもできます。CSSを少し使うだけでグッと印象が変わるため、デザインにこだわりたい方は参考にしてみてください。
白黒（モノクロ）表示にするCSSの使い方
サイトがシックなモノトーン系のデザインの場合、Googleマップのカラフルな色味がページ全体の印象と合わないと感じることがあります。CSSを使うことで、特定の地図だけをモノクロ表示に変えることができます。
まず、カスタムHTMLブロックのコードで、iframeタグを <div class="map-mono"> と </div> で囲みます。次に、WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」の入力欄に、以下のコードを貼り付けて「公開」をクリックします。
.map-mono iframe { filter: grayscale(100%); }
grayscale() の数値（%）を変えることで、モノクロの度合いを細かく調整できます。100%で完全なモノクロ、50%で半分、0%で元のカラー表示に戻ります。
枠線や角丸でデザインをまとめる
地図の周囲に枠線や角丸を加えると、ページのデザインに自然に溶け込むことがあります。iframeタグのstyle属性を直接変更する方法と、CSSで指定する方法の2つがあります。
シンプルな方法として、iframeのコードに style="border-radius: 8px; overflow: hidden;" を追加すると、地図の角を丸く表示できます。ただし、iframeの属性はブラウザやGoogleの仕様変更によって動作が変わる場合もあるため、設定後はブラウザのプレビューで必ず確認してください。
複数の地図を使い分ける場面
アクセスページに「広域マップ」と「周辺詳細マップ」の2種類を並べて表示したい場合など、複数の地図を一つのページに埋め込むこともできます。それぞれ別のカスタムHTMLブロックを追加し、同じ手順でコードを貼り付けるだけで設置できます。
複数の地図を並べる場合、縮尺が異なると読者が混乱しやすいため、各地図の役割（「最寄り駅周辺の広域図」「施設周辺の詳細図」など）がわかるよう、地図の上か下にテキストで補足を入れておくとよいでしょう。
クラス名は
map-mono でも access-map でも任意の名称でかまいません。同じページに複数の地図がある場合は、クラス名を変えて使い分けるとデザインを細かくコントロールできます。
- モノクロ化はCSSの
filter: grayscale()で実現できる - 枠線・角丸はstyle属性またはCSSで指定できる
- 複数の地図を設置する場合は各ブロックに役割の説明を添える
- 変更後は必ずプレビューで表示を確認する
まとめ
SWELLでのGoogleマップ埋め込みは、Googleマップから取得した埋め込みコードをカスタムHTMLブロックに貼り付けるだけで完了します。プラグインは不要で、手順を一度覚えれば繰り返し使える方法です。
まずはGoogleマップで表示したい場所を検索し、「共有」→「地図を埋め込む」→「HTMLをコピー」の順に進んでコードを取得し、WordPressのカスタムHTMLブロックに貼り付けてみてください。スマホ対応のためにwidthの値を「100%」に書き換えるひと手間も、合わせて行っておくと安心です。
副業ブログやWordPressサイトを運営する中で、地図の設置は意外と出番が多いスキルです。ここで紹介した手順を参考に、ぜひ自分のサイトで試してみてください。
