MENU
★★★ キャンペーン期間中、新規に『エックスサーバー』を申し込みすると、12ヶ月以上の契約で、初回のご利用料金が最大30%オフ!! 2026年5月7日(木)17:00まで! ・・・★★★☆彡

SWELLにGoogleマップを埋め込む方法|お城の「案内板」をスマホ対応で美しく

当ページのリンクには広告が含まれています。
メチャじじ

みんなに、おすすめの場所を教えたいのじゃ・・。よく記事の中に、動かせる地図があるけど、ワシにもできるかな・・?

チョイじじ

地図を入れるのって、難しいプログラムが必要な気がして怖いな……。

お城(ブログ)で素敵なお店や思い出の場所を紹介するとき。読者さんが一番知りたいのは、「そこがどこにあって、どうやって行くか」という道しるべです。

言葉で説明するのもいいけれど、指先一つで動かせる「Googleマップ」がそこにあれば、読者さんの旅はもっと快適で、楽しいものになりますよね!

「コードを貼るなんて難しそう」と感じるかもしれません。でも、SWELLという魔法のお城なら、コピーした「案内図の欠片」を、指定の箱(カスタムHTML)にそっと置くだけで完成します。

不器用な僕たちは、ついつい「自分にはハードルが高い」と諦めてしまいがちですが、大切なのは技術ではなく、読者さんを「迷わせたくない」という主(あるじ)の優しさ・・。

この記事では、パソコンでもスマホでも美しく表示される、Googleマップの「正しい貼り方」をおもてなしの心と共に紐解いていきますね!

🚩 この記事で一緒に解決すること…
  • 案内図の欠片を拾う: Googleマップから「埋め込みコード」を正しくコピーする方法。
  • お城の壁に貼る: SWELLの「カスタムHTML」を使って、一瞬で地図を表示させる手順。
  • 魔法の一手間: スマホで見ても画面からはみ出さない、優しいサイズ調整のコツ。

👉 ひとつだけでも受け取ってもらえれば、うれしく思います!

地図を埋め込むのは、「お城の玄関先に、親切な案内人を立たせる」ようなものです。

不器用な僕たちは、英語や数字の並んだコードを見ると「魔法の呪文」のように感じて身構えてしまいます。でも、それは単なる「住所のバトン」。あなたがコピーして、お城の決まった場所に渡してあげるだけで、あとはSWELLとGoogleが勝手に案内を始めてくれます。

主(あるじ)であるあなたが、読者さんの歩幅に合わせて地図を整える。その「ひと手間」が、訪れる人にとっての大きな安心感に繋がるんですよ。

🌱 まだ、自分のお城をもっていない方へ!

もし、この記事を読んでいるあなたが、「まだ自分のお城(ブログ)を持っていないけれど、書く準備だけはしておきたい!」という段階なら、まずはそのワクワクした気持ちを形にしてみませんか?

🚀 【最短ルート】今すぐ始めたい方は、コチラ!

【 重要 】

手順を調べる時間は最小限に…、WordPressを最短10分でブログを開通させたい方は、こちらの「最短・画像付きマニュアル」から読み進めてみてくださいね!

👉〔【2026】WordPressを始める手順|シニアが最短でゼロから公開までの全ステップ

シニアでも失敗なく、誰でもできるやり方を解説していますよ! それは、新しい世界を知るための切符です…。

さあ、僕と一緒に、あなたの「自分のお城」の基礎工事を始めましょう!

目次

Googleマップをブログに埋め込むメリット

お城(ブログ)の記事にGoogleマップを埋め込むことは、単に「場所を教える」以上の大きな価値を読者さんにもたらします。

動かせる地図がそこにあるだけで、読者さんは自分の現在地と目的地をパッと結びつけることができ、お城への信頼感もグッと高まります。さらに、お城の滞在時間が延びることで、検索エンジンからも「親切なお城だな」と評価される(SEO効果)という嬉しい副産物もあるんですよ。

1、アクセス情報を視覚的に伝えられる

文章や画像だけでは伝えづらい場所の情報を、地図で直感的に示せます。具体的な住所に加えて地図を載せることで、読者が目的地を簡単に理解でき、訪問時の不安を軽減します。特に店舗紹介やイベント案内の記事に効果的です。

「Googleマップって、プロしか埋め込みすることができないのかな?」って、思っているところ…。

2、記事の信頼性や魅力をアップできる

