異なるサイズの広告バナーをスマホ・PCで切り替える方法

f:id:syofuso:20170307234011p:plain
※注意：AdSenseで使うことは無いと思いますが、この方法をGoogle Adsenseで使うときは必ず「レスポンシブ広告ユニット」にして下さい。レスポンシブ広告以外にdisplay:noneを使うと規約違反になりますのでご注意下さい。
Google Adsenseの場合レスポンシブ広告ユニットがあるので、それを使えば良いのですが、ASPによってはレスポンシブに対応してない広告もあります。

PCでは横長のバナーを表示したいけど、スマホではスマートフォン用の小さいサイズの広告バナーを表示させたいという場合についての対応を考えてみました。タイトル下のバナー広告がテーマのコンテンツ幅やスマートフォン表示に合っていない場合でお困りの方の参考になるかもしれません。

はてなブログでは標準のスマートフォン版がありますので、はてなスマホ版を使っても良いのですが、レスポンシブデザインで表示させる場合の方法です。

Javascrpitで切り替える？

Javascrpitで切り替える方法を考えましたが、AdSenseのようにコードの型が決まっていれば良いですが、あらゆるASPの広告コードに対応することはできません。

AdSenseをスマホ・PCで切り替える方法は既に公開されている方がいらっしゃいます。
uwazumi.honeniq.net

いろいろ考えましたが、単純にCSSのメディアクエリで切り替えることにしました。

CSSで切り替える

PC表示
f:id:syofuso:20170307234201p:plain
スマートフォン表示
f:id:syofuso:20170307234209p:plain
このようにスマートフォン、PCで2種類のサイズの広告を切り替えます。

HTML

広告を表示したい箇所に以下のdivで囲って貼り付けます。

<div class="center">
<div class="ad_pc">
<!-- 広告PC用コードをここに貼り付ける -->

</div>
<div class="ad_sp">
<!-- 広告スマホ用コードをここに貼り付ける -->

</div>
</div>

.centerは真ん中寄せです。

CSS

管理画面→デザイン→カスタマイズ→デザインCSSに以下のCSSコードを追記してください。

@media only screen and (min-width:481px){
/* 表示領域が481px以上の場合 */
.ad_sp {
display: none;
}
}
@media only screen and (max-width:480px){
/* 表示領域が480px以下の場合 */
.ad_pc {
display: none;
}
}