【SWELLカスタマイズ】ピックアップバナー下の余白サイズの変え方

2021 12/01

2021年12月1日

この記事ではWordpressテーマ「SWELL」の、ピックアップバナー下の余白サイズの変える方法を紹介します。

ピックアップバナーの設置は、「外観→カスタマイズ→メニュー→すべての位置を表示→ピックアップバナー→メニューを編集」からできますよ。

私は完全なる素人です。コードがブサイクだったり間違ってたりするかもしれません。念のため事前にバックアップを取ったり、万が一に備えておいてください。何かあっても責任は負いかねます。

ビフォーアフター

これはビフォーです。ピックアップバナーというのは、JINではピックアップコンテンツと呼ばれているタイトル下に表示させるコンテンツです。このブログでは４つ表示させています。その下の余白が少し広めなのが気になったので、狭めてみました。

アフターです。狭くなっていますよね？パソコンで見ればあまり違いを感じないかもしれませんが、スマホで見ると全然違います。ちなみに私はピックアップバナー下の切り替えタブ（吹き出しのようなところ）の文字の太さと色も変えています。

いかがですか？スマホで見ると結構余白が広いのを、ちょうどいい感じにできました。

STEP

追加CSSにコードを追加する

SWELLのダッシュボードの「外観→カスタマイズ→追加CSS」に進み、追加CSSにコードを追加するだけ！

STEP

表示を確認して保存して完成

今回も簡単です♪

▼追加するCSSはこちら。

/* ピックアップバナーの下の余白 */
.p-pickupBanners {
    position: relative;
    width: 100%;
    margin-bottom: 2em;
}

もともと「margin-bottom」が4emになっていたのを2emにしています。そこの数字を変えることで余白を広くすることも可能です。

この記事ではSWELLの、ピックアップバナー下の余白サイズを広くしたり狭くする方法を紹介しました。

地味なカスタマイズですが、お役に立てるとうれしいです！