[WordPress General] WordPress に embed した YouTube や img をレスポンシブ対応する

width の変更に横幅（width）をあわせる。

[markdown]
> * [WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法 | HTML5でサイトをつくろう](http://www.html5-memo.com/webtips/responsive-movie/)

画像

– `img` に `max-width: 100%` を追加。
– `.postArticle` をつけておけばよいかな。

YouTube

– YouTube の URL をエントリーに含めると、自動で embed される。
– Jetpack の機能を有効化しておくと、`.embed-youtube` で囲まれた下記のタグが生成されるのでこれを利用する。

> * [Shortcode Embeds — Jetpack for WordPress](https://jetpack.com/support/shortcode-embeds/)

“`html

“`

下記を参考にさせて頂きました。

> * [WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法 | HTML5でサイトをつくろう](http://www.html5-memo.com/webtips/responsive-movie/)

“`css
.postArticle img {
max-width: 100%;
height: auto;
}
.embed-youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.embed-youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
“`

こちらに掲載されているとのこと。

現場でかならず使われているWordPressデザインのメソッド

posted with amazlet at 16.05.18

エムディエヌコーポレーション（MdN） (2013-11-20)
売り上げランキング: 81,162

Amazon.co.jpで詳細を見る

デザイン寄りの WordPress の本を1冊買おうかと考えているけれども、数が多くて困ってるので探してみよう。
[/markdown]