2018-02-21記事の中に参考としてYouTubeの動画を貼る場合がありますが、ブラウザなどのウインドウサイズを小さくすると、YouTube動画だけが大きさが変わらず横にはみ出してちゃんと見れない!!なんてことありませんか?WordPressのテーマによっては自動でYouTube動画の大きさを画面サイズに合わせて調整してくれますが、実は調整されないテーマもあったりします。気が付かないでいると実ははみ出てた!ということになってたりするんですね。パソコン上ではしっかり表示されているのに、スマホで見ると横に半分以上はみ出していて何だか分からない動画になっていた、なんてことにならないよう、しっかり対策しておきましょう。検索順位にも関係してきますので、この記事を元にあなたのブログでも一度ぜひ確認してみてくださいね。時間指定やサイズ指定はこうやればOK!記事を書いていると、参考動画としてYouTubeの動画を貼りたくなる場合があります。この動画貼り付け、実は動画を視聴してもらうことで記事の滞在時間を長くし、検索結果の上位表示にもつながる重要なものなんですね。簡単にポイントを解説をしていますので御覧ください。詳しくは以下を御覧ください。Stinger5)でどうなるか、また画面サイズに合わせて自動で動画の大きさが変わらない場合の対処法を解説します。検索順位を決めるグーグル的にも今やスマホ対応は基本中の基本。逆にスマホ対応がされていないブログやサイトは評価が下がる(というかスマホ対応している方が優先される)ことが示唆されています。WordPressで使用するテーマにもよりますが、YouTubeの動画を貼った際に、横幅をググッと狭めて(動画の横幅以上に狭める)その時動画も横幅に合わせて小さくなるかを確認してみましょう。ここでは有名どころの以下3つのテーマについて調べました。非対応(画面が小さくなっても動画の大きさはそのまま。対応(画面の幅に従って、動画も縦横比を保ちつつ小さくなる)以下、それぞれ実際の表示を確認してみます。利用する動画は、即席で作った以下の15秒サンプル動画です。https://www.youtube.com/watch?v=CQA54t4ZFMA賢威の表示(PC表示)普通に表示される。(モバイルの表示)横がはみ出し、画面に収まりきっていない。動作サンプル(賢威)http://tabibitocafe.com/theme-keni/youtube-test01/Simplicityの表示(PC表示)普通に表示される。(モバイルの表示)自動的に画面に合う大きさに縮小され、縦横比も保たれている。動作サンプル(Simplicity)http://tabibitocafe.com/theme-simplicity/youtube-test01/Stinger5の表示(PC表示)普通に表示される。(モバイルの表示)自動的に画面に合う大きさに縮小され、縦横比も保たれている。以上のように、テーマによって対応もあったりなかったりです。ここで見たように賢威や他のテーマでモバイル対応がされてない場合(スマホなど画面の小さな機器で見た場合はみ出るような場合)は、以下の対応をしてみてください。「埋め込みコード」をタグで囲むCSSの設定と2つのステップが必要ですが難しいものではありません。1)「埋め込みコード」をタグで囲む埋め込みコードを以下のタグで囲みます。~</div>ここでは埋め込みコードはサンプル動画の以下を使います。時間指定やサイズ指定はこうやればOK!)これらより、以下のようにします。以下をCSSに追加します。100%;}CSSの追加については、以下の記事を参照してみてください。Chromeとその開発者ツールの威力。それを武器にCSSがカスタマイズできれば、一気にデザインカスタマイズの可能性が広がります。以上2点の対応した結果、どのように表示されるか確認すると...おぉ、横幅がしっかり収まって表示されました。これなら問題無いですね!動作サンプルは以下のテスト記事を参照してみてください修正前http://tabibitocafe.com/theme-keni/youtube-test01/修正後http://tabibitocafe.com/theme-keni/youtube-test02/今回のまとめモバイル対応は今や基本中の基本。動画再生の自動リサイズに対応していないテーマもあるので、一度運営するブログについてどうなっている確認して見る必要がある。対応していない場合にはタグで囲みCSSを設定することで、自動リサイズに対応できる。記事の作成は入力のし易ささからパソコンで主に行うことが多く、結果、スマホでどういう表示になるか確認が疎かになりがちです。グーグルが重要視している云々というより、実際トレンド系の記事のアクセスを見てみれば、今や7割から8割はスマホで読まれると考えても間違えではありません。滞在時間を伸ばす動画を貼っても、見れない環境にあれば意味がありません。(というかモバイル対応していない!ということで検索順位を落とされかねない)対応すべきものにはしっかり対応し、訪れる読者にやさしい環境を築くことで、読者も嬉しい、書き手も嬉しい、検索エンジンも嬉しい、といった好循環を生み出して、圧倒的なアクセスにつなげていきましょう。PMお世話になります。このユーチューブ動画を、スマホサイズにする方法で、CSSの設定とありますが、CSSの設定とはどこの部分を指すのですか?よろしくお願いいします。AMコメントありがとうございます!CSSの設定とは「2)CSSの設定」で説明している内容になります。プラグインを利用して設定します。CSSを設定するプラグインについては、以下の記事を参照してみてください。date*日本語が含まれない投稿は無視されますのでご注意ください。JIN】コンサルタント・コピーライター・ウェブデザイナー、プランナーとして活動中。本格的に取り組みだした2年目2016年には年収1000万円突破、2017年5月に自動化で月収170万突破。多忙な時期を過ごすが、自由に憧れ退職、海外移住し、ネットビジネスの道へ入る。現在は海外にいながら自分らしく生きるとは何かを追求するとともに、主に日本国内、またその他海外に住むネットで収入を得たい方に対し、いかにネットビジネスを成功に導き、時間や場所、不要な人間関係にとらわれず自由を得る人、会社、社会に依存しないで自由に稼ぐ人を増やすことに全力を注いでいます。!!初心者だった頃「こういったものが欲しい!」と心に描いていた想いを形に制作した、ネットビジネス学習の決定版!知識ゼロ、これから始める初心者の方、年齢、性別問わず、初歩の初歩からどなたにも楽しみながら学べるコンテンツ。月収10万、そしてさらにそれ以上を目指せる知識を学べます。Cruise』を完全無料で手に入れる!!メルマガのご案内に説明動画があります。TabibitoJinおすすめ記事ブログやアフィリエイトで稼げない理由!成功の3つの条件を押さえる一流の仕事の流儀は頑張らないこと?スポーツ選手に学ぶ超一流の働き方。運営者情報プライバシーポリシーお問い合わせ受講者なんと2500名突破!正しい努力は必ず報われる。稼げないのは努力の仕方が違うから。評判のメールマガジンで、一人でも生きていける力、稼げる力を身に付ける。