「新しい人生を自分で創る」選択肢をあなたに。公式LINEお仕事・公演依頼プライバシーポリシーXeoryのブログをスマホで見てYoutube動画が切れる時の埋め込み対処法ブログ応用2018.03.22まっしーこんにちは。Youtubeの動画はブログ記事の情報を補足したり、言葉や画像だけでは伝わらない情報を解説するのに非常に便利です。ブログのテンプレートによっては動画が切れてしまうような現象が起こることも。無料のワードプレステーマの中で私もオススメしている「Xeory」というテンプレートも、普通にYoutube動画を掲載すると動画が画面全体に表示されず「切れた」ような状態になってしまうことがあります。まとめXeoryでYoutube動画の表示が切れてしまう原因とは?Youtubeの動画はYoutubeの動画URLをそのままワードプレスのビジュアルモードに貼り付けすれば、動画を記事内へ簡単に埋め込むことができます。場合によってはスマホで見てみると、こんな風に「右端が切れた動画」が埋め込まれてしまうのです。この原因は、動画の表示をレスポンシブで表示する機能がワードプレスで使用しているテンプレートに適用されていないから。動画を貼り付けても、パソコンではちゃんと見られていたとしてもスマホではレスポンシブに対応しておらず、結局動画が切れたまま埋め込まれてしまう、ということです。Xeoryのテンプレートの場合は初期の状態ではレスポンシブ対応になっておらず、表示がすでに切れてしまっているので、この場合右の方向にスクロールしても動画は切れたまま。再生しても端っこは見られません。「CSS(スタイルシート)」を変更する作業をすることで、XeoryでもYoutube動画がスマホ表示で切れないようにすることが可能です。具体的なやり方を紹介していきますね。Youtube動画が切れないようにするためにはCSSを編集する動画が切れないようにするためにはCSS(スタイルシート)を編集していきます。スタイルシートはブログの見た目を司るプログラム部分ですが、手動でコードを入力していき、設定を反映させスマホで切れないようにする、という事ですね。やり方としては「レスポンシブ表示にするためのコード(文字列)」をスタイルシート入れ、Youtube動画を入れるときに記事作成画面で「レスポンシブ化のコード(文字列)」を入れる、という2つの事をしていきます。手順としてはおおむね以下の通り。ワードプレスにログイン管理画面から外観→テーマの編集を選択テーマの編集からスタイルシートの項目を出すスタイルシートに「レスポンシブ表示にするためのコード(文字列)」を入れる記事を書いて動画を埋め込むときに、「レスポンシブ化のコード(文字列)」を入れるこれだけです。「レスポンシブ表示にするためのコード(文字列)」を準備します。ここが、スタイルシートを編集する画面です。こんな画面が出てきますので、続けて以下のコードをコピーして、スタイルシートに貼り付けをしていきましょう。!important;}こちらを、このような形でスタイルシートの一番下に貼り付けます。※このとき、最後の行には改行を入れましょう。class=”youtube2′′>(Youtubeの動画埋め込みコード)</div>といった形でYoutube動画を埋め込んでいけばOKです。埋め込む、をクリックし、コードが出てくるので、このコードを丸ごとコピーし、記事編集画面のビジュアルモードで「レスポンシブ化のコード(文字列)」をYoutube動画のコードを挟むように記述します。allowfullscreen></iframe></div>テキストモードで書き込まないと反映されないので、テキストモードへコードを入れましょう。これで、スマホで埋め込んだときにも動画が切れなくなるように設定できます^^↑右端までキレイに動画が収まっていますね。それでも表示されない時の対処法ただ、Xeoryをダウンロードしたときの時期によって、スタイルシートの編集を「外観>カスタマイズ>追加CSS」に移動して設定するやり方の時もあります。class=”youtube2′′></div>で囲むコードを入れてもスマホの画面が切れてしまう場合には、「追加CSS」から設定を試みてみましょう。まとめそれではYoutubeの動画埋め込み時にXeoryのスマホで画面が切れてしまった場合の対処法でした。関連記事ブログ応用ライター外注化の始め方!作業マニュアルの作り方と募集方法こんにちは。自分のブログで一通り記事を作成できるようになったら、外注化を実践してみるのに良いタイミングかも知れません。件名は「モデレートしてください」というもの。「モデ...ブログ応用クラウドワークスへの登録方法と初期設定・募集文と発注のやり方こんにちは。外注化をして、記事作成をするパートナーさんを集めることができれば1日で効率的に記事を増やすことができるようになります。次は実践に移っていきましょう。共起語の意味や使い方は?分析ツール無しでSEO効果を高める方法こんにちは。「自然に散...ブログ応用ブログタイトルの考え方と決め方は人気ブログから学ぶべし!こんにちは。それは稼げないブログの一歩目を歩んでいるかもしれません。圧倒的爆発力のあるアクセスを集める!ブログ記事の書き方のコツこんにちは。色々な方法があります。文字数だけを増やしても、ブログのアクセスや収益は伸びるわけではないので、まずはそこを理解したうえでブログを運営しましょう。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。ホームブログマーケティングブログ応用ブログ内記事検索はじめまして!「まっしー」と申します。がんじがらめの人生を自由にしたい!という思いで副業に取り組み会社経営をしている元自衛官の愛知県民です。【自分の人生は自分で創る】をモットーに、人生を変えたいと思う志をもった生徒さん達と一緒に楽しくビジネスを実践しております。最初はむしろコンプレックスや劣等感の塊で、まさかビジネスを自分でやるなんて、と思いながら今は楽しく充実した日々を過ごせています。思い通りの人生の創り方あまり世間では表に出ない自衛官時代の裏話も盛りだくさん!Youtube公式チャンネルでは考え方や気付き、生徒さんのインタビューを発信しています。・実店舗サイト構築管理2件(建設リフォーム業、占い関係)くわしくはお客様の声にてしゅみ:アウトドア、レザーアイテム制作、バイク、ガンプラ、愛妻おんがく:R&B,メタル,ハードコア,ポストロック,オールドスクール,ドリルンベース,ハウス,アンビエント公式LINEはじめました公式LINEでは、メルマガでは送らないコアなメッセージやプレゼントをお届けしていきます。・テレビ番組「ITパンプ」(2017年11月19日O.A)に出演・製作監修を一部担当サバカツとは?スマホアプリ総ダウンロード数3000本突破!「サバカツ」は、私が副業で月収10万円→100万円と稼いでいった経験をもとに作り上げた、ノンフィクションの無料コンテンツです。ブログで月収10万円を右肩上がりに稼ぎ、さらに月収100万円までかけ上げっていくためのコンテンツを、140本以上の動画で使い余すことなく収録しました。「これは10万円の価値があります」とも言われたサバカツで、人生をコントロールする力を身に付けていきましょう。質問や相談は、お問い合わせフォームから随時受け中です。24時間受付けているので、お気軽にどうぞ。公式LINEお仕事・公演依頼プライバシーポリシーホーム検索トップサイドバーブログ内記事検索はじめまして!「まっしー」と申します。がんじがらめの人生を自由にしたい!という思いで副業に取り組み会社経営をしている元自衛官の愛知県民です。【自分の人生は自分で創る】をモットーに、人生を変えたいと思う志をもった生徒さん達と一緒に楽しくビジネスを実践しております。最初はむしろコンプレックスや劣等感の塊で、まさかビジネスを自分でやるなんて、と思いながら今は楽しく充実した日々を過ごせています。思い通りの人生の創り方あまり世間では表に出ない自衛官時代の裏話も盛りだくさん!Youtube公式チャンネルでは考え方や気付き、生徒さんのインタビューを発信しています。・実店舗サイト構築管理2件(建設リフォーム業、占い関係)くわしくはお客様の声にてしゅみ:アウトドア、レザーアイテム制作、バイク、ガンプラ、愛妻おんがく:R&B,メタル,ハードコア,ポストロック,オールドスクール,ドリルンベース,ハウス,アンビエント公式LINEはじめました公式LINEでは、メルマガでは送らないコアなメッセージやプレゼントをお届けしていきます。・テレビ番組「ITパンプ」(2017年11月19日O.A)に出演・製作監修を一部担当サバカツとは?スマホアプリ総ダウンロード数3000本突破!「サバカツ」は、私が副業で月収10万円→100万円と稼いでいった経験をもとに作り上げた、ノンフィクションの無料コンテンツです。ブログで月収10万円を右肩上がりに稼ぎ、さらに月収100万円までかけ上げっていくためのコンテンツを、140本以上の動画で使い余すことなく収録しました。「これは10万円の価値があります」とも言われたサバカツで、人生をコントロールする力を身に付けていきましょう。"https://massy02.com/wp-content/plugins/table-of-contents-plus/front.min.js-end");タイトルとURLをコピーしました。