レスポンシブ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内で判別させて表示するコードを選べばいいわけです。
作り方
- ブレイクポイント毎に設定する広告のサイズを決める
- アドセンスのコードをコピーしておく
- ブレイクポイント毎にif文で分岐
これを見たときに僕は結構ときめきました。簡単ですね。今まで何で悩んでたのかわかんなくなるくらいに簡単ですね。簡単すぎて拍子抜けしてしまって気づいたんですが、もしかして僕が今まで知らなかっただけでこれって常識ですか?
ま、そんなこんななので、ブログ・サイトに広告を貼ってらっしゃる方は試してみてはいかがでしょうか
※上でも書いたけど、規約違反になります。せっかく書いたのに消すのもあれなんで消しはしません。でも、このやり方は悪用しようとすると悪用できてしまうのでやらないで下さいね。
ページを表示すると広告が表示されて、ブラウザサイズを変更すると別の広告に切り替わるのでダメなんだと思います。
他にこんな事も書いてます
この記事の分類
種類: Web制作
ジャンル: AdSense responsive web制作
FBでコメント
13個のコメント
書いた:レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 – http://t.co/aJelCmc7
良いね! / レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法
http://t.co/iT3nSBSj
おお、これよさげだ。やってみようかしら。(‘A’)っ|SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/U5NOUIHz @STACKSTOCK_twさんから
この改変は規約的にOKなのかな? RT @susipaku: おお、これよさげだ。やってみようかしら。(‘A’)っ|SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/tuhNjtI6
レスポンシブデザインでブログ作るときの為にめもー / “SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法” http://t.co/qEyY5uqx
“SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法” http://t.co/johjyjfQ
【はてブ新着IT】 SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/MvZjCNOm
SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/4KxgxGJh #javascript
参考に→ SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/id52CQsl
SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/4ha4aD9u #ad #koukoku #広告
@anticyborg そうですねー、IEの需要もこういったところであるんすね。(‘A’) そうそう、この間レスポンシブにアドセンスを調整するJSですが、現在の利用規約上アウトっぽいです。むゆうさんのツイート見てRTしたのでどうぞー http://t.co/IOhcxKpn
レスポンシブWebデザインでWPテーマ作ったときに入れるAdsenseコードのいじり方はこの記事参考にしたらいいのかな? / “SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示…” http://t.co/4ohjlaYn
SS | レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法 http://t.co/80pHxUYf
トラックバック/ピンバックはありません。