HTML：レスポンシブでないバナーやウィジェットを、レスポンシブっぽくする

じいじばあばは、アフィリエイトのことは詳しいとは言えませんが、多くのASPにおいて、アフィのバナーやウィジェットはサイズが決まっていて、コードの改変も禁止されています。知る限りでは、レスポンシブに対応しているコードを持つのはのはAdsenseくらいです。

2024/05/09現在、このブログではテンプレート「JetTeme」をつかわせてもらっています。このテンプレートはレスポンシブ対応です。普段は何も考えずに、ワープロ感覚でブログを書いていますが、勝手にプログレッシブになってらくちんです。

先日、アフィのバナーを貼って、そのページをスマホで見たら、はみ出していて、はみ出した部分は見えていませんでました・・・。ということで、アフィのコードは改変せずにプログレッシブ対応にしてみました。

バナーサイズ

ここでは、下の4つのバナー(イメージ)を、画面のサイズにより切り替えます。
PCのブラウザにおいてはズーム([Ctrl}+{マウスホイールのクルクル])で画面のサイズをかえてもちゃんと切り替わります。
4つのバナーを切り替えていますが、2つで十分です。凝りすぎました。(^-^;

幅	高さ	クラス名	備考
728	200	dxl	Display X-axis Large
600	200	dxm	Display X-axis Middle
468	160	dxs	Display X-axis Small
300	160	dxt	Display X-axis Tinny

▼ 728 x 200 (dxl)

▼ 600 x 200 (dxm)

▼ 468 x 160 (dxs)

▼ 300 x 160 (dxr)

レスポンシブルにしたバナー (イメージ)

次のバナー(イメージ)は、画面のサイズにより、切り替わります。
[Ctrl}+{マウスホイールのクルクル]をしてみてね。

ソースコード

HTMLとCSSはこんな感じです。
おつかいのホームページのデザイン、バナーのサイズにより@mediaの後ろの数字を、また切り替えたいバナーの数などにあわせてソースコードを、調整してください。

HTNL

<div class="dxl">バナーその1のコード</div>
<div class="dxm">バナーその2のコード</div>
<div class="dxs">バナーその3のコード</div>
<div class="dxt">バナーその4のコード</div>

css

.dxl {display:block !important;text-align:center;}
.dxm {display:none !important;}
.dxs {display:none !important;}
.dxt {display:none !important;}

@media only screen and (max-width:1240px) {
.dxl {display:none !important;}
.dxm {display:block !important;text-align:center;}
.dxs {display:none !important;}
.dxt {display:none !important;}
}
@media only screen and (max-width:768px) {
.dxl {display:none !important;}
.dxm {display:none !important;}
.dxs {display:block !important;text-align:center;}
.dxt {display:none !important;}
}
@media only screen and (max-width:576px) {
.dxl {display:none !important;}
.dxm {display:none !important;}
.dxs {display:none !important;}
.dxt {display:block !important;text-align:center;}
}

実際の広告

実際のアフィのウィジェットはこんな感じになります。せっかく作ったので、貼りまくっちゃうかなwww