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

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

Google Adsenseのレスポンシブ広告ユニットの使いかた

アフィリエイト
スポンサーリンク

さっき、記事の最初にGoogle Adsenseの広告を表示するように設定しました。

基本、記事の前に広告入れるのはちょっとためらうのですが、ちょっとした実験で。

レスポンシブ広告ユニット

貼り付けているのは「レスポンシブ広告ユニット」と呼ばれるサイズの広告で画面サイズによって大きさを変更することを認められている広告ユニットです。

Google AdsenseのHELPに説明はあるのですが、一応。

レスポンシブウェブデザインでは、表示されている端末(画面)の機能に応じて、ウェブサイトの表示を動的に制御できます。レスポンシブ広告ユニットを使用すると、さまざまな端末で広告以外のページの要素のレイアウトを制御しながら、それに合わせて広告のサイズを制御できます。

広告サイズの制御

で、実際の広告サイズの制御ですがCSS3のメディアクエリーを利用して制御します。

画面の幅ごとに正確な広告ユニットサイズを指定する広告コードの例:

画面幅 500px 未満: 広告ユニット 320×100
画面幅 500px~799px: 広告ユニット 468×60
画面幅 800px 以上: 広告ユニット 728×90
<style>
.<b><span style="color: #ff0000">example_responsive_1</span></b> { width: 320px; height: 100px; }
@media(min-width: 500px) { .<span style="color: #ff0000"><b>example_responsive_1</b></span> { width: 468px; height: 60px; } }
@media(min-width: 800px) { .<b><span style="color: #ff0000">example_responsive_1</span></b> { width: 728px; height: 90px; } } 
</style>

とHELPにあります。

で、あとはあなたのアドセンスコードの
「<ins class="adsbygoogle"・・・」に「<ins class="adsbygoogle 作成したユニット名"・・・」とするだけです。

実際に自分でGoogle Adsenseの広告ユニットをレスポンシブで作成し、その作成したユニット名をの部分に設定します。

これで完了です。

あとは上の広告ユニットコードをGoogle Adsenseを表示したいところに埋め込みます。

まとめ

実はわたしは記事上の広告はあまりクリックされないのではないかと思っています。

だって記事を読みに来ていきなり広告クリックするってあまりないですよね・・・

しかもGoogle Adsenseは表示される順番が速いものほど(ソースで読み込まれる順)にクリック単価が高いとか・・・。

となると記事のタイトル下はあんまり置いてもうれしくない結果になるんじゃないかと・・・。

でも、一回やってみたかったんだ「レスポンシブ広告ユニット」。

しばらく様子みてダメなら元に戻します。