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

WordPress

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

投稿日:2019年2月25日 更新日:

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

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

 

■Youtubeの埋め込み例


 
■GoogleMapの埋め込み例

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

 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
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サービスも似たようた手順で埋め込みコード取得して自分のサイトに貼り付けることができます。
 

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

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


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

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

詳細はこちら


 


 

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

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

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

-WordPress
-

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.