【賢威6.2】WordPressでYouTube動画をレスポンシブ(スマホ)対応に

賢威6,2動画レスポンシブ

今回は、賢威6.2を使用している時に
WordPressでYouTube動画をレスポンシブ対応させる方法
をご紹介していきます。

この方法を使用すれば、スマホでブログを見た時に
YouTube動画が画面からはみ出ることなく適切なサイズで表示されます。

さらに、スマホ以外のどの端末でもその画面のサイズに合わせて
動画のサイズも変わり、適切なサイズで表示されます。

 

また、動画に限らず、グーグルマップなどにも応用できます。

スマホからのアクセスが多くなってくるこれからの時代、
スマホに対応されたブログはGoogleからの評価も高くなりますので
動画やグーグルマップを記事内に埋め込む場合はぜひ知っておいてください。

そのまま動画を埋め込んだ場合

まず、設定方法をお話する前に
動画をそのまま埋め込んだ場合の表示のされ方をお見せします。

そのまま埋め込んだ場合、
スマホから見るとこのように動画が画面からはみ出してしまいます。

賢威6.2動画レスポンシブ

これを直していきます。

動画をレスポンシブ対応にする方法

まず、記事投稿画面に移り、テキストエディタにします。

賢威6.2動画レスポンシブ3

レスポンシブ対応させたい動画タグを探すと、
最初は以下のように動画タグが記入されているかと思います。

レスポンシブ対応させるためには、
動画タグの前後に以下の様なタグを記入します。

こうするだけで動画やグーグルマップのレスポンシブ対応の設定は完了です。

これをスマホで実際に見てみると…

賢威6.2動画レスポンシブ

というように画面のサイズに合わせて動画のサイズも変わっています。

何度も言いますが、これはグーグルマップなどでも応用可能です。

また、パソコンで見た場合でも、画面のサイズを小さくしてみると、
その大きさに合わせて動画のサイズも変わっていくので
もしよければこちらの記事内の動画で試してみてください。

YouTubeの広告収入で稼ぐ日本人の年収ランキング!

最後に

設定方法は簡単でしたね。

冒頭でもお話したとおり、
これからはスマホなどのモバイル端末からのアクセスが
ますます増えていきます。

いちいちそれらに対応させるのは大変かもしれませんが
そのような細かい設定が結果的に大きな差となっていきますので
必ず設定していきましょう。

 

また、先程のコードをいちいち記入するのは面倒臭いかと思いますので
その際は『AddQuicktag』というプラグインを使用すると楽になります。

こちらで紹介していますのでぜひ使用してみてください。

AddQuicktagの設定と使い方-WordPressプラグイン

メールマガジン登録





コメントを残す

サブコンテンツ

このページの先頭へ