【STINGER PLUS+】記事幅を広げて、アドセンスを記事下ダブルレクタングルにしてみた

STINGER PLUS+ではウィジェットに広告コードを入れるだけで、パソコン表示時に記事下に2つの広告を“縦並び”で配置することができます。

すごく簡単で便利なんですが、縦に2つ並ぶと広告の隣のスペースが大きく空いてしまい、あまり好みのデザインではないんですよね。

なので、記事エリアの横幅を広げて、アドセンスのレクタングル（大）を2つ“横並び”で配置できるようにカスタマイズしました。
いわゆる『ダブルレクタングル』ってやつですね。

記事エリアの横幅を広げる

まずは、記事エリアの横幅を広げる作業から。

STINGER PLUS+のデフォルトでは、記事幅640px、左右の余白50pxずつ、上下の余白30pxずつに設定されています。

幅336pxのレクタングル（大）を2つ並べて、広告間を10pxとすると、記事幅は682px必要となるので、デフォルトのままだと広告がはみ出してしまいます。
記事幅を42px広げれば広告が収まるので、左右の余白を21pxずつ減らし29pxに変更することで対応。

つまり、ダブルレクタングルにするためには、記事幅682px、左右の余白29pxずつ、上下の余白30pxずつに設定すればいいわけですね。

スタイルシート（style.css）で調整

WordPress管理画面で「外観」⇒「テーマの編集」⇒子テーマ「style.css」の編集画面へ。

/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {


/*-- ここまで --*/
}

最初から記述されているこのコードの間に、下記のコードを追記してください。

/* 記事エリアの幅変更 */ 
main {
    padding: 30px 29px 30px;
}

/* アイキャッチの幅変更 */
.st-eyecatch {
    margin: -30px -29px 20px;
}

最終的には、下記のようになっていればOKです。

/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

/* 記事エリアの幅変更 */ 
main {
    padding: 30px 29px 30px;
}

/* アイキャッチの幅変更 */
.st-eyecatch {
    margin: -30px -29px 20px;
}

/*-- ここまで --*/
}

これで、記事エリアの横幅が変更されました。

記事幅を広げたことでアイキャッチ画像の幅も変更が必要なので、そちらも併せて変更しています。

記事下に広告をダブルレクタングルで表示する

記事エリアの横幅を広げたら、続いて広告を横並びで配置させる作業に移ります。

個別投稿（single.php）に横並びで配置するコードを追記

WordPress管理画面で「外観」⇒「テーマの編集」⇒子テーマ「single.php」の編集画面へ。

で囲まれた部分を探してください。だいたい真ん中くらいにあるはずです。

<!-- 広告枠 -->
<?php /*
<div class="adbox">
	<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
	<?php if ( st_is_mobile() ) { //スマホの場合 ?>
		<div class="adsbygoogle" style="padding-top:10px;">
		<?php get_template_part( 'st-smartad' ); //スマホ用広告読み込み ?>
		</div>
	<?php } else { //PCの場合 ?>
		<div style="padding-top:10px;">
		<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
		</div>
	<?php } ?>
</div>
*/ ?>
<!-- /広告枠 -->

上記の2行目と15行目のように追記し、コメントアウトします。

<p class="ad-label">スポンサーリンク</p>
<?php if(st_is_mobile()) { //スマホの場合 ?>
	<div class="ad-box">
		【ここにスマホ用広告コードを挿入】
	</div>
<?php } else { //PCの場合 ?>
	<div class="ad-box clearfix">
		<div id="ad-pc-left">
			【ここにPC用広告コード（左）を挿入】
		</div>
		<div id="ad-pc-right">
			【ここにPC用広告コード（右）を挿入】
		</div>
	</div>
<?php } ?>

1つ目のの後に、上記のコードを追記してください。

4行目、9行目、12行目にはアドセンスの広告コードを挿入してください。

これでパソコン表示時に2つ、スマホ表示時に1つの広告が表示されます。

当ブログの場合、スマホ用広告には『レスポンシブ』を、PC用広告には『レクタングル（大）』を使っています。
PC用広告は、どちらも同じコードでも構いませんが、左右で別のコードを使った方がそれぞれのレポートが表示できるのでオススメです。

アドセンスを記事ごとに非表示にしたい場合は、以下のカスタマイズ記事で対応したコードを記載しているので、あわせて参考にしてください。

スタイルシート（style.css）で調整

「single.php」にコードを追記しただけでは横並びに配置されていないので、「style.css」で見た目を調整していきます。

WordPress管理画面で「外観」⇒「テーマの編集」⇒子テーマ「style.css」の編集画面へ。

/* アドセンスのラベル表記 */
.ad-label {
    font-size: 80%;
    color: #333;
    text-align: center;
    margin-bottom: 5px;
}

.ad-box { 
    margin-bottom: 40px;
}

#ad-pc-left {
    float: left;
}

#ad-pc-right {
    float: right;
}

上記のコードを追記してください。

ラベル表記の文字サイズや余白はお好みで調整してください。

これで記事下にアドセンス広告が横並びに配置されました。