【Cocoon】記事下PRバナー4枚をキレイに並べる方法

自宅の書斎でブロガーがノートPCと外付けモニターを前に座り、記事下に2列のバナー広告が並んだ画面とスマホの1列表示を確認しながら、マグカップやメモ帳の置かれた机で作業している様子

Cocoonで記事下広告をPC2列・スマホ1列に並べるCSSひな型｜コピペでできるダブルレクタングル

Cocoonで記事下広告をPC2列・スマホ1列に並べるCSSとHTMLのひな型を解説します。コピペと数値調整だけでダブルレクタングル風レイアウトを作りたいブロガー向けの手順記事です。

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

しかし、広告をキレイに並べるのって、割と難しいんですよね。

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

広告のレイアウトを整えたい人の参考になるかもしれません。

この記事でできること
CSSを追加する
記事内のHTMLを書く
1. バナーを設置する場所
2. コピペ用ひな型と差し替え手順
表示を確認する
1. PC表示の確認
2. スマホ表示の確認
まとめ：見た目が整うだけで、稼げるかは別の話

この記事でできること

私は上記のように、関連記事の下に、300×250の広告バナーを4枚並べて使っています。

CSS自体は他のサイズのバナーでも使えますが、同じサイズで揃えないと見栄えが悪くなります。

PCでは関連記事を4列にしているので、その幅に合うように広告も4列で揃えています。

左詰めで4枚貼ると1段に4枚並び、5枚目からは下の段に折り返します。

そのため、このレイアウトは4枚、8枚、12枚といった「4の倍数」で広告を貼ると一番きれいに並ぶようになっています。

スマホでは、同じバナーを自動的に2列で折り返すようにしています。

4枚なら2列×2段、8枚なら2列×4段、といった形になります。

CSSを追加する

ここから実際に、バナーを並べるためのCSSを追加していきます。

今回は次の3つのクラスを使います。

.pr-line
.pr-card-grid
.pr-card

カスタマイズ前の注意点

これから紹介するCSSとHTMLを追加すると、記事下のレイアウトが変わります。

表示がおかしくなった場合は、このCSS部分を削除すれば元の状態に戻せます。

この記事では.pr-line、.pr-card-grid、.pr-cardというクラス名を使います。

同じクラス名が、すでにテーマやプラグインで使われていないか、style.cssなどで検索して確認してください。

重なっていそうな場合は、.sb-pr-card-gridのように他と被らないクラス名に変更してから使ってください。

CSSを書く場所

Cocoon子テーマの場合、CSSを書く場所は次のどちらかです。

「外観」→「テーマファイルエディター」→右上でCocoon Childを選択→style.cssの一番下
または「外観」→「カスタマイズ」→「追加CSS」

本番でずっと使う前提ならstyle.cssに書くのが分かりやすいと思います。

まずは試してみたいだけであれば、「追加CSS」に貼り付けても構いません。

コピペ用CSS

準備ができたら、次のCSSをそのまま貼り付けて保存してください。

/* 記事下のPR4枚グリッド */
.pr-line{
    font-size:12px;
    line-height:1;
    text-align:center;
    margin:0;
    padding:0 0 10px;
}
/* PC:4列グリッド */
.pr-card-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px; /* バナー同士のすき間は必要に応じて調整 */
}
/* 本体バナーだけ枠いっぱいに表示する */
.pr-card > a > img:first-child{
    display:block;
    width:100%;
    height:auto;
}
/* スマホ:2列×2段(4枚の場合) */
@media(max-width:768px){
    .pr-card-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

このCSSでやっていることは次の3つだけです。

.pr-lineで、バナーの上に小さく（PR）を1行表示する
.pr-card-gridで、PCでは4列、画面幅768px以下では2列のグリッドにする
.pr-card > a > img:first-childで、300×250のバナー画像を列の幅いっぱいに縮小して表示する

CSS側の作業はここまでです。

記事内のHTMLを書く

次に、記事本文の中でバナーを表示するためのHTMLを書きます。

CSSで用意した.pr-lineと.pr-card-grid、.pr-cardをここで使います。

バナーを設置する場所

バナーを並べたい場所に、次のようにHTMLを挿入します。

ブロックエディターの場合
「カスタムHTML」ブロックを追加して、そこに貼り付け
クラシックエディターの場合
テキストモードに切り替えて、貼り付け

関連記事のすぐ下など、好きな位置に置いてください。

コピペ用ひな型と差し替え手順

まずは、ASPのバナーコードをまだ入れていない「ひな型」です。

<p class="pr-line">（PR）</p>
<div class="pr-card-grid">
    <div class="pr-card">
        <!-- ここにバナー①のコードをまるごと貼り付ける -->
    </div>
    <div class="pr-card">
        <!-- ここにバナー②のコードをまるごと貼り付ける -->
    </div>
    <div class="pr-card">
        <!-- ここにバナー③のコードをまるごと貼り付ける -->
    </div>
    <div class="pr-card">
        <!-- ここにバナー④のコードをまるごと貼り付ける -->
    </div>
</div>

やることは1つだけです。

それぞれの<div class="pr-card">と</div>のあいだに、ASPのバナー広告1つ分のコードを入れます。

次の手順で差し替えてください。

ひな型のコメント行を削除する
ひな型に入っているのコメント行を、まるごと削除します。
バナーコードを差し込む
削除した位置にA8やafbなどのバナーコードをそのままコピペします。<div class="pr-card">と</div>は消さずに残してください。
残りのカードにも同じように入れる
同じように2つ目・3つ目・4つ目の<div class="pr-card">にも、それぞれ別のバナーコードを入れればOKです。