Googleマップを埋め込むことで、記事に具体性が加わり、信頼性が向上します。また、地図があるだけで記事が視覚的に引き締まり、読者の目を引く効果もあります。地図が動的な要素として加わることで、記事全体が「動き」のあるものになり、魅力を高めます。

3、読者体験を向上させる

読者がそのままマップを操作して、経路検索や周辺情報を調べられるため、利便性が格段に向上します。特に旅行記や観光地案内では、マップを埋め込むことで、訪問予定者が記事を参考にしやすくなります。地図をクリックするだけでさらに詳細な情報を得られる点も便利です。

💡ひろおじの “寄り添い” アドバイス

つい「住所を書いておけば十分かな」と効率を優先してしまいがち・・。

でも、地図という「動く案内人」を配置することは、読者さんの手間を一つ肩代わりしてあげる行為です。

読者さんの「迷いたくない」という小さな願いに先回りして応える。その積み重ねが、お城をより居心地の良い場所に変えていく一番の近道なんですよ。

SWELLブログにGoogleマップを埋め込む方法

さて、いよいよ実際にお城の壁に案内板(地図)を設置していきましょう。SWELLという魔法のお城なら、難しい工事はいりません。

Googleマップから「コード」という案内図の欠片を預かってきて、SWELL専用の「カスタムHTML」という箱に収めるだけ。さらに、スマホで見たときに地図がはみ出さないよう、横幅を「100%」に整える魔法の一手間を加えることで、どんな読者さんにも優しい、完璧な案内図が完成します。一歩ずつ、丁寧に組み立てていきましょう。

SWELLにGoogleマップを埋め込む方法を説明する人

今日は試しに、京都の金閣寺のGoogleマップを埋め込んでみます。

早速、SWELLにGoogleマップを埋め込んでみよう!

STEP
Googleマップで検索
  • Googleマップへ移動します
  • 今回は金閣寺を載せますので金閣寺を検索します。
  • 適切に表示されましたら「共有」をクリックします。
金閣寺のGoogleマップ
STEP
地図を埋め込むを選択します。
地図を埋め込む
STEP
HTMLをコピーします
  • 左の大・中・小・カスタムサイズから希望のものを選びます.
  • 「HTMLをコピー」をクリックしてコピーします。
HTMLをコピー
STEP
カスタムHTML選びます
  • ブロック追加ボタンからSWELLからカスタムHTMLを選択します
カスタムHTMLを選択
STEP
GoogleマップのHTMLをペーストします
  • 先ほどGoogleマップでコピーしたHTMLをペーストします。
HTMLをペースト
STEP
表示させてみます。
  • これを表示させてみると、SWELLのサイトに設定したGoogleマップが表示されるようになります。

🚩 ひろおじ編集室の「ここだけの話」

コードの中の数字を書き換える時に少しドキドキしてしまいますよね。

でも、この「100%」という設定は、お城のデザインを崩すものではなく、読者さんのスマホの画面に「ぴったり寄り添う」ための優しさのサイズです。

その一手間を惜しまないことで、お城は「ただのブログ」から「本当に頼れるガイド」へと進化するんですよ。

正確な地図は、読者さんを導く「最高のおもてなし」

ひろおじ

お疲れ様でした!あなたのお城に、正確で使いやすいGoogleマップの案内板を設置することはできましたでしょうか。

最初は「コード」という言葉に少し身構えてしまったかもしれませんが、手順を追えば、不器用な僕たちでも驚くほど簡単におしゃれな地図を飾ることができます。

今回のおもてなしポイントをおさらいしましょう。

  • 信頼を築く: 地図があることで、情報の正確さと安心感が伝わる。
  • 専用の箱を使う: SWELLの「カスタムHTMLブロック」に正しく貼り付ける。
  • 優しさのサイズ: 横幅を「100%」に書き換えて、スマホ読者さんを笑顔にする。

文字だけでは伝えきれない「場所の魅力」も、地図という案内人がいれば、読者さんにダイレクトに届けることができます。

やっぱり地図があることで、「情報の正確さと安心感が伝わるな~」と感じているところ…。

🌅 ひろおじの「お茶の間、最後の一息」

最後まで読んでくださり、本当にありがとうございます…😄。

地図を載せることは、単なる機能の追加ではありません。「迷わずに来てね」「ここは本当におすすめだよ」という、あなたの温かいメッセージを形にすることです。

