SWELLのGoogleマップはカスタムHTMLで埋め込むのが最適解

SWELLのサイトに、簡単でおしゃれな地図を埋め込みたい…

そう思っても、やり方が分からず手が止まっていませんか？

ご安心ください。

実は、プラグイン不要で「カスタムHTML」ブロックを使うのが一番の近道です。

この方法なら、スマホ対応やデザイン調整も自由自在になりますよ。

この記事では、マップの埋め込みで悩むあなたへ、

上記について、僕のホームページ制作経験から分かりやすく解説しています。

筆者

ぜひ参考にして、あなたのサイトに最適な地図を設置してみてくださいね！

SWELLのGoogleマップは「カスタムHTML」が正解！コピペで埋め込む3ステップ

SWELLでサイトを運営していると、店舗へのアクセス情報などでGoogleマップを埋め込みたい場面って、結構ありますよね。

でも、いざブロックを追加しようとすると

あれ、Googleマップのブロックってどれだろう？

と手が止まってしまったり…。

そんな経験をお持ちの方も少なくないかもしれません。

でも、大丈夫ですよ！

SWELLでGoogleマップを埋め込む場合、WordPressに標準で備わっている「カスタムHTML」ブロックを使うのが一番シンプルで確実なんです。

このブロックに、Googleが公式に用意している埋め込み用のコードを貼り付けるだけで、専門知識やAPIキーも不要で設置できるんですよ。

筆者

まずは基本となる3つのステップを、順番に見ていきましょう！

ステップ1：Googleマップで埋め込み用のHTMLコードを取得する

はじめに、サイトに表示したい地図の「埋め込み用コード」をGoogleマップの公式サイトから取得します。

なんだか難しく聞こえるかもしれませんが、やることはコピーするだけなので安心してくださいね。

手順は次の通りです。

筆者

実際の画面を見ていきましょう

STEP

Googleマップで検索する

まず、ブラウザでGoogleマップを開き、あなたの店舗や紹介したい場所の住所を検索して表示させます。

STEP

「共有」をクリック

次に、画面に表示される「共有」をクリックしてください。

STEP

「地図を埋め込む」をクリック

ポップアップウィンドウが開いたら、「地図を埋め込む」というタブを選びます。

STEP

「HTMLをコピー」をクリック

すると、「HTMLをコピー」という青い文字が表示されるので、ここをクリックしてコードをすべてコピーしましょう。

これで、地図の元となるデータの準備は完了です。

このコードの中に、あなたの指定した場所の地図情報がすべて入っている、というイメージですね。

ステップ2：SWELLの「カスタムHTML」ブロックにコードを貼り付ける

次に、先ほどコピーしたHTMLコードを、あなたのSWELLサイトの記事や固定ページに貼り付けていきます。

WordPressの編集画面に戻って作業を進めてください。

手順は次の通りです。

筆者

くわしく見ていきましょう

STEP

地図を埋め込みたいページを開く

地図を埋め込みたい投稿ページ、または固定ページの編集画面を開きます。

STEP

「カスタムHTML」ブロックを選ぶ

ブロックを追加する「+」ボタンを押し、検索窓に「カスタム」と入力して、「カスタムHTML」ブロックを選択し追加しましょう。

STEP

「HTML」を貼り付ける

「HTML を入力…」と表示されたブロックの中に、ステップ1でコピーしたHTMLコードをそのまま貼り付けます。

貼り付ける作業は、これだけでおしまいです。

このGoogle公式のHTMLコードを直接貼り付ける方法が、予期せぬ仕様変更などの影響を受けにくいため、最も安定的でおすすめできます。

ステップ3：プレビュー画面で地図の表示を最終確認

HTMLコードの貼り付けが完了したら、最後にきちんと表示されるかを確認しましょう。

編集画面の右上にある「新しいタブでプレビュー」ボタンをクリックして、実際の表示を確認してみてください。

どうでしょう、無事に地図は表示されたでしょうか？

たったこれだけのステップで、あなたのサイトにGoogleマップを埋め込むことができました！

もし表示サイズが大きすぎたり小さすぎたりした場合は、次のカスタマイズの項目で調整方法を解説しているので、そちらもぜひ参考にしてみてくださいね。

地図の表示をさらに良くする！簡単カスタマイズとトラブル解決法

筆者

基本的な地図の埋め込み、お疲れ様でした！

これだけでも十分ですが、せっかくならもう一歩進んで、あなたのサイトに合わせた調整をしてみませんか？

スマホで見たときに、地図が画面からはみ出てしまう…

サイト全体のデザインと、地図のカラフルな色味が合わない気がする…

こんな風に感じた方向けに、コピペでできる簡単なカスタマイズ方法と、万が一のトラブル解決法をご紹介します。

【サイズ調整】スマホでも最適表示！レスポンシブ対応の方法

