バナー広告を2つ横に並べて表示したい──
そう思っても、いざやってみるとうまくいかないことが多いです。
PCでは並べたい、でもスマホでは縦に並べたい。
そんなCocoonユーザー向けに、コピペでできる方法をわかりやすく解説します。
この記事でわかること
この記事では、Cocoonを使ってバナー広告（300×250など）をPCでは横に、スマホでは縦に並べて表示する方法を紹介します。
CSSとHTMLを一度設定しておけば、あとは繰り返し使うだけです。
初心者でも難しい作業は一切ありません。
実際のコードと表示例を交えて、順を追って解説していきます。
実際の表示イメージ
以下の2つのバナーは、PCで閲覧すると横に並びます。
スマホで表示した場合は、自動的に縦に並びます。
手順① CSSを設定する
まず、バナーを横に並べるためのスタイルをCSSで定義します。
WordPress管理画面から、以下の場所を開いてください。
- 外観 → カスタマイズ → 追加CSS
そして、以下のコードをコピペして保存します。
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
margin: 20px auto;
max-width: 720px;
}
.rect-item {
flex: 1 1 300px;
max-width: 300px;
text-align: center;
}
@media screen and (max-width: 768px) {
.double-rectangle {
gap: 16px;
}
}
このCSSにより、PCでは横に、スマホでは縦に並ぶように調整されます。
手順② HTMLを記事内に記述する
次に、実際の広告コードを貼るためのHTMLを記事に記述します。
使う場所は、バナーを表示したい箇所のHTMLブロックです。
以下のコードを参考に、自分のバナーリンクや画像URLを差し替えて使用してください。
<div class="rect-item">ここにバナー①を挿入</div>
<div class="rect-item">ここにバナー②を挿入</div>
</div>
CSSは一度設定すれば何度でも使えるので、HTMLコードだけ繰り返し貼ればOKです。
手順③ 表示を確認する
バナーを設置したら、必ず表示を確認してください。
- PC画面でバナーが横並びになっているか？
- スマホ画面で縦に切り替わっているか？
実際にスマホでページを開いてチェックしても良いですが、スマホの画面はPCでもチェックできます。
PCでスマホの表示画面を確認するには、Google Chromeで記事を開いた状態で右クリック →「検証」をクリック → 上の画像のスマホ切り替えアイコンを押すことで、スマホ表示に切り替えられます。
HTMLコードを管理する方法
毎回このHTMLコードを手で書くのは面倒です。
メモ帳などに保存しても良いですが、AddQuicktagという無料プラグインを使えば、一度登録しておくだけでワンクリックで呼び出せるようになります。
HTMLコードを「テンプレート」として使い回したい方におすすめです。
まとめ：Cocoonでバナーを2つ並べる方法を解説
Cocoonでは、CSSとHTMLを使うことで広告バナーをPCで横並び・スマホで縦並びに表示できます。
CSSは一度設定すれば、あとはHTMLを貼るだけでOKです。
レイアウトに悩んでいた方も、これで安心して広告を表示できるようになります。
AddQuicktagでの管理も併せて検討してみてください。
自由にバナーを作成してみませんか？
バナープラスV2では、テンプレを選ぶだけで、おしゃれなブログ用バナーが作れます。
特別なスキルは不要で、操作もシンプルです。
CocoonなどのWordPressテーマとも相性抜群です。
バナープラスV2でバナーを作る
（PR）
