賢威でYouTube動画をスマホサイズに合わせる方法

こんにちは、日向です。

今回の「こわざ集」は、前回に続きスマホ対策について。

 

このブログはワードプレスで作成し

テンプレートは「賢威」を使っています。

 

この「賢威」にはレスポンシブWEB対応の機能が

付いているのですが、ユーチューブの動画を記事に挿入し

スマホで見た場合、画面がはみだしてしまいます。

 

そこで今回はその対策についてお届けしますね。

超カンタンに出来ますよ。

 

*レスポンシブWEB対応とは

パソコン、タブレット、スマホなど色々な端末に対し

自動でレイアウトや画像を調整してくれる機能です。

 

対策前と対策後

雑記帳で使用した動画で説明いたします。

 

対策前のスマホ画面

2014-08-29 19-10-46

スマホで見た場合、動画の右半分が切れています。

 

対策後のスマホ画面

2014-08-29 19-09-42

いかがでしょうか、スマホ画面にピッタリと収まっていますね。

 

具体的な対策方法

ブログの投稿画面で、ユーチューブから取得したコードを

次の①と②のタグで囲むだけで完成です。

 

① <div class="v-wrap">

  ユーチューブで取得したコード

 </div>

 

「えっ、これだけ?」 と思われたかもしれませんが

そう、これだけでスマホ対応は完了です。

 

試しにこちらのページをスマホで見てください。

タカラモノ 

 

 

「賢威」でユーチューブの動画を記事に挿入する場合

ご参考にしてください。

 

 

2 Responses to “賢威でYouTube動画をスマホサイズに合わせる方法”

  1. ニコラス より:

    日向さん

    おはようございます!ニコラスです!

    賢威を使っておりますが、
    スマホようとしてYoutubeを埋め込む際の
    テクニックについては初めて知りました!!

    さっそくネタ帳に追加させていただきます^^

    ありがとうございました^^

    • 日向 より:

      ニコラスさん

      コメントありがとうございます。

      お役に立てたら幸いです。

      今後ともよろしくお願いいたします。

コメントを残す

サブコンテンツ

  運営者プロフィール

sas自分上半身

 

こんにちは、ひゅうがです。

1951年生まれの60歳代サラリーマンです。

 

ヤフオクやアマゾンで、せどりを実践しながら、ブログよる初心者向けの情報を配信中

 

ツイート


Feedly

follow us in feedly

このページの先頭へ