WordPressプラグイン

WordPress賢威でYouTube動画をレスポンシブ(スマホ)対応!プラグインは不要?

YouTube動画をWordPress記事内に
レスポンシブに埋め込む方法を紹介します。

パソコンとスマホどちらで見ても、
画面に合ったサイズでYouTube動画が
表示されるレスポンシブデザインの設定です。

レスポンシブデザインにしないと、
画像が大きすぎて画面がはみ出ていたり、
小さ過ぎても良く見えないなどユーザーに
とって不都合が生じてしまいます。
 

読者の方が見やすいよう、
はみ出すことがなく、かつ、
その端末の最大限のサイズで表示できる
ように設定しましょう。

レスポンシブデザインは必須です。

YouTube動画の埋め込み方法!非レスポンシブデザイン

まず、
レスポンシブデザインではない
単純な埋め込み方法を紹介します。

埋め込みたい動画のYouTubeサイトに
アクセスし、動画の下の方を確認します。

「共有」→「埋め込み」をクリックすると
埋め込みコードを表示させることができます。
WordPress 賢威 YouTube 動画 レスポンシブ スマホ 共有
 

これをコピーして、
WordPressの記事内に貼り付ければ、
サイズ固定のYouTube動画を埋め込む
ことができます。
 

ただし、
これだと端末によって
動画のサイズが大き過ぎて
画面からはみ出すことがあります。
 

テーマによっては以下の設定は不要で、
デフォルトでレスポンシブデザインに
なるテーマもあります(Stinger5など)。

一度、
Youtube動画のコードを埋め込んでみて、
どのように表示されるのか確認してみてください。

Google Chromeでは簡単に
スマホ表示が確認できます。
▶ Google Chromeでスマホ表示を確認する方法
 

また、以下のサイトでは、
サイズの異なるスマホやパソコンの画面で
どのように表示されるのかを確認すること
ができます。
▶ http://mattkersley.com/responsive/
 

もし、
レスポンシブデザインになっていないと
以下の様に動画が画面からはみ出てしまいます。
WordPress ワードプレス 賢威 YouTube 動画 レスポンシブ スマホ 動画がはみ出る
 

このようにYouTube動画がはみ出ないよう、
端末のサイズ・枠のサイズに合わせて、
自動的に動画サイズを調節してくれるよう
設定します。

WordPress賢威でYouTube動画をレスポンシブ(スマホ)対応にする方法

レスポンシブデザインの
YouTube動画の埋め込み方法を紹介します。

※プラグインは使いません。
 

ダッシュボードの「投稿」
→「新規追加」をクリック。

記事本文内に以下のように入力します。

 

「★★★」の部分はそれぞれの動画で異なります。次の赤枠部分を入力します。

例えば、動画のURLの末尾。
WordPress 賢威 YouTube 動画 レスポンシブ スマホ URL
 

もしくは
動画下にある埋め込みコードの赤枠部分。
WordPress 賢威 YouTube 動画 レスポンシブ スマホ 共有
 

このように入力すれば、
スマホではみ出さない最大限のサイズで
YouTube動画が表示されます。

特に動画のサイズを指定する
必要はありません。

「★★★」部分が
動画によってり異なるだけですので、
上記のコードはAddquicktagで設定
しておくと効率的です。

WordPressテーマの賢威では、
このようにYouTube動画を
レスポンシブデザインになるよう
設定されています。

どこに設定されているのか確認します。

ダッシュボードの「外観」
→「テーマ編集」をクリック。
WordPress 賢威 YouTube 動画 レスポンシブ スマホ 外観 テーマ編集
 

「mobile.css」を確認します。
以下のコードが入力されています。

 

これを利用すると、
埋め込みコードで指定したサイズが
スマホの画面サイズより大きかった場合、

画面サイズに収まる最大サイズに
調節してくれます。

↓こんな感じですね。
WordPress ワードプレス 賢威 YouTube 動画 レスポンシブ スマホ 画面サイズに合わせる
 

ただし、
この設定はスマホのみの
対応になっています。

つまり、PC表示の時は、
YouTube動画のサイズを
記事枠いっぱいのサイズに
自動調整してくれません。

スマホ同様にパソコン画面でも
動画のサイズを自動調節できるよう
設定していきます。
先程、スマホ表示の設定は
「moble.css」でされていましたが、

パソコン表示の設定は
「design.css」で行います。

「moble.css」内に入力されていたコードを
「design.css」の中にもコピーして保存します。

↓これをコピペします

 

これで
パソコン表示もスマホ表示と同様、
画面サイズ・枠サイズに合わせた
動画サイズに調節されます。

AddQuicktagでYouTube動画の貼り付けを効率化

YouTube動画の貼り付けコードを
AddQuicktagに登録しておくことによって、
記事作成の効率が上がります。

 

以下のように設定しましょう。
WordPress ワードプレス 賢威 YouTube 動画 レスポンシブ スマホ Addquicktag
 

今回紹介したように、
YouTube動画を画面サイズ・枠サイズ
最大限に表示させることにより、

ユーザーにとって見やすいサイズ
(大き過ぎず小さ過ぎず)になりますので、
ユーザービリティの向上にも繋がります。

 

最後まで読んで頂いてありがとうございました。

記事が少しでもお役にたるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめた7日間無料の「副業ブログ講座」を開設中です。

↓↓↓メルマガ登録は下のフォームから↓↓↓

友だち追加