CocoonでASPバナーを2枚並べる方法｜PC横2枚とスマホ縦1列

ブログで収益を狙うなら、記事下の広告レイアウトはけっこう重要なポイントだ。

ただ、Cocoonの標準機能だと自由が利かず、広告をきれいに並べるのは割と面倒だったりする。

設定をいじるとサイト全体の広告が固定されてしまうので、好きな場所に好きなバナーを置ける仕組みを自作してみた。

この記事では、PCで2列、スマホで1列のバナーをキレイに貼る方法について書いていく。

できることと想定環境

Cocoonの設定にあるダブルレクタングルは、アドセンスのコードを登録すると他のASPバナーを並べることができない。

ウィジェット側にも専用枠がないので、記事ごとに違うASPバナーを2枚並べたいなら自分でCSSとHTMLを書くしかないわけだ。

そこで、PCでは横2枚、スマホでは縦1列に自動で切り替わるレイアウトを作った。

想定している環境とサイズは以下のとおりだ。

 

CSSを追加する

まずは事前準備だ。

子テーマのstyle.css（または「外観」→「カスタマイズ」→「追加CSS」）に、次のコードを貼り付ける。

.ad-double-rect{
    display:flex;
    justify-content:space-around;
    align-items:center;
    flex-wrap:wrap;
    row-gap:16px;
    margin:20px auto;
    max-width:720px;
    width:100%;
}
.ad-double-rect-item{
    max-width:100%;
    text-align:center;
}
.ad-double-rect-item img{
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
}

PCでは余白が自動配分されて横並びになり、画面幅が狭くなると自動で縦に落ちる。

スマホで画像が画面からはみ出さないよう、最大幅も100%に収まるようにしてある。

 

HTMLを貼り付ける

CSSを追加したら、記事内にHTMLを埋め込んでいく。

テキストモードに切り替えて、バナーを置きたい場所に以下のコードを貼り付ける。

<div class="ad-double-rect">
    <div class="ad-double-rect-item">ここにバナー①を挿入</div>
    <div class="ad-double-rect-item">ここにバナー②を挿入</div>
</div>

やることは、「ここにバナー①を挿入」「ここにバナー②を挿入」のテキストを消して、それぞれにASPのバナーコードをそのまま貼り付けるだけだ。

本文エリア以外（関連記事の上など）に設置したいときは、ウィジェットを使えばいい。

 

表示を確認する

HTMLを埋め込んだら、保存してプレビューを開き、表示をチェックする。

縦並びになったときの上下のすき間を変えたいなら、CSSのrow-gap:16px;の数値を好みに合わせていじればいい。

俺の環境で実際に貼ると、このような表示になる。

 

まとめ：整えても稼げるかは別

この記事では、PCで2列、スマホで1列のバナーをキレイに貼る方法について書いた。

Cocoonで好きな位置に、ASPのバナーを2枚並べたいときに使えるはずだ。

自動で折り返されるので、スマホでも崩れずにすっきり収まる。

ただ、いくら広告をキレイに並べても、それで収益がアップするとは限らないが。