STINGER7：記事下にアドセンスを横並びで設置する方法【ダブルレクタングル】

このブログもそろそろ2ヶ月になりますが、今のところアフィリエイトはアドセンスだけです。
コード貼り付けるだけであとはほったらかしで良いので楽ですよね（笑）

先日、読者様から記事下にアドセンス広告を横並びで設置する方法についてご質問いただきました。
通称「ダブルレクタングル」と呼ばれている設置方法ですね。

僕はアフィリエイトは始めたばかりですが、色々なブログでダブルレクタングルは「クリック率が上がる」なんて言われているので、このブログでは最初から横並びにしています。

ただ、詳しくは後述しますがスマホでは２つ並べることができないので、スマホ用の表示も対策しています。

STINGER7をお使いの方は参考になさってみてください。
それじゃあいってみよ！

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7：テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7：親テーマの任意のファイルを子テーマで編集する方法

アドセンスの配置場所はどこがいいの？

まずアドセンスの基本として、1ページ内に貼り付けることができるユニットは３つまで。
アクセス数の多いサイトだと４つ以上貼れるようになったりもするそうです。

そしてスマホでは同時に２つのアドセンス広告を表示してしまうと規約違反になります。
なのでPCとスマホでは配置場所を変えないといけないんですね。

当ブログの場合

冒頭で書いたように僕もアドセンスに関しては初心者なんですが、色々なアフィリエイターさんの記事を見るといくつか共通のポイントがありました。

ということで現在はこんな感じで配置しています↓

PCでの配置

スマホでの配置

PC、スマホ共に最初の広告は「H2見出しの前」です。
見出しの前にアドセンスを表示する方法は以前に書きましたのでこちらをどうぞ↓

これは簡単！WordPressで最初のH2見出しの前にアドセンス広告を自動挿入

...

web-ashibi.net

2016.02.28

そしてPCでは記事下に残り２つの広告を並べて表示。
スマホでは記事下に１つと、関連記事を挟んでその下にもう１つ配置しています。

各広告のパフォーマンス

まだ２ヶ月ぐらいしか経っていませんが、各広告のクリック率はこんな感じです↓

H2見出し前・・・45%
PC記事下右側・・・34%
PC記事下左側・・・14%
スマホ記事下・・・5%

やっぱりH2見出し前がアツいですね！笑
そして記事下のダブルレクタングルも結構クリックされています。

当ブログの内容的に、PCから見ている方が多いのでスマホではあんまりクリックされてないですね。

もっとアクセスが増えたら他の配置も試してみようと思いますが、今のところこの配置も悪くないっぽいです。
ということで実際にやっている方法をご紹介！

配置するアドセンスのコードを準備

アドセンスにも色々とサイズの種類がありますよね。

僕の場合はPC記事下の横並び部分には336×280の「レクタングル（大）」を２つ並べています。
それ以外の部分はPCもスマホも全て「レスポンシブ」です。

STINGER7のコンテンツ部分は680pxで、ちょうどレクタングル大が２つ並べられるぐらいの幅になっています。
前のバージョンまではカスタマイズしないと横に並べられなかったみたいですね。

「レスポンシブ」はその名の通り、幅を自動で調整してくれるタイプですが、実際にPCで見てみると680pxフルに広がったテキスト広告だったり、レクタングル大が表示されたりしています。

H2前はクリック率が良いのでもうしばらくは「レスポンシブ」のまま運用してみようと思います。

表示内容を指定できる「広告タイプ」は「テキスト広告とディスプレイ広告」にした方が良いらしいですよ。
コードの取得方法は割愛しますので、お好きな広告ユニットのコードを準備してください。

single.phpのカスタマイズ

記事下に横並びで配置するためのコード

まずは単一記事の投稿（single.php）で下記の部分を探してください↓
single.phpの中間辺りにあります。

<?php the_content(); //本文 ?>
コード挿入場所１（記事本文のすぐ下）
<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 5 ) ) : else : ?>
<?php endif; ?>
					
<?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?>
コード挿入場所２（ソーシャルボタンの下）
<?php get_template_part( 'popular-thumbnail' ); //任意のエントリ ?>
コード挿入場所３（おすすめ記事の下）
<?php get_template_part( 'st-rank' ); ?>

<?php wp_link_pages(); ?>


<p class="tagst"><i class="fa fa-tags"></i>&nbsp;-
	<?php the_category( ', ' ) ?>
	<?php the_tags( '', ', ' ); ?>
</p>
コード挿入場所４（カテゴリ、タグの下）
<aside>

コード挿入場所を４パターン書いてみました。
当ブログは「コード挿入場所１」の部分に入れています。

お好きな場所を選んだら下記コードをコピペして置き換えてください↓

<p class="ad-label">スポンサーリンク</p>
<?php if(st_is_mobile()) { ?>
<div class="ad-box">
スマホ用の広告
</div>
<?php } else { ?>
<div class="ad-box clearfix">
<div id="ad-pc-left">
PC用広告の左側
</div>
<div id="ad-pc-right">
PC用広告の右側
</div>
</div>
<?php } ?>

「スマホ用広告」「PC用広告の左側」「PC用広告の右側」と書いてある部分を、それぞれの広告コードに置き換えてください。

最初の1行目は「スポンサーリンク」の文字です。
誤解されている方も多いですが、アドセンスの規約を見るとラベルの表示は必須ではないので必要ない方は削除してもオッケーです。
規約違反になるのは「関連情報」とかの紛らわしいラベルの下に広告を置くことが違反とされています。

スマホ用のもう１つの広告を配置

上記のコードではスマホの場合には広告を１つだけ表示するようになっています。
当ブログでは残りの１つを関連記事やコメントよりも下に設置しているので、それも合わせてご紹介します。

single.phpで下記部分を探してください↓
一番下の方にあります。

        <!-- /#contentInner -->
スマホ用コード挿入場所
        <?php get_sidebar(); ?>
</div>
<!--/#content -->
<?php get_footer(); ?>

メイン部分とサイドバー部分の間に広告を設置します。
上記の「スマホ用コード挿入場所」に以下をコピペして置き換えてください↓

<?php if(st_is_mobile()) { ?>
<div class="ad-box">
<p class="ad-label">スポンサーリンク</p>
スマホ広告
</div>
<?php } ?>

「スマホ広告」の部分を取得した広告コードに置き換えれば設置は完了です！

CSSで見た目を調整

設置しただけだと横並びにならないので、CSSで調整します。
下記コードをstyle.cssに追加してください↓

.ad-label { /* スポンサーリンクのラベル部分 */
	font-size: 80%;
	color: #333;
	diaplay: block;
	text-align: center;
}
.ad-box { /* 広告下の余白 */
	margin-bottom: 40px;
}
#ad-pc-left {
	float: left;
}
#ad-pc-right {
	float: right;
}

これでアドセンス広告が横並びになったと思います。
スポンサーリンクの文字の装飾や余白などはお好みで変えてみてください(^^)

まとめ

アドセンスはサイトによって最適な設置場所が変わるらしいですが、効果的な場所はある程度実証されていて情報もたくさんあるので助かりますね。

とりあえずサイドバーが空いてるので、近いうちアドセンス以外の他のアフィリエイトも貼ってみようと思います。
皆さんも色々試してみてください。

ではまた〜♪

STINGER7のカスタマイズ記事をまとめました↓

STINGER7：カスタマイズまとめ

このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

web-ashibi.net

2016.03.24