役立つ情報を発信

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

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

Sponsored Link

 

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

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コードをコピーし、最下部に貼り付けし、「ファイルを更新」をクリックします。

2016-06-08_122415

 

 

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

関連記事

プロフィール

夢は、成しとげる

氏名 : ヌコミチ
年齢:三十路
職業:落ちこぼれサラリーマン
趣味:ユーチューブとブログの研究!

ご感想、ご質問・ご相談はこちらから、お気軽に!
↓↓↓
メールフォームはこちら☆

スポンサーリンク