CocoonでPCとスマホの広告を切り替えるCSS｜記事中バナーを出し分ける方法

デスクトップPCモニターにカラフルなバナーがグリッド状に並んだ画面を映し、木のデスクでキーボードとマウスを操作しながらブログの広告レイアウトを編集している男性ブロガーが、観葉植物や本棚のある室内で作業しているイラスト。

【Cocoon】記事下にPRバナー4枚をキレイに並べる方法｜PC4列・スマホ2列を実現するコピペ用CSS&HTML

Cocoonで記事下にPRバナー4枚をキレイに並べたい方向け。PC4列・スマホ2列をCSSとHTMLのコピペだけで実現する手順と、表示崩れを防ぐチェックポイントをまとめました。

PCとスマホで表示させる広告を変えたいと思うことはありませんか。

たとえば、バナーのサイズによっては、PCでは見栄えがよくてもスマホではイマイチなときもあります。

この記事では、PCとスマホで異なるバナーや文章を表示させる方法について書いていきます。

PCとスマホで広告を使い分けたい人の参考になるかもしれません。

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

この記事でできること

この記事のCSSとHTMLを使うことで、PCとスマホで異なるバナーや文章を表示させられます。

例えば、PCにはPCゲームのバナーを貼り、スマホでは別のバナーを表示させたいときなどに便利です。

Cocoonでは、この方法を使わなくても、PCとスマホで異なるバナーを表示させることができます。

PC用とスマホ用のウィジェットがありますからね。

一方で、ウィジェットは設置できる場所に制限があるため、やや不便です。

この方法を使うことで、自分の好きな位置（記事中など）で、バナーの使い分けが可能になります。

この記事では、そのためのCSSとHTMLのひな型を紹介していきます。

CSSを追加する

ここから実際に、PCとスマホでバナーを切り替えるためのCSSを追加していきます。

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

.pr-pc-only
.pr-sp-only

画面幅が広いときは.pr-pc-onlyだけを表示し、画面幅が狭いときは.pr-sp-onlyだけを表示する、というシンプルな仕組みです。

カスタマイズ前の注意点

これから紹介するCSSとHTMLを追加すると、同じ場所に書いたバナーの表示内容が「PC用」と「スマホ用」で切り替わるようになります。

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

この記事では、クラス名として.pr-pc-onlyと.pr-sp-onlyを使います。

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

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

CSSを書く場所

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

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

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

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

コピペ用CSS

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

.pr-pc-only{
    display:block;
}
.pr-sp-only{
    display:none;
}

@media(max-width:768px){
    .pr-pc-only{
        display:none;
    }
    .pr-sp-only{
        display:block;
    }
}

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

.pr-pc-onlyを「PC用」の枠、.pr-sp-onlyを「スマホ用」の枠として用意する
画面幅768px以下になったときだけ、PC用を非表示にしてスマホ用だけを表示する

PCで見たときは.pr-pc-onlyの中身だけが表示され、スマホで見たときは.pr-sp-onlyの中身だけが表示されます。

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

記事内のHTMLを書く

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

先ほど用意した.pr-pc-onlyと.pr-sp-onlyをここで使います。

同じ場所に「PC用の内容」と「スマホ用の内容」を2つ並べて書いておくと、画面幅に応じてどちらか一方だけが表示されるようになります。

バナーを設置する場所

バナーを切り替えたい場所に、次のようにHTMLを挿入します。

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

記事本文の中なら、関連記事のすぐ下や見出し前後など、好きな位置に置いて構いません。

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

まずは、PC用・スマホ用の中身をまだ入れていない「ひな型」です。

<div class="pr-pc-only">
    ここにPC用のバナーや内容を挿入
</div>
<div class="pr-sp-only">
    ここにスマホ用のバナーや内容を挿入
</div>

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

それぞれの<div class="pr-pc-only">と</div>、<div class="pr-sp-only">と</div>のあいだに、表示したい内容を書きます。

差し替えの手順は次の通りです。

ひな型のテキストを削除する
「ここにPC用のバナーや内容を挿入」や「ここにスマホ用のバナーや内容を挿入」といった説明文を、まるごと削除します。
PC用の内容を差し込む
削除した位置に、A8やafbなどのバナーコード、テキストリンク、ボタンなどPCで表示したい内容をそのままコピペします。<div class="pr-pc-only">と</div>は消さずに残してください。
スマホ用の内容を差し込む
同じように、<div class="pr-sp-only">の中にスマホで表示したい内容を入れます。こちらも<div>と</div>は残したままにします。