読者です 読者をやめる 読者になる 読者になる

Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

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

f:id:syofuso:20170307234011p:plain
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;
}
}

この方法だと2倍のコードを読み込むことになるので、ページ速度的にはよろしくないと思います。レスポンシブ対応の広告ユニットを使うのが一番だと思います(*^^*)

ちなみにAdSenseを記事中に自動挿入するにはid:uxlayman さんのフォームが便利です。
uxlayman.hatenablog.com