スマホでも336×280の広告サイズを画面内に収める方法紹介

スポンサーリンク

アイキャッチ画像
どうもIT大好きFwwwです

今年もあと二週間を切りましたね!!

あなたの2015年はどうでしたか?

僕は今年の2月にこのブログを始めてから変わったことがたくさんありますよ

一つ目は、小論模試の点数若干上がりましたw

1記事に1000文字は書くようにしているので、それで文章力が上がったんだと思います!

二つ目は、Wordpressを通してPHPやCSSの知識を得ることができたことです

最初はさっぱり意味も分からずコピペしていたコードも、

今では自分で書けるようになりましたよ

三つ目は、毎月のブログ収入が僕のお小遣いの額を超えたことですww

ここからは本題に入っていきましょう(^^♪

まず、アドセンス広告は次のようなサイズが一般的ですよね

  • PCはレクタングル大(336×280)
  • スマホはレクタングル中(300×250)

もちろん、レクタングル大の方がクリック率(CTR)も高く、比較的単価も高いです

なら、スマホにも336×280を貼ればいいじゃないか!

ですが、次の二つのような疑問が思い浮かびます

  • 横幅336pxの画面に収まらなかったら広告だけがはみ出る
  • 訪問者の中で横幅336px以下のユーザーの割合はどれくらいなのか

横幅336px以下と言われてもピンと来ないと思います

僕もピンと来ません笑

なので調べたら、iphone5sやiphone5c、ipod touchなどが該当するようです

なるほど!!

確かに横幅が狭いですね

実際にはみ出るとどうなるのか試してみました

336x280広告はみ出る

広告が画面の大半を覆ってるからもしかしたらポリシー違反になるかもしれませんね

それともちろんのことですが、広告がはみ出ているため、bodyの枠線が見えちゃいますw

なので、今回はこんなことにならないように画面に収まりきらない広告を

CSSで画面内に収める方法をご紹介したいと思います

スポンサーリンク

CSSを用いて336×280の広告を画面内に収めよう

なぜ336×280にこだわる必要があるのか

それは、レクタングル中(300×250)よりレクタングル大(336×280)の方が、

クリック率(CTR)が高いからです

それにアドセンスだとレクタングル中はレクタングル中の中で単価が高い順で最適化してくれるのですが、

レクタングル大だと単価が高くて適当ならば、レクタングル中も表示してくれるからです

要するに、レクタングル大はレクタングル中もオークションに含めるということです

そういう面では、断然レクタングル大の方が有利です

実際に横幅336px以下の端末からのアクセスは何%ぐらいなのか

僕のサイトではGoogle?Analyticsを導入しているのでそちらを参考にします

アナリティクス解像度

大体合わせて25%弱ですね

ということは4人に一人の端末が横幅336pxということですね

そう考えると、iphone5sあたりを使用している方はまだまだたくさんいるということですね!

それなら尚更横幅336pxの広告をはみ出してまで表示させるのは勿体ないですよね

でも、収益化のために336×280の広告はやむを得ないしどうすればいいんだ?

それなら、CSSで調整しましょう

336×280の広告を横幅336px以下の画面内に収める魔法のコード

まずはCSSから

お次は広告の張り方(HTMLです)

そしてCSSにコードを追加するのが嫌な方のために、

HTMLだけで書くならこうなります

次のようになっていたら成功です

画面内に収めた広告

これで見事に横幅336px以下の画面に336×280のアドセンスを挿入することができました!

かなり無理やりですが、これでユーザビリティはマシになったかと思います

まとめ

もしユーザビリティが原因で警告されても私は責任をとれませんが、

こんな方法もありますよという感じで紹介させていただきました

今更ですが本当はレスポンシブという画面サイズをもとに広告サイズを最適化してくれる、
広告ユニットをおすすめします

スポンサーリンク

シェアする



URLをコピーする

関連記事