Life Jam

専門知識ゼロの初心者がWordPressに挑戦中

WordPress

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

2017/05/02

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」の編集画面へ。

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

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

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

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

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

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

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

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

<!-- 広告枠 -->で囲まれた部分を探してください。だいたい真ん中くらいにあるはずです。

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

1つ目の<!-- 広告枠 -->の後に、上記のコードを追記してください。

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

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

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

 

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

スタイルシート(style.css)で調整

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

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

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

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

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

参考サイト

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

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

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

まとめ

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

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

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

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

-WordPress

スポンサーリンク