純規の暇人趣味ブログ

首を突っ込んで足を洗う

[WordPress]oEmbedの記事埋め込みをレスポンシブ(?)にする

      2016/02/20    HimaJyun

WordPress4.4からoEmbedとか言う機能を使って、WordPressサイトの記事を埋め込むことが出来る様になりました
すなわち、自分のサイト内の他のページもこのoEmbedで掲載出来ると言う訳です。

しかし、この機能「レスポンシブに強くなりました」的な事を言っているWordPress4.4の意に反してレスポンシブではありません、レスポンシブの欠片もありません。

なので、今回はCSSを1つ追加するだけで出来るレスポンシブ(?)をご紹介します。

oEmbed

早い話、これです。

[WordPress]サイトアイコンを設定した際に自動で追加されるiconヘッダを無効にする

記事のURLを投稿ページに書き込むだけ(リンクの設定なども必要無し)で機能してくれる優れものです。
この機能があると、自サイト内の他記事を良い感じに紹介出来るため、愛用しています。

レスポンシブ……

では、この埋め込みを使った記事を確認してみましょう。
出来ていますね、次はスマホ……ブラウザの開発機能で確認してみます。

wordpress-oembed-responsive-001

ああああああああああああ!!!!(怒

と言った具合に、全くもってレスポンシブではありません。

対策

まず最初に言っておくと、レスポンシブ(?)です。
?です、一応確認しましたがダメな所があるかもです。

CSSに以下の3行を追加するだけです。

.wp-embedded-content {
 max-width: 100%;
}

原理

ブラウザの開発ツールで見て頂ければ分かりますが、oEmbedは以下の様なインラインフレームで成り立っています。

<iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="" src="URL" data-secret="数字" width="幅" height="高さ" title="埋め込まれた WordPress の投稿" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

しかし、レスポンシブデザインのテンプレートではユーザの画面幅に応じてコンテンツ幅が変化する事が多く、この固定された幅では溢れてしまいます。

そのため、「wp-embedded-content」クラスに幅100%を指定して、横幅をブラウザに任せているのです。

これでoEmbedがコンテンツの横幅に合わせて出力される様になります。
小ネタですが、設定しないよりはした方が良いのでぜひ設定しておいて下さい。

 - Web制作