『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

WordPressのoEmbed(埋め込み機能)をレスポンシブにするCSS

WordPressのoEmbed(埋め込み機能)をレスポンシブにするCSS

WordPressで記事を書くとき、他ページへのリンクを設定すると出てくる表示。

wordpress ブログカード 埋め込み機能  oEmbed

PC表示では問題はないけれど、スマホ表示になるとはみ出してしまう。
レスポンシブ対応がされていないのね。

解決策を調べようにも、名称がわからない。

これはWordPressが自動で出力しているものだからコードを調べようー!

ということで、デベロッパーツールで確認してみると「 .wp-embed」というクラスがついている。

wordpress ブログカード oEmbed レスポンシブ css

ふむふむ、これをレスポンシブすればよいのね、と

.wp-embed レスポンシブ

という検索ワードで調べるとお役立ちサイトがいっぱい。

これは oEmbedという埋め込み機能でブログカードとも言われているらしいです。

これをレスポンシブにすればよいので、

CSSに以下のコードを追加することで解決しました。

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

コード元はこちら
出典: https://jyn.jp/wordpress-oembed-responsive/

この記事が気に入ったら
いいね ! しよう

福本 智子

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

Pocket
LINEで送る

関連記事

Webデザインの参考書を何冊やっても先に進めない方へ

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!