film-589491_1280

記事の中に参考としてYouTubeの動画を貼る場合がありますが、ブラウザなどのウインドウサイズを小さくすると、YouTube動画だけが大きさが変わらず横にはみ出してちゃんと見れない！！なんてことありませんか？

WordPressのテーマによっては自動でYouTube動画の大きさを画面サイズに合わせて調整してくれますが、実は調整されないテーマもあったりします。

気が付かないでいると実ははみ出てた！ということになってたりするんですね。

パソコン上ではしっかり表示されているのに、スマホで見ると横に半分以上はみ出していて何だか分からない動画になっていた、なんてことにならないよう、しっかり対策しておきましょう。

検索順位にも関係してきますので、この記事を元にあなたのブログでも一度ぜひ確認してみてくださいね。

YouTube動画の貼付けについては以下参照

関連記事 >
WordPressへYouTubeの貼り付け方法 - 時間指定やサイズ指定はこうやればOK！
記事を書いていると、参考動画としてYouTubeの動画を貼りたくなる場合があります。 YouTubeはこちら この動画貼り付け、実は動画を視聴してもらうことで記事の滞在時間を長くし、検索結果の上位表示にもつながる重要なものなんですね。（つまりSEO対策の１つ） 著作権などの関係で貼り付けてはダメな動画
tabibitojin.com - JINのブログ

簡単動画解説

動画で簡単にポイントを解説をしていますので御覧ください。

詳しくは以下を御覧ください。

モバイル対応

ここではWordPressのテーマで有名どころ３つ（賢威、Simplicity, Stinger5）でどうなるか、また画面サイズに合わせて自動で動画の大きさが変わらない場合の対処法を解説します。

検索順位を決めるグーグル的にも今やスマホ対応は基本中の基本。逆にスマホ対応がされていないブログやサイトは評価が下がる（というかスマホ対応している方が優先される）ことが示唆されています。

WordPressで使用するテーマにもよりますが、YouTubeの動画を貼った際に、横幅をググッと狭めて（動画の横幅以上に狭める）その時動画も横幅に合わせて小さくなるかを確認してみましょう。

ここでは有名どころの以下３つのテーマについて調べました。（2015年9月現在）

  • 賢威： 非対応
    （画面が小さくなっても動画の大きさはそのまま。つまり画面からはみ出す）
  • Simplicity: 対応
    （画面の幅に従って、動画も縦横比を保ちつつ小さくなる）
  • Stinger5: 対応
    （画面の幅に従って、動画も縦横比を保ちつつ小さくなる）

以下、それぞれ実際の表示を確認してみます。

利用する動画は、即席で作った以下の15秒サンプル動画です。
https://www.youtube.com/watch?v=CQA54t4ZFMA

賢威の表示

（PC表示）普通に表示される。

2015-09-01_173704

（モバイルの表示）横がはみ出し、画面に収まりきっていない。

2015-09-01_173809

Simplicityの表示

（PC表示）普通に表示される。

2015-09-01_174039

（モバイルの表示）
自動的に画面に合う大きさに縮小され、縦横比も保たれている。

2015-09-01_174107

Stinger5の表示

（PC表示）普通に表示される。

2015-09-01_173903

（モバイルの表示）
自動的に画面に合う大きさに縮小され、縦横比も保たれている。

2015-09-01_173927

モバイル非対応のテーマでの対応

以上のように、テーマによって対応もあったりなかったりです。

ここで見たように賢威や他のテーマでモバイル対応がされてない場合（スマホなど画面の小さな機器で見た場合はみ出るような場合）は、以下の対応をしてみてください。

  • 「埋め込みコード」をタグで囲む
  • CSSの設定

と2つのステップが必要ですが難しいものではありません。

１）「埋め込みコード」をタグで囲む

埋め込みコードを以下のタグで囲みます。

ここでは埋め込みコードはサンプル動画の以下を使います。

（「埋め込みコード」についてはこちらを参照　WordPressへYouTubeの貼り付け方法 - 時間指定やサイズ指定はこうやればOK！）

これらより、以下のようにします。

２）CSSの設定

以下をCSSに追加します。（コピペでOK！）

CSSの追加については、以下の記事を参照してみてください。

関連記事 >
WordPressのCSSカスタマイズ！読み込み用プラグインとCSS反映の具体例！
別記事で見たGoogle Chromeとその開発者ツールの威力。それを武器にCSSがカスタマイズできれば、一気にデザインカスタマイズの可能性が広がります。実際に修正したり他から持ってきたCSSをブログに反映するには、１）使用しているテーマのスタイルシートに直に書き込む２）プラグインを利用したスタイルシートに書
tabibitojin.com - JINのブログ

対応した結果の表示確認

以上2点の対応した結果、どのように表示されるか確認すると．．．

2015-09-01_195300

おぉ、横幅がしっかり収まって表示されました。これなら問題無いですね！

動作サンプルは以下のテスト記事を参照してみてください

今回のまとめ

  • モバイル対応は今や基本中の基本。
  • 動画再生の自動リサイズに対応していないテーマもあるので、一度運営するブログについてどうなっている確認して見る必要がある。
  • 対応していない場合にはタグで囲みCSSを設定することで、自動リサイズに対応できる。

記事の作成は入力のし易ささからパソコンで主に行うことが多く、結果、スマホでどういう表示になるか確認が疎かになりがちです。

グーグルが重要視している云々というより、実際トレンド系の記事のアクセスを見てみれば、今や7割から8割はスマホで読まれると考えても間違えではありません。

折角滞在時間を伸ばす動画を貼っても、見れない環境にあれば意味がありません。（というかモバイル対応していない！ということで検索順位を落とされかねない）

対応すべきものにはしっかり対応し、訪れる読者にやさしい環境を築くことで、読者も嬉しい、書き手も嬉しい、検索エンジンも嬉しい、といった好循環を生み出して、圧倒的なアクセスにつなげていきましょう。

関連動画　WordPressへYouTubeの貼り付け方法 - 時間指定やサイズ指定はこうやればOK！

早期退職して海外で奮闘する JIN のメールマガジン

無料メールマガジンの詳しい内容を見る！

時間や場所に縛られず稼いだJINが教える

～ 最短で月収10万円稼げるようになる方法 ～

お名前（全角文字）

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

迷惑メールは一切配信されませんので、ご安心くださいね

自らの手で未来を変える力を手に入れる！