アドセンスをSTINGER8の記事一覧に挟み込んで違和感なく表示させる！

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

Googleアドセンスで毎月安定して収入を得ている方は本当に尊敬します！

自由を何よりも求めている私にもそんな収益が欲しいと貪欲に思っている訳ですが、現実はそんなに甘くはありませんね。

アドセンスには「クリック収益」と実はもうひとつ、「インプレッション収益」というクリックされなくても、収益が発生するありがたいものがあります。

単価自体は微々たるものですが、私のような弱者でも収益を獲得できるチャンスがあり、ハードルが低くて魅力的です。

今までSTINGER8の記事内にはアドセンス広告を貼っていましたが、トップページの記事一覧などには全く表示させていませんでした。

そこで記事一覧の中にアドセンス広告を挟み込んで、違和感なく表示させることで多少なりとも収益率が上がる可能性があることに気がつきました。

「今更気がついたの？」「遅すぎでしょ！」という内容かもしれませんが、私のようにまだ実践されていない方が地球上を探せば必ずどこかにいると信じているので、その方の為にSTINGER8の記事一覧にアドセンス広告を挟み込方法をご紹介します。

アドセンス挟み込み完成系イメージ

私がSTINGER8で使用している記事一覧ページは、カード型の１列スタイルなのでアドセンス広告を表示させるとしたら、以下のような挟み込みパターンになるかと思います。

STINGER8のカード型表示に興味がある方は、以下の記事でその方法をご紹介していますので、カスタマイズされたい場合は参考にされて下さい。

参考：STINGER8の記事一覧をおしゃれなカード型にカスタマイズする方法

１ページに表示される記事は基本的に10記事程度がほとんどだと思うので、広告が多すぎるとユーザビリティの低下にも繋がりますし、１～３広告くらいが自然でしょう。

因みにワードプレスの「設定」⇒「表示設定」から、１ページに表示する最大記事数を変更することができます。

すでにトップページ上部やサイドバーなどにアドセンス広告を表示されている場合は、バランスを見て調整をされた方がいいかもしれません。

広告を記事一覧に挟み込む方法

まずはアドセンス広告の挟み込みカスタマイズで使用するのは、テーマファイル内にある「itiran.php」になります。

ファイルの編集は基本的にアップデートされても編集データが消えない、「子テーマ」を使用するようにして下さい。

「itiran.php」を編集する

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

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

上記コードの後ろの部分に「$loop_count++;」を以下のように追記します。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $loop_count++; ?>

続いてアドセンス広告を記事一覧に挿入するコードを、itiran.phpファイル内に追加する為に下部にある以下のコードを探します。

			</dd>
		</dl>
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>

アドセンスを１～３広告挟み込む場合

アドセンス広告を１～３つ記事一覧に挟み込み表示させたい場合は、上記コード内にある「</dl>」のすぐ下に、以下の３～９列目のコードを追加して下さい。

			</dd>
		</dl>
<?php if ( $loop_count == 1 or $loop_count == 4 or $loop_count == 8 ) : ?>
<div class="itiran-ad">
<p>スポンサーリンク</p>
<!-- ここにアドセンスコードや画像コードを追加 -->

</div>
<?php endif; ?>
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>

こちらのコードは「うぇぶあしび」さんの「WordPress：記事一覧ページにアドセンス広告を設置する方法」で紹介されているコードをお借りしました。(ありがとうございます！)

スポンサーリンクのラベルが必要ないという方は、「<p>スポンサーリンク</p>」を削除して下さい。

「$loop_count == １or４or８」の部分がアドセンス広告を挿入する場所であり、「１記事目の下・４記事目の下・８記事目の下」という感じで表示されます。

数字は任意のものに変えることができるので、好きな場所に挟み込むことができますが、「１・２・３」や「２・４・６」のように連続してしまうと、ユーザーにも嫌がられてしまうので極力間隔をあけるように調整しましょう。

表示させる広告は「<?php if ( $loop_count == 1 or $loop_count == 4 ) : ?>」のように、コードを変更するだけで３つから１つに、１つから２つに増減させることも可能です。

「ここにアドセンスコードや画像コードを追加」のすぐ下に、取得したアドセンスコードを追加します。

アドセンス広告で記事一覧に特にオススメなのが「インフィード広告」で、まるで記事に溶け込むような違和感のないデザインに編集できるのが特徴です。

また、アドセンス以外にも独自で作成したコンテンツや、アフィリエイト広告などでも活用できるかと思います。

ただし、この方法では１つの広告しか追加できない為、３ヶ所とも同じ広告が表示されてしまう場合があるので注意しましょう。

別々の広告を挟み込む場合

上記の場合とは違って記事一覧に別々の広告を表示したい！という方は、こちらの３～17列目のコードを追記します。

			</dd>
		</dl>
<?php if ( $loop_count == 1 ) : ?>
<div class="itiran-ad">
<p>スポンサーリンク</p>
<!-- ここにアドセンスコードや画像コードを追加 -->

<?php if ( $loop_count == 4 ) : ?>
<p>スポンサーリンク</p>
<!-- ここにアドセンスコードや画像コードを追加 -->

<?php if ( $loop_count == 8 ) : ?>
<p>スポンサーリンク</p>
<!-- ここにアドセンスコードや画像コードを追加 -->

</div>
<?php endif; ?>
	<?php endwhile;
	else: ?>
		<p>記事がありません</p>

こちらのコードは「Y氏のWordPressブログ塾」さんの「ワードプレスの記事一覧ページにアドセンスや広告挿入」の内容を参考にさせて頂きました。(ありがとうございます！)

これによってそれぞれに表示させたいアドセンスコードなどを選択できるようになるので、状況によって広告の使い分けができたり、どの部分に表示させた広告が収益率の高い広告なのかも判別しやすくなります。

広告を複数入れ替えるのは面倒なことかもしれませんが、収益率が高まるのであれば利用しない手はないでしょう。

基本的にアドセンス広告の利用がメインの方であれば、１つ目の方法で問題ないと思いますし、今後アフィリエイトなど複数のビジネスを始めた場合には、２つ目の方法を利用するといった使い分けができます。

「style.css」でデザインを調整する

あとは違和感なくアドセンス広告が記事一覧に挟み込まれるように、広告の配置やラベルの位置などをstyle.cssで微調整していきます。

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

STINGER8で今使用されている記事一覧のデザインなどによって、内容を調整する必要があるので自分のブログに合ったものを使用されてみて下さい。