【WordPress】Googleストリートビュー をワードプレスに埋め込む方法

WordPress

【WordPress】Googleストリートビューを埋め込み・表示する方法

今回は、WordPress(ワードプレス)にGoogleのストリートビューを埋め込んで表示させる方法をご説明します。
 

■ストリートビューの埋め込み例

 

お店の外観をGoogleのストリートビュー表示でホームページにしたいんですけど、どうしたらよいでしょうか??

ストリートビューの埋め込み機能を使って、簡単に地図を表示することができますよ。ここでは、ワードプレスにマップを埋め込む方法を説明していきますね。

 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト


 


 

WordPressにGoogleストリートビューを埋め込む方法

ここでは、Googleストリートビューをワードプレスに埋め込む方法を説明していきます。
 

【STEP1】埋め込みたいストリートビューを検索して表示する

まずは、Googleで埋め込みたい住所を検索します(ここでは「大阪府大阪市西区南堀江2-5-1」で検索しました)。ヒットした地図をクリックして「Googleマップ」を表示します。
住所でGoogle検索する
 

Bingやyahooではなく、Googleで検索します。

 

下記のように、地図右下の人形をドラッグ&ドロップで運んでストリートビューを表示することができます。


 

サイトに埋め込みたい「ストリートビュー」を表示させ、写真の左上部の黒いボックスの中の・が縦に3つ並んだボタンをクリックします。
ストリートビュー :を選択する
 

「印刷」「問題の報告」「画像を共有または埋め込む」の中から「画像を共有または埋め込む」をクリックします。
ストリートビュー 画像を共有または埋め込むを選択
 

「共有」という白いボックスが表示されます。「共有」の文字の下に「リンクを送信する」「地図を埋め込む」の表示がありますので、「地図を埋め込む」をクリックします。
ストリートビュー 地図を埋め込むを選択
 

「埋め込みコード」をコピーします。
ストリートビュー 埋め込みコードをコピー
 

(補足)ストリートビューの大きさを設定する

「地図を埋め込む」の表示の下に、「中」という表示と「埋め込みコード」が表示されます。
Googleストリートビュー サイズ選択
 

「中」の横の下向きの▼をクリックすると「小」「中」「大」「カスタムサイズ」が表示されます。これは、「ストリートビュー」の大きさです。

  • 小は、widthが400、heightが300です。
  • 中は、widthが600、heightが450です。
  • 大は、widthが800、heightが600です。
  • カスタムは、width、heightとも任意のサイズを入力する事が可能です。

 

【STEP2】WordPress側でコピーした埋め込みコードを貼り付ける

次に、WordPress側でコピーしたストリートビューの埋め込みコードを貼り付けていきます。
 

WordPress側で固定ページまたは投稿ページの編集画面を表示します。「+」リンクを押してブロックを追加します。
WordPress 固定ページ編集画面 + のブロック追加をクリック
 

ブロックエディター >カスタムHTMLを選択します。
ブロックエディター >カスタムHTML
 

コピーした地図の埋め込みコードを貼り付けます。
Google ストリートビューのコードを貼り付け
 

右上の「プレビュー」ボタンを押下します。
プレビューボタンを押下
 

ストリートビューが表示されたことを確認します。
ストリートビューが表示されていることを確認
 

合わせて読みたい記事

なお、WordPressのブロックエディター の使い方を詳しく勉強したい方は「【2020年版】WordPressブロックエディターの使い方を徹底解説」を合わせてご参照ください。

 
 

(※)従来のクラシックエディター版での埋め込み方法

従来のクラシックエディターを利用している方は、下記の操作方法でGoogleMapを埋め込むことができます。
 

 

【STEP1】地図の埋め込みコードをコピーするところまでは同じですので、予め地図の埋め込みコードをコピーしておいてください。

 

ワードプレス記事編集画面で「ビジュアル」から「テキスト」に切り替えて、Googleマップの埋め込みコードを貼り付けます。
次にワードプレスの管理画面でストリートビューを埋め込んで行きます。ワードプレス記事編集画面でテキストモードに切り替えてGoogleストリートビューの埋め込みコードを貼り付けます。
ストリートビューの埋め込みコードをワードプレスの編集画面のテキストモードで貼り付ける
 

投稿画面をビジュアルモードに変更すると「ストリートビュー」を確認することができます。記事を公開して完了です。
ワードプレスの編集画面。ビジュアルモード。記事を公開して完了
 
 

まとめ 埋め込みを活用して動きのあるページを作ろう

いかがでしたでしょうか。今回は、WordPress(ワードプレス)にGoogleのストリートビューを埋め込んで表示させる方法をご説明しました。
 

比較的簡単な操作ですが、外部のサービスを自分のホームページやブログ内に取り込むことで動きのあるページを作ることができます。
 

ここでは割愛しますが、ストリートビューの他にも、YoutubeやGoogle Map、Twitterや他のWebサービスも似たようた手順で埋め込みコード取得して自分のサイトに貼り付けることができます。
 

合わせて読みたい記事

今回は、ストリートビューを埋め込み表示する方法をご紹介しましたが、下記にYoutubeやGoogleMapの埋め込み表示方法に関する手順も説明しています。ご興味ある方は合わせてご参照ください。
 
【2020年版】WordPressにYoutube動画を埋め込む方法

【WordPress】GoogleMap(グーグル マップ)を埋め込む方法

 

便利な機能ですのでぜひ活用してみてください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

WordPressの使い方についてはこちらの記事がおすすめ

●WordPressのブロックエディターの使い方を詳しく勉強したい方は「【2020年版】WordPressブロックエディターの使い方を徹底解説」を合わせてご参照ください。

●WordPressの使い方全般をしっかり勉強したい方は「【2020年版WordPress(ワードプレス)の使い方総まとめ】」をご参照ください。

 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 


 

検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-,

© 2020 WEBST8のブログ Powered by AFFINGER5