WordPress

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

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

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

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

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

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

STINGER PLUS+記事幅変更前

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

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

STINGER PLUS+記事幅変更後

つまり、ダブルレクタングルにするためには、記事幅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;
}

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

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

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

参考サイト

記事の執筆にあたり、こちらの記事を参考にさせていただきました。
ありがとうございます。

STINGER PLUS カスタマイズ - 記事エリアの横幅を広げてアドセンス(レクタングル大)を横並びに配置する方法 - Kanamii

STINGER7:記事下にアドセンスを横並びで設置する方法【ダブルレクタングル】 - うぇぶあしび

まとめ

記事下のダブルレクタングルは大手サイトでも取り入れられ、収益性が高いといわれています。

当ブログで採用してみて、今後どのような結果が得られるのか楽しみです。
ただ、全てのサイトで有効とは限らないので、様子を見ながら広告の配置を見直したい思います。

今回のカスタマイズで、パソコン表示時で2箇所、スマホ表示時で1箇所のアドセンスが掲載されます。
アドセンスの広告設置数の上限が撤廃され、3箇所以上も可能となったようなので、残りの配置をどうするかも考えどころですね。

アドセンスの配置は、以下の記事も参考にしてください。

-WordPress

© 2020 Life Jam Powered by AFFINGER5