STACKSTOCK

日々の出来事や感じた事、学んだ事を蓄積(STOCK)して積み上げ(STACK)てます

レスポンシブ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文で分岐

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

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

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

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

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

この記事の分類

種類: Web制作
ジャンル:

FBでコメント

13個のコメント

  1. むゆう (@anticyborg) says:
    2012年9月1日 at 13:50

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

    Reply
  2. @SEONOWNET says:
    2012年9月2日 at 10:54

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

    Reply
  3. susi-paku (@susipaku) says:
    2012年9月4日 at 11:56

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

    Reply
  4. @pacificus says:
    2012年9月4日 at 12:04

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

    Reply
  5. @tihata says:
    2012年9月4日 at 12:57

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

    Reply
  6. @Recta1556 says:
    2012年9月4日 at 13:02

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

    Reply
  7. @hilbert_d says:
    2012年9月4日 at 13:32

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

    Reply
  8. @javascript_j says:
    2012年9月4日 at 20:51

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

    Reply
  9. @sutero says:
    2012年9月5日 at 08:36

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

    Reply
  10. @adnews_j says:
    2012年9月6日 at 00:54

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

    Reply
  11. susi-paku (@susipaku) says:
    2012年9月7日 at 17:20

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

    Reply
  12. @wackey says:
    2012年9月27日 at 17:38

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

    Reply
  13. @webdev_topics says:
    2012年9月27日 at 19:45

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

    Reply

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