50代・60代、シニア世代は一歩ずつしか進めませんが、その分、読者さんの「困った」に誰よりも敏感になれます。

あなたが立てたその案内板を頼りに、今日もお城に新しい読者さんが訪れます。笑顔で「いらっしゃい」と迎えられる準備、もうバッチリ整いましたね。

🏁 まだお城を建てる前の方が人生の第2幕をスタートするには?

さて、「SWELLにGoogleマップを埋め込む方法」が理解できたところで、あなたには、それを形にする『お城(ブログ)の準備』はできていますか?

ひろおじ

不器用な僕でも、手順通りに進めたら自分だけのお城が建ちましたよ! 失敗のない「人生の第2幕」、ここから一緒にスタートしてみませんか?

📌 マニュアルは、コチラ!

🚀 【最短ルート】不器用さん専用!迷子にならないお城の建て方

【 重要 】

👉〔【2026】WordPressを始める手順|シニアが最短でゼロから公開までの全ステップ

難しい専門用語は全部横に置いておきましょう。僕が隣で一緒に歩くから大丈夫。ルンルン気分で、自分だけの居場所を完成させてくださいね!

SWELLにGoogleマップを埋め込む方法|お城の「案内板」をスマホ対応で美しくでよくある Q&A

地図が表示されず、コードがそのまま文字で出てしまう……。

それは「普通のブロック」に貼っているサインです。魔法の箱「カスタムHTMLブロック」に入れ直してあげてくださいね。

地図の高さ(縦の長さ)も変えられる?

はい!コードの中の height=”450″ の数字を大きくすれば縦長に、小さくすれば細長い地図になりますよ。

埋め込むのは無料? 何か制限はあるの?

基本的には無料で、お城(ブログ)に貼る分には心配いりません。どんどん素敵な場所を紹介しましょう。

航空写真に切り替えた状態で埋め込める?

はい!Googleマップ上で航空写真にしてから「HTMLをコピー」すれば、そのままの景色をお城に運べます。

特定の地点じゃなく「経路」を出したいときは?

共有メニューの中に「ルートを共有」がありますが、埋め込みの場合は「特定の場所」を指定するのが一番読者さんに親切です。

SWELLの「フルワイドブロック」の中で使っても大丈夫?

もちろんです!画面いっぱいに広がる地図は、高級感が出てとてもおしゃれな案内になります。

住所を隠して、特定のマークだけ出したい……。

Googleマップ上でピンを立てた場所がそのまま表示されます。プライバシーに関わる場所は、少し離れた目印を指定する配慮も大切ですね。

古い記事の地図が動かなくなった!

お店が閉まったり名前が変わったりすると、リンクが切れることがあります。たまに「お城の掃除(リライト)」ついでに地図を貼り直してあげましょう。

地図の上に文字を重ねることはできる?

SWELLの「リッチカラム」などと組み合わせれば可能ですが、不器用な僕たちはシンプルに「地図の上に文章を書く」だけで十分伝わりますよ。

スマホで地図を触ると、画面がスクロールしにくくなる……。

地図が大きすぎると指が地図に吸い付いてしまいます。地図の前後にある程度の文章(余白)を置くのが、主(あるじ)の賢い工夫です。

🗺️ 「アフィリエイトっては怪しくない…?

「アフィリエイトって、なんだか怪しいイメージがある…」

そんな不安を感じたことはありませんか?

ブログを始めていざ収益化を考えたとき、「本当に安心して続けられるのかな」と立ち止まるのは自然なことです。ネット上にはネガティブな情報も多く、戸惑ってしまいますよね。

確かに、一部には誤ったやり方もあります。ですが、それは仕組みの問題ではなく、“使い方”の問題です。

本来のアフィリエイトは、役立つ情報を届けた結果として感謝の形が返ってくる、とてもシンプルで健全なものです。

この記事では、「怪しい」と言われる理由を分かりやすく整理しながら、安心して続けるための考え方をお伝えします。

読み終える頃には、自分の発信に自信を持てるようになっているはずですよ。✨

また「SWELLにGoogleマップを埋め込む方法|お城の「案内板」をスマホ対応で美しく」が読み終わりましたら、次は、「リライト中は「非公開」にするべき?公開したまま「お掃除」して良い理由」を確認してみましょう。

詳しい内容は下記の記事で紹介しているので、あわせて読んでみてくださいね!

よかったらシェアしてね!
目次