MENU

スマホ画面でYoutube動画の表示サイズを自動調整(レスポンシブ)する方法

ブログをスマホで閲覧するとき、動画・画像が画面からはみ出しているとカッコ悪いですよね。CSSコードを書き加えるだけで、カンタンに解決できますよ。初心者さんにもわかりやすく紹介します。

 

テーマの編集をクリックします。

2016-06-08_122236

 

ご使用しているテーマが選択されていることを確認します。(以下、テーマ「BlogPress」を例とします。)

2016-06-08_122256

 

テンプレートのスタイルのうち、「style_sp.css」をクリックします。ちなみに、style_spの「sp」はスマートフォンという意味です。同様に、この上の「style_pc.css」の「pc」はパソコンという意味で、以下と同様の処理をすることでパソコンでの表示サイズも自動調整されます。

2016-06-08_122307

 

「style_sp.css」の画面が開きます。

2016-06-08_122327

 

下記CSSコードをコピーし、最下部に貼り付けし、「ファイルを更新」をクリックします。

iframe {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

2016-06-08_122415

スマホの画面を起動して、動画が正しいサイズで表示されているか確認しましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ショウのアバター ショウ うつ病逆転副業パパ

うつ病逆転副業パパです!

コメント

コメント一覧 (1件)

  • Youtubeの埋込み動画サイズを自動最適化する方法 | 落ちこぼれサラリーマンのブログ より:

    […] 管理画面の「外観」から「CSS編集」を開き、「CSSスタイルシートエディター」の画面を開きます。(CSS編集がメニューにない場合はコチラの記事を参照) […]

コメントする

目次