このブログはTwentyElevenを元テーマとしたレスポンシブデザインなのですが、シングルカラムにしているため、広告サイズの切り替えってモバイルかどうかを判断するくらいで良かったのですが、他のサイトでちょっとサイドバーから広告がはみ出るのが惨めな感じだったので、いろいろ対応した際の備忘録です。(なんか自分だけがわかる文章)
まずは、このブログで採用している対応方法ですが、
条件はwp_is_mobile()でコメントフォーム直前に広告を横に二つ並べて表示するか、一つ表示するかを分岐しています。
あとは、通常記事の最下部に配置しており、最高でも3つまでの表示になっています。
//adsense code//
| //adsense code// | //adsense code// |
わかりますかね。要するにiPhoneやiPadなどis_mobileに合致する端末だと、広告一つだけ表示になり、それ以外では広告を横に2つ並べています。間に空白いれるためにTable要素で3列にしてあります。
以上は、このブログで採用している方法。
次はレスポンシブデザインでサイドバーにAdsenseを設置している場合。
この場合Responsive Adsenseというプラグインを改造します。
このプラグインのデフォルト設定での選べる広告ユニットが限られていて、私が必要なサイズがありませんでした。そして以下のように手を加えてみました。
（変更点にコメント付けてます）
'A responsive Google Adsense unit.' ) // Args
);
wp_enqueue_script( 'jquery' );
}
public function form($instance) {
// outputs the options form on admin
$pub_ID = isset($instance['pub_ID']) ? $instance['pub_ID'] : '';
$ws = isset($instance['ws']) ? $instance['ws'] : '';
$mr = isset($instance['mr']) ? $instance['mr'] : '';
$mb = isset($instance['mb']) ? $instance['mb'] : '';
$lr = isset($instance['lr']) ? $instance['lr'] : '';
$lb = isset($instance['lb']) ? $instance['lb'] : '';
?>
Depending on there sizes, fill here the IDs of the units you want to display.
/*初期値:300x250 - Medium rectangle*/
/*初期値:160x600 - Wide skyscraper*/
/*初期値:320x50 - Mobile banner*/
'.$after_widget;
}
}
add_action('widgets_init', create_function('', 'register_widget("ResponsiveAdsenseWidget");'));
?>
数値は必要なサイズに応じて適宜、調整してください。自己責任で。
あとはウィジェットの管理画面で、該当のAdsense番号を追加して完了。
チェックはこちらでやると便利です。
追記
この記事を書いた直後に、すでにGoogle Adsenseがレスポンシブ対応していることを知りました。
Google Adsenseがレスポンシブデザインでも柔軟に利用可能にポリシー改訂！Webサイトの収益を更に効率化しよう！
最近、情報収集を怠っていたツケですね。。。
しかし、この方法でもレスポンシブデザインでサイドバーで広告を表示する場合の切り替えが思ったようにいかず、はみ出す現象は解決しなかったため、結局プラグイン改造アプローチを採用したままです。難しいものですね。
[ad]