WordPress

【プラグイン不要】ブログ記事に Google Map を埋め込む方法@WordPress


ブログに地図を!Google MAP

WordPress で書いている記事に Google Map の地図を埋め込むのは、Google が用意している埋め込み用の URL を張り付けるだけ で簡単です!

実際に地図を埋め込む方法を紹介します。

Google Map の埋め込み例

「凱旋門」の地図を埋め込んでみます。

パリの地図を見ると楽しくなりすぎて、もろもろ止まらなくなるので危険ですね。

Google Map を埋め込む方法

プラグインを使う方法もありますが、あまりプラグイン漬けになっても、WordPress が「わけわかめ」になりますので、直接貼る方法です。

(直接貼る方法が圧倒的に簡単です)

■ Step.1 Google Map で埋め込みたいページを表示する

パリ凱旋門の地図

左上の小窓に「住所」、または、「ランドマーク」、または「店名」などを入力して虫眼鏡で検索して目的の場所を見つけます。

■ Step.2 埋め込みコードを取得する

地図の埋め込み方

画面左上のメニュー(横三本線のアイコン)をクリックします。メニューが現れますので「地図を共有または埋め込む」をクリックします。

埋め込む操作

「地図を埋め込む」 をクリックします。

HTMLをコピーする

左上のプルダウンでサイズを選び、「HTMLをコピー」 表記をクリックします。

これで、クリップボードに、埋め込み用のコードをコピーします。

■ Step.3 WordPress の任意の場所に貼り付ける

HTMLコードを取得する

ブロックを 「カスタム HTML」 で指定し、先ほどの 貼り付け用コード を貼り付けて完成です!

枠線(ボーダー)をつける方法

そのまま URL を張り付けた場合は、地図の周りに枠線(ボーダー)が表示されません。

ボーダーを表示したい場合は、HTML の style="border:0;"style="border:1px solid;" に書き換えます。

■ 枠線を付ける場合の書き換え例

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d5248.3655650304645!2d2.295027!3d48.873792!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd9b5676e112e643d!2z44Ko44OI44Ov44O844Or5Yex5peL6ZaA!5e0!3m2!1sja!2sjp!4v1626103657709!5m2!1sja!2sjp" width="800" height="600" style="border:1px solid;" allowfullscreen="" loading="lazy"></iframe>

一か所書き換えるだけで枠線を付けることができて簡単です。

まとめ

Google Map の地図をサイトに埋め込む方法です。

  • Google Map から HTML を取得する
  • HTML をサイトに埋め込む

めっちゃ簡単ですね。

Enjoy!「あんなとこへの行き」方や、「こんなとこへの行き方」をバンバン紹介できますね!

もっと WordPress のノウハウを知りたいときは

WordPress の情報、テクニック一覧はこちらをクリック!

クリックアイコン

WordPress のおすすめテーマ

  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる

本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。

AFFINGER の紹介はこちら

AFFINGER アフィンガーテーマを解説・メリット・デメリット

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る




ブログランキング・にほんブログ村へ  


Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。