アフィリエイトサイトを作って広告バナーを掲載する際、PCとスマートフォンで表示するバナー画像を分けたいと思ったことはないでしょうか？
PCでは横長の画像を設置したいけどスマートフォン表示になると見切れてしまう・・・、でも横幅100%表示にすると小さくなりすぎて文字が読めない・・・。
スマートフォン用の正方形の画像を設置するとPCだと大きすぎる、またはおさまりが悪い・・・。
悩みどころですよね。
そんなことで今回はCSSでPCとスマートフォンで広告バナーを表示分けする簡単な方法を紹介します。
記述方法
<style><--
@media screen and (min-width:768px) {
.pcad { display:block; }
.spad { display:none; }
}
@media screen and (max-width:768px) {
.pcad { display:none; }
.spad { display:block; }
}
--></style>
<div class="pcad"><--広告リンク（PC用）--></div>
<div class="spad"><--広告リンク（スマートフォン用）--></div>
こんな感じで記述すれば画面の横幅で広告バナーを切り替えてくれます。
※動作にはviewpointの設定が必須です。
記載する箇所にこのままコピペでも動きますが、複数の場所で使う場合はCSS部分は共通ファイルに記載して再利用可能にしておくことをお勧めします。
ワードプレスの場合は「追加CSS」に記載しておくとよいでしょう。
簡単なことなのに、いざ自分で実装しようとすると億劫で手を抜きがちなところですよね。
でもこれだけのことでも成果はだいぶ変わってくると思いますので、是非ご活用ください。
広告バナーをフッター固定で表示したい、というときは以下記事が参考になるのでこちらもチェックしてみてくださいね。