アドセンスをスマホでレスポンシブ表示

公開: 2015-02-11 17:59
更新: 2016-04-29 06:02

こんにちは。あっきぃです。

スタンディングデスクを始めて2ヶ月くらい経ちました。

どうでもいいかも知れないですが、足がかなりがっちりして来ました。

(あと無駄に体幹が良くなった気がする。無駄に。)



さて、アドセンスのお話です。

最近iPhone6やら6+やら画面がデカいサイズのスマホが登場したのですが、

あなたのブログ、320*50とかをちょこーんと貼ったままにしていませんか?



アドセンスにはスマホ用のレスポンシブな広告があります。

今日はそれとCSSのみでレスポンシブ対応させスッキリさせましょう。

アドセンスをスマホでレスポンシブ表示

@mediaを使って表示を分けるだけです。

とりあえずこんな感じのHTMLを用意します。

<div class="ad responsive">
        <div class="inner">
                <!- ここにアドセンスのコード ->        
        </div>
</div>

CSSはこんな感じ

.ad {

}
.ad > .inner {
        margin: 0 auto;
        min-height: 50px;
}

ここから「.responsive」に対して@mediaでサイズ分けをします。

Googleさんも推奨している「300*250」「336*280」が表示されるように、

またiPhone6+を横向きにしたときには「728*90」が表示されるようにするといい感じの収益に繋がる気がします。



ってな訳で、えいやっ

@media(min-width: 300px) { .ad.responsive > .inner { width: 300px; height: 250px; } }
@media(min-width: 336px) { .ad.responsive > .inner { width: 336px; height: 280px; } }
@media(min-width: 728px) { .ad.responsive > .inner { width: 728px; height: 90px; } }

これで完了です。

簡単ですね。


一応内容を説明しておくと、

画面が300px以上のとき広告枠サイズを300px*250pxにする。

画面が336px以上のとき広告枠サイズを336px*280pxにする。

画面が728px以上のとき広告枠サイズを728px*90pxにする。


って感じです。

他に表示したいサイズの広告があればこんな感じで追加してください。





あともう1つ

ヘッダーの下ら辺に設置する場合は正方形系だと「記事コンテンツが見えない」=「規約違反」っになるかもなので高さが最大100pxになるようなレスポンシブな広告の設置方法を伝授します。


横に長いのでclass名はresponsiveWideとでも名付けましょう。えいやっ

.ad.responsiveWide > .inner { height: 100px; }
@media(min-width: 728px) { .ad.responsiveWide > .inner { width: 728px; height: 90px; } }

これだけー。

HTMLのresponsiveをresponsiveWideにしてください。



iPhone5とかでは主に「320*100」が表示されます。

iPhone6+とかだと、テキスト広告オンリーになりますが幅ぴっちりで表示されます。

(iPhone6+とかでも320*100のイメージを出したければレスポンスじゃなくて320*100の広告を貼ればいいのです。)



参考にしてくださいませ〜



この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。