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>
<div class="no_iherbsp">PCで表示させたいもの</div>
この方法は色々代用できるので、wordpressでレスポンシブ表示させるには色々使えそう。
以上、備忘録シリーズでした。
コメントをする（スパム対策で認証制にしています）