Cocoon本文の広告出し分け｜PCとスマホのバナー切り替え

Cocoonで記事本文中に、PCとスマホで別々の広告バナーを置きたいときがある。

ただ、Cocoonの標準機能だと記事本文中でバナーを出し分けることはできない。

そこで、CSSとHTMLを使って画面幅に合わせて自動で切り替わる仕組みを作った。

今回は、記事本文中でPC用とスマホ用のバナーを出し分けるカスタマイズについて整理しておく。

できることと想定サイズ
CSSを追加する
HTMLを貼り付ける
表示を確認する
まとめ：PCとスマホでバナーを出し分ける

できることと想定サイズ

Cocoonの設定をいじらずに、記事本文中の狙った場所にPC用とスマホ用のバナーを別々に表示させる。

画面幅768pxを境目にして、PC表示とスマホ表示をCSSで切り替える仕組みだ。

面倒な位置調整をしなくても中央に配置され、スマホの画面幅に合わせて画像が縮小されるようにしてある。

想定しているバナーサイズは以下のとおりだ。

PC
728×90などの横長バナー
スマホ
300×250などのレクタングル（または320×50）

注意点：CSSで非表示にしているだけなので、裏側では両方のコードを読み込みます。負荷を避けるため、通常の画像バナーにしておくのが無難です。

CSSを追加する

まずは事前準備だ。

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

.ad-switch-box{
    margin:20px auto;
    max-width:728px;
    width:100%;
    text-align:center;
}
.ad-switch-box img{
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
}
.ad-switch-sp{
    display:none;
}
@media(max-width:768px){
    .ad-switch-pc{
        display:none;
    }
    .ad-switch-sp{
        display:block;
    }
}

PCではPC用のバナーが表示され、画面幅が768px以下になると自動でスマホ用に切り替わる。

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

HTMLを貼り付ける

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

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

<div class="ad-switch-box">
    <div class="ad-switch-pc">
        ここにPC用のバナーコードを挿入
    </div>
    <div class="ad-switch-sp">
        ここにスマホ用のバナーコードを挿入
    </div>
</div>

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