今まで「レクタングル(中)300×250」のみしか使用していなかったものを、試験的にレスポンシブタイプも導入してみることにしました。
そう易々と収益があげられるとは思っておりませんが、広告もブログデザインの一部ということでとりあえずやってみようかと。
ブログに馴染むように、また、記事を読む際の邪魔にならないようにバランスを保ちつつ、表示サイズの使い分けと配置の調整を行っていきたいと思います。
本記事は「はてなブログ」（当時のテーマはレスポンシブデザイン「Brooklyn」）を使用していた頃の内容になっています。
2020年2月現在、WordPressテーマ「WING（AFFINGER5）」を使用しているので、広告の表示も自由度が高く、作業もとても楽になっています。
【Google AdSense】変更前の広告表示サイズと配置場所(PC)
僕が以前まで広告を配置していた場所と表示サイズについてです。
記事内にある広告は3つ——というより、広告ユニットは3つまでしか置けません。※追記：2016年8月から広告上限が撤廃されました。
- 右側サイドバーの一番上に1つ
- 記事下に2つ横並び
サイズはすべて「レクタングル(中)300×250」を使用していました。
基本的にアドセンスを横並べに2つ表示する場合はレクタングル広告(正方形に近い長方形)を並べるので、ダブルレクタングルと呼ばれていたりもします。
ダブルレクタングルは収益アップにもかなり効果的な配置になるので、非常におすすめなアドセン配置の1つになっています。
「Brooklyn」にする前のスマホデザインではレスポンシブ広告を使用
ちなみに、レスポンシブWebデザインテーマ「Brooklyn」に変更する前のスマホデザインには、レスポンシブタイプの広告を設置していました。
サイドバーに「レクタングル(中)300×250」を表示する代わりに、トップやカテゴリーを含む一覧のヘッダー下に表示していたんですね。
画像内の広告が縦に並んでいる箇所に「本当はダメ。」と表記がありますが、これについては次の項目で説明していきたいと思います。
アドセンスの規約違反に注意
- コンテンツ向けアドセンスのユニットは、パソコン版・スマホ版のウェブサイトは1ページに３つまで。ハイエンド携帯端末は３つ、モバイルのコンテンツ向けは１つ
1つの表示可能なページ（1 ビュー）に表示できるモバイルコンテンツ向けAdSenseの広告ユニットは1つのみ - クリックを誘導する文言を書いたりしても駄目
- もちろん、自分でクリックしたり、その他ソフトを使っても禁止
- コンテンツと区別がつかない配置や配色などもやっちゃダメ(みたい）
- 検索ユニットは1ページに２つ
- リンクユニットも３つまで
広告上限については2016年8月から撤廃されました。
僕は特に何も考えずに広告を2つ並べて使っていましたが、これ、スマホだと規約違反みたいです。
「1ビューに表示できるモバイルコンテンツ向けAdSenseの広告ユニットは1つのみ」となっていますね。
つまり、表示可能な1ページに広告ユニットは2つあってはいけないのです。Oh……。
レスポンシブデザインWebテーマに変更後、広告表示サイズ＆配置場所を調整
そして、こちらがレスポンシブデザインテーマに変更後、広告位置を調整したもの。
- サイドバーの一番上にレスポンシブタイプが1つ
- 記事上にレスポンシブタイプが1つ
- 記事下にレスポンシブタイプが1つ
レスポンシブデザインWebテーマでは、パソコン＆スマホでの広告表示を同時に考える必要がある
変更点
- 記事下に横2つ並んでいたもののうち1つが記事上に移動
- 3つ全ての広告サイズをレスポンシブタイプに変更
これでスマホ側でも広告が適度に表示され、ブログ全体のバランスを崩さずに表示させることができました。
パソコンとスマホでそれぞれ違うサイズの広告を表示させる
パソコンとスマホ、それぞれに合った広告の表示サイズを考えてみました。
アドセンス的には「大きければ大きいほどジャスティス」なのでしょうが、僕はどちらかというと「デザインの美しさ」を優先気味に調整しました。
実践したレイアウト方法
記事上
- パソコン表示：728×90のビッグバナーサイズ
- スマホ表示：320×100のバナーサイズ
サイドバー
- パソコン表示：336×280のレクタングル(大)サイズ
- スマホ表示：300×250のレクタングル(中)サイズ
記事下
- パソコン表示：336×280のレクタングル(大)サイズ
- スマホ表示：300×250のレクタングル(中)サイズ
アドセンス広告をそれぞれの媒体で最適化してくれるようにCSSを編集していきます。
実際に僕が手直ししたコードがこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <p style=”text-align: center; font-size: 70%;”>スポンサーリンク</p> <style> .ad-unit-name { width: 320px; height: 100px; } / @media(min-width: 500px) { .ad-unit-name { width: 468px; height: 60px; } } / @media(min-width: 800px) { .ad-unit-name { width: 780px; height: 90px; } } </style> <div class=”ad-unit-name”> <script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script> <!– ad-unit-name –> <ins class=”adsbygoogle” style=”display:block” data-ad-client=”ca-pub-1234567890123456″ data-ad-slot=”0987654321″ data-ad-format=”auto”></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> |
デフォルトの状態をスマホベースに考えていきます。
例として、記事上のレスポンシブタイプのものを挙げてみます。
スマホでは320×100のバナータイプを表示させ、パソコンでは780×90のビッグバナータイプを表示するように指定してあげるだけです。
アドセンス広告をセンタリング
あと、見栄えが良いようにアドセンス広告をセンターに配置しています。
参考Googleアドセンス記事中央にセンタリングする方法|はてなブログカスタマイズ - Yukihy Life本当にやりたかったこと
本当はレスポンシブWebデザインテーマを使用したまま、パソコンとスマホの広告配置を変えたかったのですが、はてなブログではそれができないようです。
いろいろ調べてみたものの、それらしい情報を見つけることができませんでした。
WordPressの場合はphpをいじることでそれが可能みたいですね。
ちなみに、これが本来の理想でした。
記事上
- パソコン表示：728×90のビッグバナーサイズ
- スマホ表示：320×100のバナーサイズ
サイドバー
- スマホ表示：300×250のレクタングル(中)サイズ
記事下
- パソコン表示：336×280のレクタングル(大)サイズを2つ(ダブルレクタングル)
- スマホ表示：300×250のレクタングル(中)サイズ
パソコンとスマホで別々のデザインを作成すれば解決する話なんですが……。
まとめと余談
ということで、以前よりも広告配置がバラけるように設定してみました。
トライ＆エラーの繰り返しで行っているため、あくまで参考程度、自己責任でよろしくお願い致します。間違いや修正点などございましたらお知らせください。
正直、この処置が収益にどう関わってくるのかは今のところ不明ですが、「ジュースが1本多く買える」程度の効果があれば嬉しいですよね。
スマホでのファーストビューについて
現段階のままだと、記事上にグローバルメニューがあるせいでファーストビューで本文が見えておりません……。
これが果たして"Google AdSenseの規約違反"なのかは不明ですが、どちらにせよあまりよろしくないことだと思います。
そもそも、このSNSシェアボタンの位置に意味があるのかさえ不明ですが……。
-
雑記ブログでも月間収益10万円｜稼ぐまでにやったこと＆コツとか
-
雑記ブログでも月間収益30万円｜稼ぐまでの習慣とおすすめの本とか