レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法

2012年09月01日

※追記。このやり方はちゃんと確認とってませんがGoogleAdSenseの規約違反になります。やんないでね。

このサイトで教えてもらってちょっと良いなと思ったのでシェアします。

How to use Google AdSense Ads with Responsive Web Design

まぁ僕はまだ試してないんですけどね。

レスポンシブWebデザインでサイトを制作する上で迷う事の一つに、他サイト・サービスが発行するコードを張り付けるケースはどうすれば良いか、ということがあると思います。代表的な例だとGoogle AdSense の広告とかですよね。

例えばこのブログの場合だとWordPressで動いてるので、WordPressの is_mobile(); 関数などで表示の出し分けができたりするんですが、やってませんができるみたいなんです。

じゃあ静的なページだとどうすれば良いんだろう、って悩む方は以下の方法を試してみては如何ですか?

JSで頑張りましょう

Google AdSense のコードはJSで表示させていますね。そして、JSにはウィンドウサイズを取得することができるんですよね。じゃあJS内で判別させて表示するコードを選べばいいわけです。

作り方

  1. ブレイクポイント毎に設定する広告のサイズを決める
  2. アドセンスのコードをコピーしておく
  3. ブレイクポイント毎にif文で分岐

これを見たときに僕は結構ときめきました。簡単ですね。今まで何で悩んでたのかわかんなくなるくらいに簡単ですね。簡単すぎて拍子抜けしてしまって気づいたんですが、もしかして僕が今まで知らなかっただけでこれって常識ですか?

ま、そんなこんななので、ブログ・サイトに広告を貼ってらっしゃる方は試してみてはいかがでしょうか

※上でも書いたけど、規約違反になります。せっかく書いたのに消すのもあれなんで消しはしません。でも、このやり方は悪用しようとすると悪用できてしまうのでやらないで下さいね。

ページを表示すると広告が表示されて、ブラウザサイズを変更すると別の広告に切り替わるのでダメなんだと思います。

他にこんな事も書いてます

FBでコメント

13個のコメント

  1. 書いた:レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 – http://t.co/aJelCmc7

  2. @SEONOWNET より:

    良いね! / レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法
    http://t.co/iT3nSBSj

  3. おお、これよさげだ。やってみようかしら。(‘A’)っ|SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/U5NOUIHz @STACKSTOCK_twさんから

  4. @pacificus より:

    この改変は規約的にOKなのかな? RT @susipaku: おお、これよさげだ。やってみようかしら。(‘A’)っ|SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/tuhNjtI6

  5. @tihata より:

    レスポンシブデザインでブログ作るときの為にめもー / “SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法” http://t.co/qEyY5uqx

  6. @Recta1556 より:

    “SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法” http://t.co/johjyjfQ

  7. @hilbert_d より:

    【はてブ新着IT】 SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/MvZjCNOm

  8. @javascript_j より:

    SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/4KxgxGJh #javascript

  9. @sutero より:

    参考に→ SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/id52CQsl

  10. @adnews_j より:

    SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/4ha4aD9u #ad #koukoku #広告

  11. @anticyborg そうですねー、IEの需要もこういったところであるんすね。(‘A’) そうそう、この間レスポンシブにアドセンスを調整するJSですが、現在の利用規約上アウトっぽいです。むゆうさんのツイート見てRTしたのでどうぞー http://t.co/IOhcxKpn

  12. @wackey より:

    レスポンシブWebデザインでWPテーマ作ったときに入れるAdsenseコードのいじり方はこの記事参考にしたらいいのかな? / “SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示…” http://t.co/4ohjlaYn

  13. @webdev_topics より:

    SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/80pHxUYf

トラックバック/ピンバックはありません。