【超簡単】WordPress(ワードプレス)でストリートビューを埋め込む方法 WordPress Twitter Facebook LINE コピー 2020.05.26 2020.05.24 サイトでお店や施設などGoogleマップで場所をユーザーに紹介する場面などがあると思いますがマップだけでは詳細や雰囲気などがわかりません。そんな時にGoogleのストリートビューが活躍します。ストリートビューの埋め込み方はものすごく簡単なのでよかったらサイトで利用してみてください。 目次 Googleマップで目的地を検索するWordPress(ワードプレス)に貼り付けるコード(HTML)を取得する画面左上の「画面を共有または埋め込む」をクリックします。「地図を埋め込む」をクリック「HTMLをコピー」をクリックWordPressにコードを埋め込むカスタムHTMLで登録コードを貼り付けるまとめ Googleマップで目的地を検索する まず初めにGoogleマップを開き目的地を検索してください。そうすると下の画面になり検索した目的地のピンが中央にあり、画面右下に人型のアイコンがでてきます。この人型のアイコンを目的地までドラッグしてください。※どこでもこのアイコンを設置できるわけではありません。施設などにドラッグできない場合は近くの道などにドラッグしてみてください。また施設にドラッグすると施設内のストリートビューになる可能性があるので外観を観たい方は施設外にドラッグしてください。 WordPress(ワードプレス)に貼り付けるコード(HTML)を取得する 次の手順としてストリートビューからWordPress(ワードプレス)に埋め込むコードを取得します。以下がその手順となります。 画面左上の「画面を共有または埋め込む」をクリックします。 「地図を埋め込む」をクリック 中央にポップアップが表示されるので「地図を埋め込む」をクリックする。 「HTMLをコピー」をクリック 最後に以下の画面になるので「HTMLをコピー」をクリックするとWordPress(ワードプレス)で利用する埋め込みコードの取得ができます。 WordPressにコードを埋め込む あとはWordPress(ワードプレス)にコードを埋め込むだけです。埋め込み手順は以下です。 カスタムHTMLで登録 まずはカスタムHTMLで埋め込むのでブロックから「カスタムHTML」を選択してください。 コードを貼り付ける 次は先ほどストリートビューから取得したコードを貼り付けてください。この時に注意点ですが以下の画像の赤枠にある「width=”600″」ですがここまま貼り付けてしまうとモバイルで画面を表示すると画像がはみ出てしまいいます。対処としてこの600を100%に変更してください。 まとめ 以上がWordPress(ワードプレス)にストリートビューを埋め込む方法となります。結果が以下になります。(東京タワー) お店の紹介をする際に店内をストリートビューに登録しているお店もあるのでお店、道、施設など詳細を伝えたい人は是非利用しみてください。