Webサイトに動画やツイートなどのコンテンツを埋め込む「embed」機能。せっかくのカッコいいリンクなのに、画面幅が狭いスマートフォンなどで見ると画面からはみ出して間抜けなことになることも。
これを解決する方法を紹介します。
WordPressのembed機能をスマホで見ると…
「embed（エンベッド）」とは埋め込み機能のこと。「oEmbed」というフォーマットに対応しているページや動画やツイートなどのコンテンツを、別のサイトに埋め込む機能です。
WordPressはバージョン2.9から埋め込む側、バージョン4.4から埋め込まれる側として対応されています。
例えばWordPressのサイトがどこかに埋め込まれるとこんなかんじ。
URLを指定するだけでアイキャッチ画像やタイトルなども表示されてわかりやすくてカッコいいリンクになるんです。
が！
スマホで見ると…
残念！横幅が収まらずにはみ出してしまいました。
使っているテーマなどにもよるとは思いますが、多くの場合こうなってしまうことでしょう。
画面幅の中に収める方法
embed機能ではHTMLのiframeタグが出力されます。iframeのスタイルを調整することではみ出しを解消できます。
style.cssに以下のコードを追加します。
|
1 2 3 4 |
/*embedはみ出し防止 */ iframe{ max-width: 100%; } |
たったこれだけです。
無事に画面サイズに収まりました！
ただしこれは自サイトのみの設定です。他のサイトに自分のサイトが埋め込まれる場合は効果がありませんのでお気を付けください。
実際のリンクがこちらです↓。ついでに読んでもらえると嬉しいです。
embedの関連記事
こちらの記事も合わせてどうぞ！
Webサイトにコンテンツを埋め込む「embed」機能。WordPressページが埋め込まれる場合、デフォルトでは本文の抜粋が表示されますが、これをメタディスクリプションに変更する方法をご紹介します。
WordPressで画像や説明も付いて別ウインドウで開く関連記事リンクを簡単に入れたい！をショートコードで実現する方法です。プラグインは不要です！