×
閉じる

    皆様からのご意見をお聞かせください

    このページに対する意見

    このページの気になる部分について
    ご意見をお聞かせください

    バズ部に対する意見

    バズ部の気になる部分について
    ご意見をお聞かせください

    このページに対する意見をお寄せください

    Q. このページについて感想やご意見があれば教えてください。
    Q. 今後増やして欲しい内容の記事があれば教えて下さい。
    Q. ご意見を頂けた方には今後特別なオファーの提供を予定しています。
    ぜひご連絡先をお知らせください。
    ※ご入力頂いた個人情報や意見が公表されることは一切ありません。安心してご記入ください。

    お名前

    メールアドレス

    プライバシーポリシー

    バズ部に対する意見をお寄せください

    Q. 私たちバズ部について感想やご意見があれば教えてください。
    Q. ご意見を頂けた方には今後特別なオファーの提供を予定しています。
    ぜひご連絡先をお知らせください。
    ※ご入力頂いた個人情報や意見が公表されることは一切ありません。安心してご記入ください。

    お名前

    メールアドレス

    プライバシーポリシー

    ご協力ありがとうございました!

    皆様からいただきましたご意見につきましては、
    今後のより良い商品開発・サービス改善に
    活かしていきたいと考えております。

    今後もお気付きの点がございましたら、お聞かせいただけますと幸いです。

    ×ウィンドウを閉じる

    WordPress にGoogleマップを埋め込む方法

    スマートフォンでGoogleマップを利用して、現地に赴くユーザーが多い。そのニーズに答えて店舗や会社の所在地に Google マップがあるとユーザーにとってはうれしい心遣いだ。

    ここでは WordPress を使って簡単に Google マップを埋め込む方法を紹介する。


    webサイトにGoogleマップを埋め込まずに、Googleマップの画像を貼り付けているだけのサイトを見ることがある。地図そのもののスクリーンショットをサイトに貼り付ける行為はGoogleマップの利用規約に違反する可能性がある。もしそのような懸念があるときは法務部門や、法律の専門家に相談してから適切に利用しよう。

    ebook
    ebook

    1.Google マップを埋め込む方法

    Google マップの埋め込みは、下記の手順でできる。

    • Google マップのコードを取得する
    • Google マップを埋め込む

    操作は簡単なので安心してほしい。

    1-1.Google マップのコードを取得する

    最初に Google マップにアクセスしよう。

    グーグルマップ

    図の赤枠部分に店舗名、オフィス名、またはビル名を入力して、検索ボタンをクリックすると検索結果が表示される。ここでは仮に虎ノ門ヒルズ森タワーでやり方を紹介する。

    検索内容の入力

    右にある「共有」をクリックしよう。

    メニューが表示されるので「地図を埋め込む」をクリックする。

    地図を埋め込む

    すると地図の埋め込み用のコードを取得する画面が表示される。

    地図を埋めこむをコピー

    左上部にある▼のプルダウンをクリックすると、埋め込む地図のサイズを4パターンから選ぶことができる。

    サイズを選択

    用意されたサイズは次の3種類だ。

    • 小:400 × 300 ピクセル
    • 中:600 × 450 ピクセル
    • 大:800 × 600 ピクセル

    自分でサイズを決めるなら「カスタムサイズ」を選ぶと良い。

    カスタムサイズをクリックすると、次の画面が表示されるので、図の通り設定しよう。

    ピクセル単位で数値を入力

    ※ ピクセル数を計測する方法
    あなたのコンテンツの縦・横サイズを基準にしてピクセル数値を入力したいなら、各ブラウザの拡張機能を使うと簡単に計測することができる。Google Chrome であれば「Page Ruler」、Firefox であれば「MeasureIt」がオススメだ。

    1-2.Google マップのコードを埋め込む

    ここでは、ブロックエディター(グーテンベルグ)でのコードの埋め込み方法を解説する。

    WordPress の管理画面にログインし、編集画面にアクセスしよう。編集画面の左上から「カスタムHTML」のブロックを選択する。

    本文に表示された「HTMLを入力」のブロックに、先ほどコピーしたコードをペーストする。

    「プレビュー」を選択してプレビューを表示させよう。


    2.クラシックエディターに埋め込む場合

    従来のクラシックエディターに埋め込む場合は、以下の通りに行う。

    WordPress の管理画面にログインして、マップを表示させたい投稿ページか固定ページの管理画面にアクセスしよう。ここでは投稿ページを使って紹介する。

    新規投稿を選択

    テキストをクリックする。

    テキストエディタに切り替え

    地図を埋め込む箇所をクリックし、コピーしたGoogle MapのHTML埋め込みコードを本文内にペーストする。

    2-2.Googleマップの表示を確認する

    地図が埋め込めたか確認をしよう。編集画面右上にあるビジュアルをクリックする。埋め込みんだGoogleMapが表示されている。

    実際の表示は管理画面からは確認できないため、プレビューで確かめよう。

    表示がされていたらGoogleマップの埋め込みが完了だ。


    3.固定ページの会社概要に埋め込む方法

    それでは実際に、Wordpressの固定ページで作成した会社概要にGoogleマップを貼り付けてみよう。

    まずはWordpressの管理メニューから「固定ページ」→「会社概要」の編集画面へ。

    Googleマップを埋め込みたいブロックで「カスタムHTML」を選択する。

    「1-1.Google マップのコードを取得する」で解説した通り、Googleアップから埋め込みたい住所のコードをコピーし、固定ページのカスタムHTMLブロックに貼り付ける。

    「プレビュー」を押すことで実際の表示と同じようにプレビューされる。

    ちなみに、投稿画面右上の「プレビュー」から「新しいタブでプレビュー」で実際の固定ページがどのように表示されるかも確認できる。

    今回は、以下のように表示できた。


    4.Googleマップを効果的に活用できるプラグインWP Google Maps

    ここで、Googleマップをより効果的に活用できるプラグインWP Google Mapsを紹介しよう。

    Googleマップをそのまま記事コンテンツや固定ページに埋め込む場合はここまでの解説通り、プラグインを導入せずに行える。WP Google Mapsを利用することで、表示されるマップをカスタマイズしたり拡張することができる。

    例えば地図上に任意でアイコンを表示させたり、地図の幅や色などデザインの調整や、座標出なく住所での検索が可能になるなど、様々な機能がある。

    注意点としては、有料版と無料版があること。無料版だと複数の地図を作ることができない。もう一つは、操作が英語で慣れるまで若干複雑である点だ。

    慣れれば使いやすいプラグインなので、無料版を試しに使ってみることをおすすめする。


    5.まとめ

    WordPressにGoogleマップを埋め込む方法をおさらいしてみよう。ブロックエディターを利用すれば簡単に表示できることがお分かりいただけたはずだ。

    ①埋め込みたい場所をGoogleマップで指定する
    ②Googleマップの「共有」から埋め込みコードをコピーする
    ③埋め込みコードを任意の箇所にペーストする
    ④プレビューでGoogleマップが埋め込めているか確認をする

    Googleマップで場所が分かるとユーザーが経路検索をするのに大変便利だ。この際に是非活用しよう。

    カテゴリー wordpressの設定方法

    記事をシェアする

    • B!

    無料eBook:バズ部式マーケティング
    広告費を1/10にして売上を倍増させる全手法

    広告に頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているけれど、よく分からないと悩んでいませんか?

    本書は弊社やクライアント様がコンテンツマーケティングに取り組み

    • ・SEOのみで月間100万PV集めた方法
    • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
    • ・CPLやCPAを大幅に改善した方法とそのからくり

    など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

    ぜひ、貴社のWEBマーケティングにもご活用ください。

    eBookをダウンロード