Google AdSenseをレスポンシブに10秒で対応させる方法

公開日: : 最終更新日:2014/06/12

Google

長年奥に刺さった小骨が取れたかのような超ハイテンションになったHIROです。

結構頻繁にあったりするのは内緒。

僕のブログはWordPressで、テーマはstinger3です。

CSSでちょこっといじっていますが、ヘッダーにどうしても728×90のビッグバナーを付けたいと前々から思ってまして。

というのも、デザイン的にどう考えても右スペースが空き過ぎていて何か気持ち悪い状態なのでずっと悩んでました。

レスポンシブなので、スマホで表示した時やタブレットで表示した時も728サイズのアドセンスを入れるととんでもない事になります。

具体的には、サイズがはみ出て出力されてしまう。

何となく知識的にPHPで組んで振り分けるんだろうなーと漠然と思っていました。

なのでとりあえず「レスポンシブ アドセンス」で検索するとマジカ!な情報があったのでシェア。

レスポンシブ広告ユニットを作成する

スクリーンショット_102213_033816_PM

https://support.google.com/adsense/answer/3213689?hl=ja

広告コードを生成する

まずはGoogle AdSenseにアクセス。

スクリーンショット_102213_124903_PM

広告の設定を押して新規に広告ユニットを作成します。

[レスポンシブ広告ユニット(ベータ版)を選択する

スクリーンショット_102213_125040_PM

そしたらレスポンシブを選択。

これだけです(笑)超簡単。

ほぼ選択しただけなので、今までアドセンスを使用した事ある人なら朝飯前ですね!

リアルに10秒で作れちゃいましたので、これをただサイトの好きな場所に貼り付けるだけ。

これいつからあったのでしょうか。全然気づかなかった!

これをよく見てみると800以上だと728サイズで表示されて、500以上だとタブレットで表示。320以上でスマホ表示と事になっているみたいですね。

僕が検索しようと思ったのは、PHPで振りわける方法だったのですが、Google的にレスポンシブ押しという事でAdsenseも最適化しようといった流れなんですかね。

まあ、何はともあれ一見落着。

僕は前述の通りヘッダーの横のスペースががら空きだったのでそこに埋め込みました。

実際表示した様子

PC

728×90サイズのバナー

スクリーンショット_102213_025354_PM

タブレット&スマホ

468×60サイズor320×50サイズ

2013-10-22_05.55.19_102213_025800_PM

まとめ

すげー、Googleすげー(棒読み)

という訳でstingerユーザーはもちろん、レスポンシブでアドセンス最適化したいなーと思ってる方は導入を検討されてはいかがでしょうか。

ただ、スマホなどで効果が高そうな300×300のサイズのアドセンスを出したい。

みたいな事は出来ないと思うので、大人しくPHPで組んだ方がよさそうですね。

PHPで組む方法は→stinger3をカスタマイズする上で超捗るツールまとめ【2013年度決算バージョン】

スポンサーリンク

  • このエントリーをはてなブックマークに追加

記事更新をチェック

follow us in feedly

関連記事

コメント

メールアドレスは公開されませんのでご安心ください。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。