閉じる
閉じる

あまめも

ブログにYouTube動画を載せたら領域をはみだすのでレスポンシブデザインにしてみた

こんにちは、最近記事にYouTube動画を載せてみたんですが、スマホでの表示がおかしい事に気づいた あますた(@amaguristar)です。

具体的にどういった状態かと言うと、PCで表示した場合は、

20160421_1

問題なく表示されますが、スマホだと、

20160421_2

領域をはみだして表示します。

この状態・・・とっても気になる!早いこと対応しないと!!って感じに早速なおし始めました(単に今やらないとしばらくなおさないんだろうなぁ〜と思っただけですw)

色々と調べましたが、結局どこも同じやり方。
表示する動画をタグで囲んでcssで対応するようです!

具体的には、

20160421_4
(※画像をクリックすると拡大します)

をcssファイルに書き込み。実際に使用する時は、動画のリンクを『<div>』タグで囲めば問題ありません。

<div class="youtube-wrap">
〜動画のリンク〜
</div >

って感じです。たったこれだけ。
一度書き込んでしまえばあとは使い回しが出来るのでやらない手はないと思います。

自分の場合はいざcssを編集しようと思って開いたら標準で書き込んであって「え?最初から読んでおけば良かった・・・」ってなったので、WordPressのテーマを買ったり貰ったりしている人は一度読んでみるのが良いと思います(無駄な時間を使わないで済むので)。

関連記事

  1. info

    <p>タグの改行(余白)を調整したい時は【初心者用】…

  2. サイトデザイン

    「サイトでキーワードを目立つ様に囲みたい!」そんな時はcssでク…

  3. 【基礎】MySQLを使用した時のDBの「テーブル」「カラム」「レ…

  4. WordPressで画像を挿入する時に勝手にリンクが貼られるので…

  5. list

    <ol>リストを好きな番号から連番にしたい時

  6. take090-thumbnail

    【WaznFilm更新】「Markdownって良く聞くけど、どん…

こんなメモもありますよ♪

  1. まいもん寿司 外観
  2. 浅草シルクプリン ロゴ

Twitter

ページ上部へ戻る