埋め込んだ地図がパソコンではちょうど良くても、スマホで見ると横にはみ出してしまうことがあります。

実はこれ、Googleマップからコピーしたコードの横幅が、width="600"のように固定の数値（ピクセル）で指定されていることが原因なんです。

そのままでは地図が画面に収まりきらないこともあります。

筆者

この問題を解決するには、HTMLコードをほんの少しだけ書き換えるだけでOKです。

先ほど貼り付けたカスタムHTMLブロックの中にあるコードを見てください。
コードの中に width="600" と書かれている部分があるはずです。

この width="600" を width="100%" に書き換えてみましょう。
height（高さ）の数値も、必要に応じて変更してみてくださいね。

widthの値を「100%」に変更することで、「表示する画面（や枠）の横幅いっぱいに表示してください」という指定に変わります。

これにより、パソコンでもスマホでも、その画面サイズに合わせて地図の横幅が自動でピッタリ調整されるようになるんです。

筆者

この一手間を加えておくだけで、サイト訪問者にとっての使いやすさがグッと向上しますよ！

【デザイン】サイトの雰囲気に合う！おしゃれな白黒マップにするCSS

あなたのサイトがモノトーンを基調としたシックなデザインの場合、Googleマップのカラフルな色味が浮いてしまうこともあるかもしれません。

そんな時は、簡単な2ステップで、特定の地図だけをおしゃれな白黒（モノクロ）表示に変えることができます。

基本的な考え方は、「①HTMLで目印をつけて、②CSSで命令を出す」という、とてもシンプルなものです。

ステップ1：HTMLで、モノクロにしたい地図に「目印」をつける

まず、WordPressの編集画面で、Googleマップの埋め込みコードに「この地図はモノクロにしてね」という専用の目印（CSSクラス）をつけます。

<div class="map-monochrome"> 
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1622.3277362219192!2d139.64874809214902!3d35.58689462943479!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f50ad7011045%3A0x3206229ba2f12791!2zVXZhbmNl44Go44Gp44KN44GN44K544K_44K444Ki44OgIGJ5IEZ1aml0c3U!5e0!3m2!1sja!2sjp!4v1758876160990!5m2!1sja!2sjp" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

筆者

これで、この地図に「map-monochrome」という名前の表札がついたような状態になりました。

ステップ2：CSSで、その「目印」に「モノクロになれ」という命令を出す

次に、サイト全体の設定画面で、「map-monochrome という目印がついた地図は、モノクロで表示してください」という命令（CSSコード）を書き加えます。

STEP

カスタマイザーを開く

WordPress管理画面の左側メニュー「外観」→「カスタマイズ」をクリックします。

STEP

追加CSSをクリック

画面左にある、カスタマイザーのメニューの中から「追加CSS」をクリックしてください。（一番下の方にあります。）

STEP

CSSコードを貼り付ける

開いた入力欄に、以下のCSSコードをそのままコピーして貼り付けます。

.map-monochrome iframe { filter: grayscale(100%); }

STEP

「公開」をクリック

最後に、画面上部の「公開」ボタンをクリックして保存すれば、作業は完了です。

これで指定した地図が、白黒表示になっているはずです。

【応用】白黒の「度合い」を調整する

grayscale() のカッコの中のパーセンテージを調整することで、モノクロの度合いを自由にコントロールできますよ。

このテクニックを使えば、サイト全体の雰囲気に合わせて、地図の色合いを調和させられます。

【表示されない時】埋め込んだGoogleマップが出ない原因と対処法

手順通りにやったはずなのに、なぜか地図が表示されない…。

そんな時でも、慌てないでくださいね。

原因は意外とシンプルなことだったりします。

よくある原因と、その対処法をいくつかご紹介します。

多くの場合、これらのいずれかで解決するはずです。

筆者

一つずつ確認して、落ち着いて対処してみてくださいね。

まとめ：SWELLのGoogleマップはカスタムHTMLで簡単キレイに！

今回は、SWELLサイトへのGoogleマップの埋め込みで悩んでいる方に向けて、

上記について、僕自身のサイト制作経験を交えながらお話してきました。

SWELLでのGoogleマップ埋め込みは、WordPress標準の「カスタムHTML」ブロックを使うのが一番シンプルで確実な方法です。

プラグインを追加する必要もなく、APIキーなどの難しい設定も一切不要

この方法を覚えれば、ただ地図を表示させるだけでなく、スマホ表示への最適化や、サイトの雰囲気に合わせた白黒デザインへの変更も自由自在になります。

訪問者にとって分かりやすいだけでなく、あなたのサイトデザインにも調和した、素敵な地図を設置できるでしょう。

まずはこの記事の手順を参考に、ぜひあなたのサイトで気軽に試してみてください。

筆者

もし、それでも上手くいかなかったり、地図以外にもホームページやサイト制作のことでお困りごとがあったりしたら、いつでも気軽にご相談くださいね。