アドベントカレンダー参加中！
この記事は「Vektor WordPress Solution Advent Calendar 2025」の12月4日の記事になります。
WordPressとVK Blocksのブロックを使ってちょっと変わったものを作ってみたい方へ向けて書いています。
こんにちは、スタッフの松田です。
昨日は、スタッフの久納さんによる「VK Dynamic If Block の痒い所に手が届く使い方紹介」でした。
ブロックテーマで「このページだけデザインを変えたい」をノーコードで叶える、VK Dynamic If Block の実践テクをまとめた記事になっております。トップページ専用ヘッダー、ページごとの余白・CTA の出し分け、NEW マーク表示など、案件でよくある微調整を一通りカバーしていますのでぜひご覧になってください！
本日は、Googleマップなどの iframe を扱うときに便利な「ビジュアル埋め込みブロック」を紹介していきたいと思います。このブロックは無料で使えます。
Googleマップを埋め込むとき、WordPress で「カスタムHTML」ブロックを追加を使って、コードが表示されている状態で埋め込むことが多いのではないでしょうか？
ビジュアル埋め込みブロックを使うと、このあたりの
- HTMLタグを直接さわる部分
- 幅・高さ・全幅などの見た目の調整
を、設定画面上でできるようになります。
この記事では、Googleマップをアクセスページなどに埋め込みたいケースに絞って、
●
●
●
●
●
●
●
●
●
●
●
●
- どうやって使うか
- どこがラクになるのか
を簡単にまとめます！
Googleマップ埋め込みの「width=600 問題」の処理が地味に面倒
GoogleマップをWordPressサイトに埋め込む時、だいたいこういう流れになると思います。
GoogleマップをWordPressサイトに埋め込む流れ
- Googleマップ側で
「地図を共有」 → 「地図を埋め込む」 →<iframe ...>コードをコピー - WordPress の編集画面で「カスタムHTML」ブロックを追加
- そこに
<iframe>をペースト width="600"とかheight="450"みたいな数字を見て、「これ 100% にしたいんだけどな……」と一度考える
HTML に抵抗がない人なら、
width="100%"に変えるheightを 400 にしたり 350 にしたり、数字を調整する
という対応をすると思います。
ただ、実際の運用では
- クライアントさんにも触ってほしい
- 将来「地図差し替えくらいは、自分たちでやりたい」という想定がある
ことも多く、「HTMLタグの数字を書き換えてください」とお願いするのは少しハードルがあるかと思います。
そこで使えるのがビジュアル埋め込みブロックなのです！
ビジュアル埋め込みブロックならGoogleマップは3ステップで終わる
ビジュアル埋め込みブロックは、iframe を貼るタイプの埋め込みを、「ビジュアル表示＋UIでサイズ調整」できるようにしたブロックのイメージです。
Googleマップの場合、やることはほぼこれだけです。
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- ブロックの追加で「ビジュアル埋め込み」を選ぶ
- 右側の設定パネルにある「埋め込みコード」欄に、Googleマップの
<iframe ...></iframe>をそのまま貼る - 編集画面の中に、実際の地図がそのままプレビュー表示される
WordPress 標準の「カスタムHTML」ブロックだと、編集時はコードの塊になってしまいますが、
ビジュアル埋め込みブロックは最初から「地図の見た目」で置かれるので、コードを意識しなくても「ここに地図が入っている」とすぐ分かるというのがまずひとつ大きいです。
ビジュアル埋め込みブロックをGoogleマップに使うおすすめポイント3選
ポイント1
HTMLタグを触らず「幅 100％」にできる
ビジュアル埋め込みブロックには、右サイドバーに「iframeの幅」「iframeの高さ」を入力できる項目があります。
ここに数値を入れると、「ブロックの見た目」と「iframe の width / height」両方が連動して反映されるので、HTMLを直接いじる必要がありません。
たとえば以下のように入力するだけで、
- 幅 →
100% - 高さ →
400
このようなGoogleマップが出来上がります。
ポイント2
ワンクリックで「全幅」にできる
もうひとつ便利なのが、横幅のモード切り替えです。
ビジュアル埋め込みブロックのツールバーには、
- 通常
- 幅広
- 全幅
- 左寄せ
- 右寄せ
- 中央寄せ
といった切り替えボタンがあります。
Googleマップを使用する際、PCでは画面いっぱいに広げてスマホではコンテンツ幅に合わせて縮んでほしいといったことがよくありますが、
- ブロックを「全幅」にする
- 幅を
100%にする
という組み合わせで、かなに「それっぽい」表示になってくれます。
HTML側で style を書き足したりしなくていいので、
「全幅で見せたいけど、コードでやりたくない」というときにちょうどいいです。
ポイント3
編集画面で「ちゃんと地図のまま」なので引き継ぎやすい
- カスタムHTMLブロックに iframe が1個入っている状態
- ビジュアル埋め込みブロックで、地図がそのまま見えている状態
を並べて見ると、
「別の人に引き継ぐことを考えるなら、後者のほうが説明しやすい」と感じます。
とくに、
- 制作時は制作者が触る
- 公開後は、クライアントさんや別チームの人が更新を担当する
というサイトでは、「コードに触らなくても、なんとなく使い方が想像できるブロック」で作っておくことが、あとから効いてきます。
ビジュアル埋め込みブロックなら、見た目は地図そのもので、調整はサイドバーの数値入力とツールバーの幅指定という構造で分かりやすいので、「ここに入っている地図は、場所が変わったらこのコードを差し替えてください」と伝えるだけで、運用のイメージを共有しやすいです。
こういうページで使うといい感じです
ビジュアル埋め込みブロックをよく使うのは、たとえばこんなページです。
- 会社概要・アクセスページの Googleマップ → コピペできるパターンはこちら
- 店舗・教室・サロンなどの所在地紹介ページ → コピペできるパターンはこちら(プレミアムパターン)
- イベント LP の「会場アクセス」セクション → コピペできるパターンはこちら(プレミアムパターン)
どれも、文章や写真がメインだけどアクセス情報として地図もきちんと載せたいという、サブ要素だけど重要な情報があるところで使われます。
ここをビジュアル埋め込みブロックで
- 幅は100％
- 必要に応じて全幅表示
- 高さだけ軽く調整
という形にしておくだけでも、見た目と運用の両方がすっきりします。
まとめ
Googleマップや Googleカレンダー、Googleフォーム、YouTube など、iframe で埋め込むタイプのものは、どうしても「コード」がセットでついてきます。
VK Blocks のビジュアル埋め込みブロックを使うと、その部分を
●
●
●
●
●
●
●
●
●
●
●
●
●
●
- 編集画面で中身を見ながら
- 幅や高さはUIで調整して
- 必要なら全幅・幅広にもワンクリックで切り替えて
扱えるようになります。
もしまだ一度も使っていなければ、まずはアクセスページのGoogleマップだけでも、ビジュアル埋め込みブロックで置いてみてください。
HTMLタグを開かなくても調整できる感じが、「このブロックもっと使ってほしいな」と思う理由のひとつです。
アドベントカレンダーへのご参加をお待ちしております！
明日は、津島さんによる「モバイル固定ナビをX-T9のサイトに実装する手順」です。
Lightning(+ Lightning G3 Pro Unit)にある機能をどのようにX-T9のサイトに実装するかが楽しみです。
みなさまのご参加を心よりお待ちしております！
この記事を書いた人
最近の投稿
を購入して
特典をゲットしよう！
特典A
X-T9 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
特典B
Lightning ビジネス（Evergreen）
9,900円 (税込)
0円に！
特典C
Lightning 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
今なら！
Vektor Passport の
有効期間中、上記の
デモサイトデータを
何度でも素早くまるごと
インポートできます！
爆速!!１分でデモサイトと同じ
ホームページができる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。