Cocoon記事下広告をPC2列・スマホ1列にするCSSコピペ用

夜の自宅の書斎で、ノートパソコンに向かってアフィリエイト作業をしている若いブロガーと、手前のマグカップやメモ帳、奥の本棚やスタンドライトがつくる奥行きのある雰囲気が描かれている様子。

ブログで稼ぎたい人向けASP入門：審査のゆるさ順に「まず登録すべきサービス」と実際の使い方をまとめました

ブログでアフィリエイト収益を目指す方向けに、楽天アフィリエイト・A8.net・もしもアフィリエイトなど主要ASPを審査難易度別に紹介。どれから登録すべきか、実際の使い方とあわせて初心者にもわかりやすく解説します。

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

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

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

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

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

この記事でできること

PCでバナーを設置するときに、横に2枚並べたいことがあります。（ダブルレクタングル）

しかし、ASPのバナーコードをそのまま2つ貼ると、くっついたりして見栄えが悪くなることがあります。

Cocoonの「Cocoon設定」→「広告」では、ダブルレクタングルを出すことはできますが、アドセンスのコードを入れると他のASPバナーは出せません。

かといって、ウィジェット側にもダブルレクタングル専用の項目はないので、他のバナーを2枚並べたいときは、自分でCSSとHTMLを書く必要があります。

そこで、好きな位置にPCでは2枚を横並び、スマホでは1枚ずつ縦に並べるレイアウトを、自分で作る方法を書いていきます。

バナーは横幅300px前後のサイズを想定していますが、他のサイズでも考え方は同じです。

横長のバナーなどを使う場合は、このあと紹介するCSS内の数値を、バナーの横幅に合わせて少し調整してください。

CSSを追加する

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

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

.pr-double-rect
.pr-double-rect-item

カスタマイズ前の注意点

これから紹介するCSSとHTMLを追加すると、バナー広告のレイアウトが変わります。

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

この記事では.pr-double-rect、.pr-double-rect-itemというクラス名を使います。

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

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

CSSを書く場所

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

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

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

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

コピペ用CSS

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

.pr-double-rect{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    margin:20px auto;
    max-width:720px;
}
.pr-double-rect-item{
    flex:1 1 300px;
    max-width:300px;
    text-align:center;
}

@media(max-width:768px){
    .pr-double-rect{
        gap:16px;
    }
}

このCSSは、横幅300pxのバナーを2枚並べる想定になっています。

別のサイズのバナーを使いたい場合は、.pr-double-rect-itemのflex:1 1 300px;とmax-width:300px;の「300」の数字を、使いたいバナーの横幅に合わせて変更してください。

PCでは2つのバナーが横並びになり、画面が狭くなると自動的に縦方向に折り返されます。

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

記事内のHTMLを書く

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

CSSで用意した.pr-double-rectと.pr-double-rect-itemをここで使います。

バナーを設置する場所

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

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

関連記事のすぐ下や、見出し前後など、好きな位置に置いてください。

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

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

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

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

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

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

ひな型のテキストを削除する
ここにバナー①を挿入など、ひな型に入っている説明文をまるごと削除します。
バナーコードを差し込む
削除した位置にA8やafbなどのバナーコードをそのままコピペします。<div class="pr-double-rect-item">と</div>は消さずに残してください。
2つ目の枠にも同じように入れる
同じように2つ目の<div class="pr-double-rect-item">にも、別のバナーコードを入れればOKです。

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