スマホでも3つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活&記事下広告右をサイドバー最後に表示】(改訂版)
Gush2のデフォルトでは、スマホで表示されるアドセンスは1つです。
「3つまで貼れるのだから貼りたいよね」ということでカスタマイズしました。
目次
メイン上部広告をスマホでも表示
メイン上部広告をスマホでも表示するようにしました。
幅広画面でも見栄えが良いように左右マージンautoにしてます。
参考:メイン上部広告の仕様変更とカスタマイズ方法 |Gush2説明書
スマホ出力抑制部分の変更(php)
各ページのphpのスマホ出力抑制部分を変更しました。
「スマホで出力したい場合 |Gush2説明書」のとおりに条件分岐文を削除しただけです。
- home.php トップページ
- index.php 検索結果のページ
- archive.php カテゴリー別、タグ別、月別のページ
- single.php 個別記事ページ
上記4つのphpから、下記水色の3行を消しました。
7 8 9 10 11 12 |
<!-- メイン上部 728*90 スマホ非表示--> <?php if(is_mobile()) { ?> <?php } else { ?> <?php dynamic_sidebar( 'main-top' ); ?> <?php } ?> <!-- //メイン上部 728*90 --> |
7 8 9 |
<!-- メイン上部 728*90 --> <?php dynamic_sidebar( 'main-top' ); ?> <!-- //メイン上部 728*90 --> |
画面幅でハーフバナーとモバイルバナーを切り替え(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以上用の記述を「ここからタブレット表示設定」の直前に入れました。
1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 |
/*-------------------------------------- 大きめスマホ表示設定 --------------------------------------*/ @media screen and (min-width : 360px){ /* メイン上部 */ .entrybodytop_ad { width: 320px; height: 50px; margin: 0 auto 24px; overflow: hidden; } } @media screen and (min-width : 480px){ /* メイン上部 */ .entrybodytop_ad { width: 320px; height: 100px; margin: 0 auto 24px; overflow: hidden; } } /*-------------------------------------- ここからタブレット表示設定 --------------------------------------*/ @media screen and (min-width : 768px){ |
記事下広告右をサイドバーの最後に表示
サイドバーの最後に記事下広告右を表示するようにしました。
記事下広告右を使ったのは、コード変更が少なくて簡単にできるからです。
サイドバーの最後にしたのは、「モバイルのAdSenseは1ビューに1つまで」というポリシーに違反しないためです。
AdSense日本版公式ブログ:スマートフォン向けサイトへの最適化
AdSenseヘルプ:1 ページに配置可能な広告の上限|広告の配置に関するポリシー
参考:アドセンス設置の前に確認しておく事|WordPressにアドセンス広告を設置する方法
</aside>の直前に、 “記事下広告右(efa_r)をスマホのみ表示する記述”を加えただけです。</aside>は、sidebar.phpの最後のほうにあります。
69 70 71 72 73 74 75 76 77 78 79 80 |
<!--新着記事ここまで--> <div class="side_ad"> <!--スマホのみ表示--> <?php if(is_mobile()) { ?> <?php dynamic_sidebar( 'efa_r' ); ?> <?php } ?> <!--//スマホのみ表示--> </div> </aside> </div><!--//sub--> |
スマホではサイドバーを表示しないように404.phpを変更(大事)
サイドバーに広告を表示すると、404ページでも広告が表示されてしまいます。
404ページにAdSenseを貼るとポリシー違反なので、非表示にしなければなりません。
AdSenseヘルプ:手続き完了ページ、離脱ページ、ログインページ、エラーページでの広告掲載|広告の配置に関するポリシー
参考:アドセンスNG集-絶対に覚えておきたい規約違反事項一覧
”共通のサイドバーから広告だけを404ページの時だけ消す”のは難しそうなので、サイドバーごと消すことにしました。
404.phpの最後から2行目のサイドバー表示関数get_sidebar()をスマホ以外だけ実行するように変更しました。
16 17 18 19 |
</div><!--//main--> <?php get_sidebar(); ?> <?php get_footer(); ?> |
16 17 18 19 20 21 22 23 |
</div><!--//main--> <!--スマホ以外表示--> <?php if(!is_mobile()) { ?> <?php get_sidebar(); ?> <?php } ?> <!--//スマホ以外表示--> <?php get_footer(); ?> |
”共通のサイドバーから広告だけを404ページの時だけ消す”方法がわかったので記事にしました。
404エラーページにAdSenseを表示しないようサイドバーごと消していたのを戻して、AdSenseだけを非表示にしたよ。
広告表示を中央寄せに
幅広画面では、レクタングル(300×250)の左寄せが気になったので、中央寄せにしました。
要素の横幅(width)を設定して、左右マージン(margin)をautoにすると、中央寄せになります。
参考:margin と auto と width の関係|Web Design KOJIKA17
CSS – margin: auto;|CSSレイアウトを学ぶ
サイドバーの広告
“サイドバー広告”で検索します。side_adの設定を変更します。
1044 1045 1046 1047 |
/* サイドバー広告エリア */ #sub .side_ad { margin-bottom: 36px; } |
1047 1048 1049 1050 1051 |
/* サイドバー広告エリア */ #sub .side_ad { width: 300px; margin: 0 auto 36px; } |
個別記事下の広告
変更箇所は2箇所です。
“記事下広告”で検索します。entry_footer_adのところに「width:300px;」を追加します。
703 704 705 706 |
/* 記事下広告 */ #entry_footer_ad { margin: 10px auto 36px auto; } |
703 704 705 706 707 |
/* 記事下広告 */ #entry_footer_ad { width: 300px; margin: 10px auto 36px auto; } |
スマホ用配置を変更すると、タブレット用(幅768以上)配置にも影響が出るので、元に戻す記述を加えます。
「768px 広告スペース」で検索して、entry_footer_adのところに「width:auto;」を追加します。
1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 |
/*-------------------------------------- 768px 広告スペース --------------------------------------*/ .entrybodytop_ad { width: 600px; height: 60px; margin: 0 auto 36px; display: block; } .entrybodybottom_ad { width: 600px; height: 60px; margin: 36px auto 0; display: block; } #entry_footer_ad { margin: 36px 0; } |
1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 |
/*-------------------------------------- 768px 広告スペース --------------------------------------*/ .entrybodytop_ad { width: 600px; height: 60px; margin: 0 auto 36px; display: block; } .entrybodybottom_ad { width: 600px; height: 60px; margin: 36px auto 0; display: block; } #entry_footer_ad { width: auto; margin: 36px 0; } |
まとめ
コード変更の少ない簡単な方法を選んでカスタマイズしてみました。
AdSenseに関するカスタマイズでは、ポリシー違反にならないことが一番大事です。ポリシーの再確認は必須だと肝に銘じました。
注)コードの行番号は、だいたいの位置を示しています。きっちり正確ではありません。
このブログとても参考になりました!
1つわからないところがあるのですが、ここに書かれているとおりにやったのですが、サイドバーのキーワード検索の下にもも広告が表示されてしまい、どうしたらいいのかわからなくて困っています。アドセンスはメイン上部にレスポンシブ広告を入れて、記事下左と記事下右に300×250を入れています。