このブログでは、サーバの維持費を賄う(手助けになればぐらい)ためGoogle AdSenseのバナー広告を貼っている。
先日、出先で見返したいメモがあってこのブログをスマートフォン(Android)端末で開いてみたところ、AdSenseのバナー広告がページの枠から大きくはみ出て表示されていた。
普段はPCから閲覧しているので気付かなかったがこのままだと相当見苦しいので、Web制作の初心者なりにスマホに対応する手立てを調べてみた。
１ページに貼ることのできる広告の数
まず始めに、１ページに貼ることのできるGoogle Adsenseのバナー広告数を確認する。規約で決まっているので必ず守ること。
PC環境の場合は、1つのページに対して表示できる広告数は最大3つ。
スマホ環境の場合は、画面内に表示できる広告数は1つに限られている。ただし、スクロールしなければ表示されないのであれば、ページの上端と下端などに分けて広告を表示することも可能。
フィーチャーフォン（ガラケー）用の広告は１ページにつき1つだが、AdsenseのコードがPC、スマホ用と別になっているので特に気にしなくていい。(今回も使用しない)
ヘッダー部分の広告
WordPressの管理画面から、「外観」→「テーマ編集」→「ヘッダー(header.php)」を選択する。ブログのタイトルとキャッチフレーズの下にバナー広告を表示させたいので、
<h2 class="site-description"></h2>
で囲まれた部分を探し、その下にバナー広告のコードを入れる。
この部分に入れるバナーは、PCでは横長に見せたいが、モバイル環境だとはみ出てしまうので横幅の狭い物にを見せたい。そこで、Wordpressの”wp_is_mobile()”関数で環境を判別し、表示させるバナー広告を分ける。以下のような感じで書く。
<h1 class="site-title">サイトのタイトル</h1>
<h2 class="site-description">キャッチフレーズ</h2>
<?php if(wp_is_mobile()) { ?>
<!--for mobile-->
モバイル環境用のバナー広告コード
<?php } else { ?>
<!--for pc-->
PC環境用のバナー広告コード
<?php } ?>
サイドバー部分の広告
WordPressの管理画面から、「外観」→「ウィジェット」を選択。「利用できるウィジェット」の中にある「テキスト」をメインサイドバーの中にドラッグ&ドロップする。テキストウィジェットのタイトルは空白にして、内容部分にバナー広告のコードを貼付けて保存する。
この部分はスマホでは表示されないので、PC用に縦長の広告を使用する。
スマホでブログを閲覧すると、サイドバーに相当するウィジェットは記事一覧の下に表示されていた。”wp_is_mobile()”関数を使って、モバイル環境では表示されないようにしておいた方が見やすいかも。
また、テキストウィジェットでPHPを動かす為に「PHP Text Widget」というプラグインをインストールして、あらかじめ有効化しておく。
<?php if(!wp_is_mobile()) { ?>
<!--for PC-->
PC環境用のバナー広告コード
<?php } ?>
記事下部分の広告
WordPressの管理画面から、「外観」→「テーマ編集」→「単一記事の投稿(single.php)」を選択する。現在見ている投稿の前後に対するリンクの下に広告を表示させたいので、
<nav class="nav-single"></nav>
タグで囲まれている部分を探し、その下にコードを加える。
スマホは横300pxぐらい、PCではもう少し大きめのレクタングル広告を表示させる。
<nav class="nav-single">前後のページへのナビゲーション</nav><!-- .nav-single -->
<?php if(wp_is_mobile()) { ?>
<!--for mobile-->
モバイル環境用のバナー広告コード
<?php } else { ?>
<!--for pc-->
PC環境用のバナー広告コード
<?php } ?>