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; }
上記のコードを追記してください。
ラベル表記の文字サイズや余白はお好みで調整してください。
これで記事下にアドセンス広告が横並びに配置されました。
参考サイト
記事の執筆にあたり、こちらの記事を参考にさせていただきました。
ありがとうございます。
STINGER PLUS カスタマイズ - 記事エリアの横幅を広げてアドセンス(レクタングル大)を横並びに配置する方法 - Kanamii
STINGER7:記事下にアドセンスを横並びで設置する方法【ダブルレクタングル】 - うぇぶあしび
まとめ
記事下のダブルレクタングルは大手サイトでも取り入れられ、収益性が高いといわれています。
当ブログで採用してみて、今後どのような結果が得られるのか楽しみです。
ただ、全てのサイトで有効とは限らないので、様子を見ながら広告の配置を見直したい思います。
今回のカスタマイズで、パソコン表示時で2箇所、スマホ表示時で1箇所のアドセンスが掲載されます。
アドセンスの広告設置数の上限が撤廃され、3箇所以上も可能となったようなので、残りの配置をどうするかも考えどころですね。
アドセンスの配置は、以下の記事も参考にしてください。