スマホでも3つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活&記事下広告右をサイドバー最後に表示】(改訂版)

   2015/06/23

Gush2のデフォルトでは、スマホで表示されるアドセンスは1つです。
「3つまで貼れるのだから貼りたいよね」ということでカスタマイズしました。

メイン上部広告をスマホでも表示

メイン上部広告をスマホでも表示するようにしました。
幅広画面でも見栄えが良いように左右マージンautoにしてます。
参考:メイン上部広告の仕様変更とカスタマイズ方法 |Gush2説明書

スマホ出力抑制部分の変更(php)

各ページのphpのスマホ出力抑制部分を変更しました。
スマホで出力したい場合 |Gush2説明書」のとおりに条件分岐文を削除しただけです。

  • home.php トップページ
  • index.php 検索結果のページ
  • archive.php カテゴリー別、タグ別、月別のページ
  • single.php 個別記事ページ

上記4つのphpから、下記水色の3行を消しました。

画面幅でハーフバナーとモバイルバナーを切り替え(CSS)

ハーフバナー(234×60)はAdSenseの推奨サイズではないので、推奨サイズであるモバイルビッグバナー(320×100)を表示したいと思いました。
Gush2説明書に従って画面幅320に対応する記述「margin: 0 -8px 24px;」にすると、左寄せ表示になって、幅広画面ではバランスが悪いです。
なので、「margin: 0 auto 24px;」は維持し、画面幅によってバナーサイズを切り替えるようにしました。

  • 360未満 ハーフバナー(234×60)(デフォルトで記述済み)
  • 360以上480未満 記事タイトル全文が見えるようモバイルバナー(320×50)
  • 480以上 推奨サイズであるモバイルビッグバナー(320×100)

画面幅360以上用の記述を「ここからタブレット表示設定」の直前に入れました。

記事下広告右をサイドバーの最後に表示

サイドバーの最後に記事下広告右を表示するようにしました。
記事下広告右を使ったのは、コード変更が少なくて簡単にできるからです。
サイドバーの最後にしたのは、「モバイルのAdSenseは1ビューに1つまで」というポリシーに違反しないためです。
AdSense日本版公式ブログ:スマートフォン向けサイトへの最適化
AdSenseヘルプ:1 ページに配置可能な広告の上限|広告の配置に関するポリシー
参考:アドセンス設置の前に確認しておく事|WordPressにアドセンス広告を設置する方法

sidebar.phpに広告表示の記述を追加

</aside>の直前に、 “記事下広告右(efa_r)をスマホのみ表示する記述”を加えただけです。</aside>は、sidebar.phpの最後のほうにあります。

スマホではサイドバーを表示しないように404.phpを変更(大事)

サイドバーに広告を表示すると、404ページでも広告が表示されてしまいます。
404ページにAdSenseを貼るとポリシー違反なので、非表示にしなければなりません。
AdSenseヘルプ:手続き完了ページ、離脱ページ、ログインページ、エラーページでの広告掲載|広告の配置に関するポリシー
参考:アドセンスNG集-絶対に覚えておきたい規約違反事項一覧

”共通のサイドバーから広告だけを404ページの時だけ消す”のは難しそうなので、サイドバーごと消すことにしました。

404.phpの最後から2行目のサイドバー表示関数get_sidebar()をスマホ以外だけ実行するように変更しました。

2015/6/23追記:
”共通のサイドバーから広告だけを404ページの時だけ消す”方法がわかったので記事にしました。
404エラーページにAdSenseを表示しないようサイドバーごと消していたのを戻して、AdSenseだけを非表示にしたよ。

広告表示を中央寄せに

幅広画面では、レクタングル(300×250)の左寄せが気になったので、中央寄せにしました。
要素の横幅(width)を設定して、左右マージン(margin)をautoにすると、中央寄せになります。
参考:margin と auto と width の関係|Web Design KOJIKA17
   CSS – margin: auto;|CSSレイアウトを学ぶ

サイドバーの広告

“サイドバー広告”で検索します。side_adの設定を変更します。

個別記事下の広告

変更箇所は2箇所です。

“記事下広告”で検索します。entry_footer_adのところに「width:300px;」を追加します。

スマホ用配置を変更すると、タブレット用(幅768以上)配置にも影響が出るので、元に戻す記述を加えます。
「768px 広告スペース」で検索して、entry_footer_adのところに「width:auto;」を追加します。

まとめ

コード変更の少ない簡単な方法を選んでカスタマイズしてみました。
AdSenseに関するカスタマイズでは、ポリシー違反にならないことが一番大事です。ポリシーの再確認は必須だと肝に銘じました。

注)コードの行番号は、だいたいの位置を示しています。きっちり正確ではありません。

  • このエントリーをはてなブックマークに追加
  • Pocket
書いてる人 さらさらり
お里湯さんのひよこ|ぴよたそ

コメント一覧

  1. TN0816 より:

    このブログとても参考になりました!
    1つわからないところがあるのですが、ここに書かれているとおりにやったのですが、サイドバーのキーワード検索の下にもも広告が表示されてしまい、どうしたらいいのかわからなくて困っています。アドセンスはメイン上部にレスポンシブ広告を入れて、記事下左と記事下右に300×250を入れています。

    • さらさらり さらさらり より:

      TN0816さま
      ご訪問ありがとうございます。

      キーワード検索の下に表示されるのは、サイド広告300pxです。
      外観>ウィジェット>サイド広告300px
      に、広告コードを書いているのではないでしょうか?

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

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