スマホでも広告表示3つになるようにGush2カスタマイズしてみました。 ”メイン上部広告復活”&”記事下広告右をサイドバー最後に表示”(2015/4/8追記&訂正)
このページには誤りがありますので、書き直しました。
お手数ですが、改訂版のほうをご覧くださいませ。
スマホでも3つAdSenseを表示するGush2カスタマイズ(改訂版)
何とも貧乏性なんですね、私は。「AdSense3つ貼らないともったいない」って気がしちゃうのです。スマホ替わりにXperia Z Ultraを使っていて、画面が大きいから、「もっと広告表示してもいいんじゃない?」と思えるのです。
「小さい画面で見ていたら広告だらけと思うのかな?嫌われちゃうのかな?」と迷っていたのだけど、こんな記事を見つけまして、「後から増えるのはよくないな」と思い、さっさと貼ることにしました。
こんな記事:初心者がブログに広告を掲載しはじめるのはいつがベスト?
目次
メイン上部広告をスマホでも表示
メイン上部広告をスマホでも表示するようにしました。
幅広画面でも見栄えが良いように左右マージンautoにしてます。
参考:メイン上部広告の仕様変更とカスタマイズ方法 |Gush2説明書
スマホ出力抑制部分の変更(php)
各ページのphpの出力抑制部分を変更しました。
「スマホで出力したい場合 |Gush2説明書」のとおりに条件分岐文を削除しただけです。
- home.php トップページ
- index.php 検索結果のページ
- archive.php カテゴリー別、タグ別、月別のページ
- single.php 個別記事ページ
画面幅360でハーフバナーとモバイルバナーを切り替え(CSS)(2015/4/8訂正)
ハーフバナー(234×60)はAdSenseの推奨サイズじゃないので、モバイルビッグバナー(320×100)を表示したいと思いました。
Gush2説明書に従って画面幅320に対応する記述「margin: 0 -8px 24px;」にすると、左寄せ表示になって、ズルトラのような大画面ではバランスが悪いです。
なので、「margin: 0 auto 24px;」は維持し、画面幅によってハーフバナーとモバイルバナーを切り替えるようにしました。
AdSenseの推奨サイズはモバイルビッグバナー(320×100)なのですが、モバイルビッグバナーにしたところ、“レクタングルの下部が切れたような広告”が頻繁に表示されたので、モバイルバナー(320×50)にしました。
ごめんなさい。私がミスっていました。320×50なのに300×50にしてました。だからレクタングルが表示されてたようです。
正しくはこちらです。
画面幅360以上用の記述を「ここからタブレット表示設定」の直前に入れただけです。
1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 |
/*-------------------------------------- 大きめスマホ表示設定 --------------------------------------*/ @media screen and (min-width : 360px){ /* メイン上部 */ .entrybodytop_ad { width: 320px; height: 50px; margin: 0 auto 24px; overflow: hidden; } } /*-------------------------------------- ここからタブレット表示設定 --------------------------------------*/ @media screen and (min-width : 768px){ |
↓は間違いです。
1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 |
/*-------------------------------------- 大きめスマホ表示設定 --------------------------------------*/ @media screen and (min-width : 360px){ /* メイン上部 */ .entrybodytop_ad { width: 300px; height: 50px; margin: 0 auto 24px; overflow: hidden; } } /*-------------------------------------- ここからタブレット表示設定 --------------------------------------*/ @media screen and (min-width : 768px){ |
記事下広告右をサイドバーの最後に表示
ズルトラで見たとき、「スクロールの最後に広告あってもいいんじゃない?」と思ったのです。
スクロールの最後なら、「AdSenseは1ビューに1つまで」という規約も大丈夫でしょう。
参考:アドセンス設置の前に確認しておく事|WordPressにアドセンス広告を設置する方法
サイドバーの最後に入れることにしました。
修正が簡単なので、記事下広告右を使うことにしました。
</aside>の直前に、 “記事下広告右(efa_r)をスマホのみ表示する記述”を加えただけです。
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--> |
広告表示を中央寄せに
ズルトラで見ると、レクタングル(300×250)が左寄せになるのが気になるので、この機会に中央寄せにしました。
サイドバーの広告
“サイドバー広告”で検索して、「text-align: center;」を入れます。
1047 1048 1049 1050 1051 |
/* サイドバー広告エリア */ #sub .side_ad { text-align: center; margin-bottom: 36px; } |
個別記事下の広告
“記事下広告”で検索して、「text-align: center;」を入れます。
703 704 705 706 707 |
/* 記事下広告 */ #entry_footer_ad { text-align: center; margin: 10px auto 36px auto; } |
まとめ
メイン上部広告を復活させましたが、ファーストビューで「最初の記事の見出しは読める」ことは意識しました。
いろんな画面サイズの表示を確認するため、Chromeアドオン「User-Agent Switcher for Chrome」と「Window Resizer」を使いました。これらのアドオンについては、別に記事を書こうと思っています。
ポリシー違反になるので404ページからサイドバーを削除(2015/4/8追記)
“記事下広告をサイドバーの最後に表示”をしたら、404ページにも記事下広告が表示されてしまいます。
404ページにAdSenseを貼るとポリシー違反です。
ポリシー違反になるようなカスタマイズを公開して、ごめんなさい。
“記事下広告をサイドバーの最後に表示”をしたら、404ページの変更も行ってください。
やり方はこちらです。
404ページにAdSense貼ってたらポリシー違反なので、スマホ用404ページからサイドバーを消しました。
この記事へのコメントはこちら