STINGER8でサイドバーのアドセンスをPCとスマホで自由に使い分ける

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

ワードプレスブログではアドセンス広告の収益効果が高い配置場所として、「記事上」「記事中」「記事下」がよく利用されていますが、サイドバーの上部もオススメな表示場所とされています。

だた、サイドバーの方はクリック率が低かったり、他と違って収益性が低いという情報をネット上で見かけることが多くなりました。

サイドバーのアドセンスは、「ラージスカイスクレイパー」という縦長のインパクトの大きい広告ユニットが使用できるので、ブログの訪問者にアピールしやすいのが特徴です。

とはいえ、サイドバーの広告表示は賛否両論の意見があり、私も今まで表示させるか様子見をしていましたが、表示されるだけで収益が発生する「インプレッション収益」のことも考えると、「クリックされたらラッキー！」程度にアドセンス広告を設置してみることにしました。

ラージスカイスクレイパーを表示させる際の問題点や、PCとスマホで使い分ける方法についてご紹介していきます。

アドセンスポリシーに注意

アドセンスの広告ユニット「ラージスカイスクレイパー」は、横300×縦600のかなり大きい広告サイズとなっているので、クリックされるかは別にしても目立つことは間違いありません。

ただし、ラージスカイスクレイパーをスマホでそのまま使用してしまうと、画面が小さい分全画面が広告で埋まってしまうので、「アドセンスポリシー違反」になってしまいます。

また、画面内に２つ以上の広告が入ってしまうことも違反になるので、この辺のことを注意しながらアドセンス広告を設置していく必要があります。

ブログのサイドバーにラージスカイスクレイパーを設置する場合は、PCとは別にスマホ用の広告サイズを用意して使い分ける作業を行っていくことになります。

ここでは私がワードプレスのブログテーマで使用しているSTINGER8で、サイドバー広告を使い分けるカスタマイズを行っていきます。

サイドバーのアドセンスを使い分ける方法

サイドバーのアドセンス広告をPCとスマホで使い分ける方法は以下の２種類があります。

「PHP Code Widget」プラグインを使う
テーマファイル「sidebar.php」を編集する

プラグインを導入すると新しいウィジェットがワードプレスに追加されて、PCとスマホを使い分ける為の「PHPコード」が使えるようになるので、ウィジェットで好きな場所に設置することもできます。

ですが、プラグインが増えすぎるとサーバーに負荷がかかってしまうので、ここではテーマファイルを使った方法で進めていきたいと思います。

「sidebar.php」を編集する

ファイルの編集は子テーマで行うことと、コードの入力ミスで不都合が起きてしまった場合にすぐ対処できるよう、編集前にタブを２つ開いておくなどの準備をしておきましょう。

ワードプレス管理画面から「外観」⇒「テーマの編集」に移動し、「sidebar.php」ファイルを開いて上部に以下のコードがあるか確認しましょう。

<div id="side">
	<div class="st-aside">

		<?php if ( is_active_sidebar( 10 ) ) { ?>
			<div class="side-topad">

アドセンス広告をPCとスマホで使い分ける為に、上記コード内に以下の３～９列目のコードを追加します。

<div id="side">
	<div class="st-aside">
<?php if( st_is_mobile()) : ?>
<!-- スマホ用広告コードを挿入 -->

<?php else: ?>
<!-- PC用広告コードを挿入 -->

<?php endif; ?>
		<?php if ( is_active_sidebar( 10 ) ) { ?>
			<div class="side-topad">

STINGER以外のブログテーマをお使いの方は、上記３列目のコード「st_is_mobile」の部分を「wp_is_mobile」に変更してお使い下さい。

私が使用したアドセンスの広告ユニットは、スマホが「レスポンシブ」でPCが「ラージスカイスクレイパー」になります。

広告は各ブログのデザインに合ったものを使用されるか、アドセンス以外のものでも表示が可能なので、独自コンテンツやアフィリエイト広告などを活用されるといいかと思います。

余白やラベルを追加・調整する場合は

アドセンス広告の上部に「スポンサーリンク」のラベルを追加したり、広告下の余白をもう少し広くしたいという場合は、先程のコードに以下の１、２列目と９列目のコードを追記します。

<div class="sidebar-ad">
<p>スポンサーリンク</p>
<?php if( st_is_mobile()) : ?>
<!-- スマホ用広告コードを挿入 -->

<?php else: ?>
<!-- PC用広告コードを挿入 -->

</div>
<?php endif; ?>

あとは「style.css」ファイルに、以下のコードをコピー＆ペーストして下さい。

/*-- サイドバーのアドセンス広告 --*/
.sidebar-ad {
    text-align: center;/*中央寄せ*/
    margin-bottom: 30px;/*広告下の余白*/
}
.sidebar-ad p {/*アドセンスラベル*/
    font-size: 14px;/*文字サイズ*/
    color: #999;/*文字色*/
    margin-bottom: 3px;/*ラベル下の余白*/
}

ラベルと広告の余白や文字サイズ、文字色などが自由に調整できるので好みのものに変更してお使い下さい。