Youtube・GoogleMap・ストリートビューをワードプレスに埋め込む方法

youtube GoogleMap ストリートビューをワードプレスに埋め込む方法

今回は、YoutubeやGoogleMAP、ストリートビューをワードプレスに埋め込む方法説明します。
 

お店の動画を作ったのでYoutubeにアップしたんだけど、ホームページでも表示できないかしら。。他のホームページでよく見かけるけど
Youtubeをサイトに埋め込むのは意外と簡単ですよ。ここでは、下記のようにYoutube・GoogleMAP・ストリートビューの3種類を埋め込む方法をご紹介しますね。

 

■Youtubeの埋め込み例


 
■GoogleMapの埋め込み例

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

 

【メルマガ登録はこちら!!】
ワードプレスの便利な使い方情報をGET

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

 

 

「youtube」の動画をWordPressに埋め込む方法

Youtube埋め込み方法の基本

ここでは、すでにYoutubeにアップロードされた動画をワードプレスに埋め込む方法を説明していきます。
 

まず自分のサイトに埋め込みたい「youtube」の動画を探します。対象の動画の下にある「共有」ボタンを押下します。
Youtube 埋め込みたい動画を探して共有ボタンを押下する
 

「埋め込む」をクリックします。
Youtube 埋め込むを選択
 

下記のように動画の右横に「動画の埋め込み」と表示されます。動画の埋め込みコードをコピーしてください。
Youtube 埋め込みコードをコピー
 

つぎに、ワードプレスの管理画面に映ります。埋め込みたいページ編集画面(投稿または固定ページ)を開き、「ビジュアル」から「テキスト」へ切り替えて、動画を表示させたい箇所に埋め込みコードを貼り付けます。
Youtube をワードプレスの投稿画面に貼り付け(テキストエディタを選択))
 

投稿画面をビジュアルモードに変更すると動画を確認することができます。公開して完了です。
ワードプレス youtubeが表示されている(ビジュアル画面)
 

Youtube埋め込み方法 オプション設定

■動画サイズの変更
動画のサイズを自分のサイトやブログに合わせて調整することが可能です。横幅を変更する場合は、埋め込みコードのwidth=”XXX”を、高さを変更する場合は、 height=”XXX”を変えて貼り付けることで調整できます。
Youtube埋め込み widthとheight変更
 

■関連動画を非表示にする
「youtube」動画の再生が終了すると、関連動画が表示されます。埋め込みコードの中のURLの後ろに「?rel=0」を追記すれば、関連動画は表示されなくなります。(2018年10月から同じチャンネルのみの関連動画を出すように仕様変更されました。)


 

■動画を途中から再生、あるいは途中で停止する
例えば動画を30秒後から再生したい場合は、埋め込みコードの中のURLの後ろに「?start=秒数」を追記すれば、30秒後から再生されます。
Youtube埋め込み 30秒後の例

反対に、30秒後に停止したければ、埋め込みコードの中のURLの後ろに「?end=秒数」を追記すれば、30秒後に再生が止まります。

■30秒後にストップする例


 

「?start=秒数」と「?end=秒数」を使って、動画の一部分のみを再生させることも可能です。「?start=秒数&end=秒数」で動画のどの部分を再生するか指定することができます。
 

■30秒後から開始して、35秒後にストップする例


 

(注意)埋め込めない動画もある

動画のアップロード主が、埋め込みを不許可にした場合は、動画は埋め込むことができません。

最近は、著作権の問題が、大きく取り上げられるようになり「埋め込み無効」も増えてきています。「youtube」の埋め込みコードの欄に「リクエストによる埋め込み無効」と表示された場合は、動画を埋め込むことはできません。

 

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

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

まずは、Googleで埋め込みたい住所を検索します。ヒットした地図をクリックして「Googleマップ」で表示します。
住所でGoogle検索する

「共有」を選択します。
Googleマップ 共有をクリック
 

「共有」方法を選択するボックスが表示されます。「地図を埋め込む」を選択します。
Googleマップ 地図を埋め込むを選択
 

地図の「埋め込み」コードのコピーします。
Googleマップ 埋め込みコードをコピー
((※)地図をズームインしたり、ズームアウトする場合は、[CTRL]キーを押しながら、マウスホイールで調整することができます。)
 

「この地図は自分専用です」のメッセージが表示されていますが、地図を埋め込んでも他の人から見えないんでしょうか??
結論から言うと、他の人にも地図は見えます。無視して構いません。

 

「この地図は自分専用です」と表示されていると、他に人は地図が見えないのかと不安に思うかもしれませんが、基本的に問題ありません。このメッセージは「地図は埋め込めるけども、ログインしているアカウントがカスタマイズした情報、たとえば、★マークでお気に入り登録した場所のことなどは表示されません」という意味になります。
GoogleMap お気に入りなどの設定はログインアカウントごとの設定で埋め込むことはできない(自分専用)
 

(補足)地図のサイズ

地図のサイズを選択あなたのサイトやブログに合うように、地図のサイズを調整することができます。
「小」「中」「大」「カスタムサイズ」から選択します。サイズはそれぞれ以下のとおりです。

  • 「小」横400px 縦300px
  • 「中」横600px 縦450px
  • 「大」横800px 縦600px
  • 「カスタムサイズ」大きさを入力

 

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

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

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

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

まずはGoogleマップの時と同様の手順で、住所でGoogle検索してGoogleマップを表示して下さい。
住所でGoogle検索する
 

左下部に写真が表示されていますのでその画像をクリックしても埋め込むことができます。
Googleマップ 左下の写真を選択
 

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

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

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

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

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

 

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

「地図を埋め込む」の表示の下に、「中」という表示と「埋め込みコード」が表示されます。「中」の横の下向きの▼をクリックすると「小」「中」「大」「カスタムサイズ」が表示されます。これは、「ストリートビュー」の大きさです。

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

 

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

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

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

いかがでしたでしょうか。今回は「Youtube」「Googleマップ」「Googleストリートビュー」をワードプレスに貼り付ける方法をご紹介しました。
 

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

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

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

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

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

 

 

PICK UP みんなの仕事インタビュー

WEBST8では、サロン・整骨院・整体・農業・ピアノ・ネイル・ライター・デザイナー・ネイル・美術品・不動産・士業などなど、個人でビジネスを持ち仕事をされている方がたくさんおられます。

ユニークで面白い仕事をされている方も多いので、実際に独立・起業・仕事 Web活用について実体験をインタビューいたしました。

インタビュー一覧

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を! /

詳しくはこちら

ABOUTこの記事をかいた人

松本慶

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