- WordPressに埋め込まれたYouTube動画
- 最も簡単にYouTube動画を埋め込む方法
- ショートコードでYouTube動画のサイズを調整
- JetpackのショートコードでYouTube動画を埋め込み
- 埋め込みYouTube動画をレスポンシブ対応にする
- YouTubeの埋め込みコードを利用する
- まとめ
WordPressに埋め込まれたYoutube動画
あなたもできる！
WordPressの記事へのYouTube動画の埋め込み、あなたも一度位は見た事あるかと思います。
一体どうやって動画を埋め込んでいるのだろうと、気になっている方も少なくないでしょう。
今回は、WordPressの記事にYouTube動画を埋め込む方法についてご紹介したいと思います。
と言っても、方法は一つだけではありません。
呆れるほど簡単な方法からとても難しい方法までありますが、今回は、比較的簡単な方法をいくつかご紹介したいと思います。
それぞれWordPressの環境によって使える方法と使えない方法とがあります。
あなたの環境に合った方法を覚えて、ぜひ、実践してみて下さい。
最も簡単にYouTube動画を埋め込む方法
WordPressの記事にURLを貼り付ける
まずは、拍子抜けするほど、最も簡単な方法をご紹介しましょう。
と、その前に、練習に使う為のYouTube動画を準備して下さい。
もしなければ、この動画を使って下さい。
YouTube動画のページを開きます。
そして、ページのURLをコピーして下さい。
次は、WordPressにログインをします。
「ツールバー」の「新規追加」をクリックします。
「新規投稿を追加」ページが表示されます。
エディタが「テキストエディタモード」になっている事を確認して下さい。
タイトルを記入後、記事本文に先ほどコピーしたYouTube動画のURLを貼り付けて下さい。
「公開」をクリックします。
記事が公開されたら、「投稿を表示する」をクリックしてみて下さい。
記事の中に動画が表示されました。
URLを貼り付ける方法の欠点
記事に埋め込まれたYouTube動画の横幅は500pxですが、私が使っているWordPressテーマの記事部分の横幅は500pxありませんので、入りきらない部分が欠けてしまいました。
これがスマートフォンやモバイルからのアクセス画面だった場合、もっと動画が欠けてしまうでしょう。
これが、この方法の欠点です。
URLを貼り付けるだけと言う簡単な方法ですので、動画の横幅を自分で指定する事ができません。
結果、このような状態になってしまうのです。
ソースコードをもっと短くする
ほとんど差はないのですが、若干、URLを短くして、ソースコードを節約する方法があります。
SEOの観点から、できるだけソースコードは短くする事が推奨されています。
その分、記事に書いた文字の比率が上がる為、狙ったキーワードが重要視されやすくなるのです。
逆に、ダラダラとHTMLやCSS、PHPやJavaScriptなどのプログラミング言語がページ内に書かれていたりすると、その分、狙ったキーワードが薄まってしまうのです。
そこで、短いURLをYouTubeのページから抽出してみましょう。
YouTube動画のページを開きます。
ページ中央部にある「共有」タブをクリックして下さい。
表示されたURLをコピーして、記事に貼り付けて下さい。
表示は先ほどと同じですが、URLが短くなった分、ソースコードは短くなりました。
ショートコードでYouTube動画のサイズを調整
メディアの埋め込みを行うembedショートコード
前述しましたように、WordPressの記事にYouTube動画のURLを貼り付けて動画を埋め込む方法では、動画のサイズが調整できません。
そこで、ショートコードと言うものを使って、YouTube動画のサイズを調整する方法があります。
具体的な記述方法は以下の通りです。
[embed width="動画の幅" height="動画の高さ"]YouTube動画のURL[/embed]
embedショートコードで指定するYouTube動画の幅と高さの単位はpxですが、「px」の記述は省略します。
また、YouTube動画の縦横比は維持されますので、実際は横幅のみを指定すれば十分です。
例えば、YouTube動画の横幅を400pxにしたい場合は、以下のようになります。
[embed width="400"]http://youtu.be/Pgj_DnAl9j0[/embed]
これをWordPressの記事に埋め込みすると、こうなります。
JetpackのショートコードでYouTube動画を埋め込み
Jetpackプラグインの埋め込みショートコード
WordPress内に多機能プラグインJetpackがインストールされている方の場合、Jetpack用のショートコードを使って、YouTube動画を記事内に埋め込む事ができます。
その際、動画のサイズも指定できますが、embedショートコードを使った場合よりも、ショートコードを短くする事ができます。
[youtube=YouTube動画のURL&w=動画の横幅&h=動画の高さ]
Jetpack用のショートコードはembedショートコードよりも覚えやすく、入力も楽です。
ただ、HTMLに変換された後のソースコードはembedショートコードを使用した場合と全く同じですので、SEO的な効果は変わりありません。
多機能プラグインJetpackのインストール方法
多機能プラグインJetpackは、インストールから有効化までの作業がちょっと大変です。
インストールすれば様々な事ができるようになるので、私としては、必須プラグインの一つではあるのですけれども・・・。
そこで、Jetpackプラグインのインストールから有効化までの方法をご紹介したいと思います。
記事に従って作業を行う事で、Jetpackプラグインを有効化する事ができます。
既にJetpackプラグインをインストール済みの方は、次の作業に進んで下さい。
「サイドバー」の「プラグイン」の中にある「新規追加」をクリックして下さい。
「プラグインのインストール」ページが開きますので、検索窓に「Jetpack」と入力し、「プラグインの検索」をクリックして下さい。
プラグイン一覧の中に「Jetpack by WordPress.com」と言うプラグインが表示されますので、「いますぐインストール」をクリックします。
「本当にこのプラグインをインストールしてもいいですか？」と言うダイアログが表示されます。
「OK」をクリックして下さい。
プラグインのインストールが自動で行われます。
インストールが完了したら、「プラグインを有効化」をクリックします。
Jetpackは、有効化しただけでは意味がありません。
WordPress.comのアカウントと連携して、初めて稼働します。
「WordPress.comと連携」をクリックします。
「Jetpackの認証」ページが表示されますので、WordPress.comのアカウントを持っている方は認証を行って下さい。
大半の方は持っていないと思いますので、「アカウントが必要ですか？」をクリックして下さい。
WordPress.comのアカウント登録画面が表示されます。
「メールアドレス」、「ユーザー名」、「パスワード」を記入し、「登録」をクリックします。
登録したメールアドレスへ、WordPress.comからメールが送られて来ます。
メールの中の「アカウントを有効化」をクリックします。
再び、「Jetpackの認証」画面に戻ります。
「Jetpackの認証」をクリックし、登録したWordPress.comのアカウントとJetpackとを連携して下さい。
これで、多機能プラグインJetpackの全機能が使えるようになりました。
表示されたJetpackの詳細設定画面の中から、必要な機能を「有効化」させて下さい。
ショートコードに関しては、JetpackプラグインとWordPress.comのアカウントとの連携ができた時点で使用できるようになっています。
埋め込みYouTube動画をレスポンシブ対応にする
レスポンシブデザインとは？
レスポンシブデザインとは、PCのブラウザの表示サイズや使用デバイス（PC、スマートフォン、モバイルなど）によって、サイトのデザインの表示サイズが可変する仕様のものを言います。
どのデバイスからアクセスして来たユーザーでも等しく同じ画面が表示されるので、ユーザビリティの観点から、レスポンシブデザインは推奨されています。
普段はPCからアクセスして来ているユーザーが、たまたまスマートフォンからアクセスする機会があったとしても、そのサイトがレスポンシブデザインなら、操作を迷う事もありません。
デバイス間の格差がないと言うのも大きいです。
更に、レスポンシブデザインはSEOの観点からも推奨されています。
PC用のページ、スマートフォン用のページ、モバイル用のページと、同じ内容のページをそれぞれ準備すると、重複コンテンツを有するサイトとして、サイト全体の評価が落ちる可能性があります。
また、それぞれ別のURLが存在してしまうので、コンテンツに対するユーザーからの被リンクもそれだけ分散してしまいます。
レスポンシブデザインはそう言う問題がありませんので、SEOに強いと言われているのです。
また、従来は、PC用のサイト、スマートフォン用のサイト、モバイル用のサイトと、サイトのターゲットユーザーをデバイスによって絞り込む必要がありました。
絞り込むと言う事は、狙ったデバイス以外からの訪問者を、みすみす逃していると言う事になります。
レスポンシブデザインは、デバイスによってターゲットユーザーを絞り込む必要がなくなる為、そう言う問題もなくなります。
表示中のサイトはレスポンシブデザイン？
ブラウザで表示中のサイトがレスポンシブデザインかどうかは、簡単に確認する事ができます。
ブラウザウィンドウの横幅を狭くした際、サイトのデザインが自動的に対応するかどうかを確認すれば良いだけです。
当サイトで使用中のWordPressテーマ「THE WORLD」はレスポンシブデザインですので、実際にどうなるのか、試してみて下さい。
埋め込んだYouTube動画が問題を！？
サイトがレスポンシブデザインなのはとても便利なのですが、問題が一つあります。
それは、埋め込むYouTube動画が、現時点でレスポンシブデザイン対応ではないと言う点です。
ですので、YouTube動画の部分だけはサイズが可変せず、はみ出た部分が欠けてしまいます。
そこで、WordPressテーマ「THE WORLD」では、埋め込み動画をレスポンシブ対応にする為の方法が準備されています。
記事の中に記述するYouTube動画のURLを、<div>タグでくくり、THE WORLD独自で準備されているclassを指定すれば良いだけです。
<div class="video-wrap"> YouTube動画のURL </div>
WordPressの記事内にこのコードを埋め込むと、このように表示されます。
注意点ですが、「YouTube動画のURL」の前後には改行を入れて下さい。
<div>タグを同じ行に記述してしまうと、YouTube動画のURLは動画に変換されず、そのままURLが表示されてしまいます。
THE WORLDの説明書との違いについて
THE WORLDへの埋め込み動画をレスポンシブ対応にする為の方法ですが、実は、THE WORLDの説明書では、埋め込みコードを記述するように書かれています。
<div class="video-wrap">YouTube動画の埋め込みコード</div>
ですが、埋め込みコードで動画のサイズを設定しても、意味がありません。
レスポンシブ対応にする為のclass設定のせいで、埋め込んだYouTube動画は、記事の横幅サイズいっぱいに表示されます。
ですので、わざわざYouTubeの埋め込みコードを取得せずとも、動画のURLを貼るだけで十分なのです。
YouTubeの埋め込みコードを利用する
埋め込みコードとは？
これまで、あれこれとWordPressにYouTube動画を埋め込む為の方法についてご紹介しました。
ですが、実は、こう言う知識がなくても、YouTubeでは、サイトにYouTube動画を埋め込む為の「埋め込みコード」と言うものを公開しているのです。
この埋め込みコードを記事内に貼る事で、指定したサイズでYouTube動画を記事に埋め込む事ができます。
勿論、これまで紹介して来た方法の方がWordPressにおいては簡単でお薦めなのですが、WordPress以外のもので構成されたサイトで記事を書く場合は、上記方法は使用できません。
ですので、YouTubeで提供されている埋め込みコードを使った方法も覚えておきましょう。
この先、WordPress以外のものも使用する機会があるかもしれませんしね。
YouTubeで埋め込みコードを取得する
では、YouTube動画のページを開いて下さい。
ページが開いたら、動画の下にある「共有」タブをクリックします。
そして、「埋め込みコード」タブをクリックします。
動画の「埋め込みコード」が表示されます。
「動画のサイズ：」の部分で動画のサイズを選択します。
ドロップダウンメニューの中の規定サイズを選ぶか、その中にないサイズを使用する場合は「カスタムサイズ」を選択します。
希望するサイズを選択し終わったら、埋め込みコードをコピーします。
これを記事に貼り付ける事で、動画が表示されます。
まとめ
いくつか方法がありますが・・・
今回はWordpressの記事へのYouTube動画の埋め込み方法をご紹介しました。
いくつか方法がありましたが、あなたのサイトにピッタリの方法はありましたか？
THE WORLDユーザーの方の為に、YouTube動画をレスポンシブ対応にする方法もご紹介しました。
THE WORLDユーザーだけかと残念がる方もいるかもしれませんが、もし、あなたが使用中のWordPressのテーマがレスポンシブ対応でない場合は、YouTube動画をレスポンシブ対応にする必要はありません。
動画だけがレスポンシブ仕様だと、逆効果になってしまいます。
今回ご紹介していない方法も含め、YouTube動画をWordPressの記事内に埋め込む方法はいくつかあります。
どの方法がベスト・・・と言うよりも、埋め込み先の環境次第で、ベストな方法が変わります。
是非とも、あなたの環境に合わせて使い分けて下さい。
