CocoonでPCとスマホで別々のものを表示する方法【コピペでOK】

PCとスマホで同じバナーを貼ったら、なんか不格好だな…と思ったことはありませんか？

728×90の横長バナーは、スマホで見ると文字が潰れて何が書いてあるのか分かりません。

逆に320×50の小型バナーは、PCだと小さすぎて存在感がなくなります。

今回は、CocoonでPCとスマホで別々のものを表示する方法を紹介します。

子テーマに書くこと

まず、PCとスマホで表示を切り替えるための準備をします。

Cocoonを使っている場合、以下のコードを子テーマの「style.css」にコピペしてください。

場所は「外観」→「テーマファイルエディター」→右側から「style.css（子テーマ）」を選択で開けます。

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

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

このCSSでは、画面の横幅によって「表示・非表示」が自動で切り替わるようになっています。

つまり、同じ場所に2つのバナーを並べて書いておいても、画面サイズに応じてどちらか一方だけが表示されるという仕組みです。

次は、実際にどうHTMLに書くかを見ていきましょう。

HTMLの書き方は、以下の通りです。

<div class=”pc-only”>ここにPC用の内容</div>
<div class=”sp-only”>ここにスマホ用の内容</div>

ここに入れる内容は、画像バナーでもテキストでもリンクでもOKです。

たとえばPCでは大きめの広告を表示し、スマホでは短い文章や別のボタンにすることもできます。

スマホ用が特に不要な場合は .sp-only を書く必要はありません。（逆も然り）

あくまで分けたいときだけ、両方使えばOKです。

豆知識：HTML上は2つ並べて書きますが、CSSでどちらかを非表示にしているので、表示されるのは1つだけです。スマホとPCで切り替わるように見える仕組みになっています。

注意点：HTMLに書いたあとは、必ずPCとスマホで表示の確認をしましょう。

Cocoonでは、PCとスマホに別々の内容を表示することができます。

画像バナーだけでなく、テキストやリンクなども自由に切り替え可能です。

やり方は、コードをstyle.cssにコピペするだけ。

あとは、HTMLで先ほどのように書くだけで、どの記事でも適用できます。

バナープラスV2では、テンプレを選ぶだけで、おしゃれなブログ用バナーが作れます。

特別なスキルは不要で、操作もシンプルです。

CocoonなどのWordPressテーマとも相性抜群です。