2018年1月3日

wordpressでiframeをレスポンシブに対応させたい

iframeの広告がはみ出して、レスポンシブにならないのを回避する方法。

とっても簡単です。

以下のコードをモバイル用とPC用のスタイルシートかCSSにコピペするだけ。

分岐は480pxになってます。

<span style=”background-color:#f5f5f5″>@media screen and (min-width: 960px){

.no_iherbpc {
display: none !important;
}
}

@media only screen and (max-width:961px){

.no_iherbsp {
display: none !important;
}
}
</span>

そして、記事中に差し込むiframeを以下で囲みます。

<div class="no_iherbpc">スマホで表示させたいもの</div>
<div class="no_iherbsp">PCで表示させたいもの</div>

この方法は色々代用できるので、wordpressでレスポンシブ表示させるには色々使えそう。

以上、備忘録シリーズでした。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。