SWELL│フルワイドの余白を上下別々で微調整する方法

フルワイドの上下の余白を、PC幅とスマホ幅で分けて指定します。

旧版はPC用・スマホ用のCSSを同時に適用していたため、画面幅で切り替わるようメディアクエリを追加しました。

SWELLのフルワイドブロックで、セクションの上と下に異なる余白を指定するためのCSSです。

標準の上下共通の余白指定では調整しにくい場合に、対象ブロックへ追加クラスを付けて使います。

以下の画像は旧版の参考画像です。

現在のクラス名は掲載コードを使用してください。

CSSを一度登録し、ブロックごとに上・下・画面幅の組み合わせを追加クラスで選びます。

この記事で使う入力欄は、ブロックの「追加CSSクラス」です。

SWELL本体のJavaScriptは編集しません。

専用の設定コントロールを追加する旧プラグインとは、別の方法です。

追加クラスとCSSを保存した後、公開画面で余白を確認します。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

SWELLでフルワイドの余白を上下別々で微調整する方法

以下のCSSを登録し、調整するフルワイドブロックに対応するクラスを指定します。

掲載CSSは、指定した追加クラスとswell-block-fullWideの両方を持つフルワイドブロックにだけ適用されます。

CSSの追加

CSSを追加します。

ただしエディタでもCSSを反映したいので場所は、下記の場所に挿入します。

管理画面 ＞ エディター設定 ＞ カスタム書式 ＞ カスタム書式用CSS

@media (min-width: 960px) {
  .swell-block-fullWide.waza-fw-pc-pt-0 { padding-top: 0em !important; }
  .swell-block-fullWide.waza-fw-pc-pt-20 { padding-top: 2em !important; }
  .swell-block-fullWide.waza-fw-pc-pt-40 { padding-top: 4em !important; }
  .swell-block-fullWide.waza-fw-pc-pt-60 { padding-top: 6em !important; }
  .swell-block-fullWide.waza-fw-pc-pt-80 { padding-top: 8em !important; }
  .swell-block-fullWide.waza-fw-pc-pb-0 { padding-bottom: 0em !important; }
  .swell-block-fullWide.waza-fw-pc-pb-20 { padding-bottom: 2em !important; }
  .swell-block-fullWide.waza-fw-pc-pb-40 { padding-bottom: 4em !important; }
  .swell-block-fullWide.waza-fw-pc-pb-60 { padding-bottom: 6em !important; }
  .swell-block-fullWide.waza-fw-pc-pb-80 { padding-bottom: 8em !important; }
}
@media (max-width: 959px) {
  .swell-block-fullWide.waza-fw-sp-pt-0 { padding-top: 0em !important; }
  .swell-block-fullWide.waza-fw-sp-pt-20 { padding-top: 2em !important; }
  .swell-block-fullWide.waza-fw-sp-pt-40 { padding-top: 4em !important; }
  .swell-block-fullWide.waza-fw-sp-pt-60 { padding-top: 6em !important; }
  .swell-block-fullWide.waza-fw-sp-pt-80 { padding-top: 8em !important; }
  .swell-block-fullWide.waza-fw-sp-pb-0 { padding-bottom: 0em !important; }
  .swell-block-fullWide.waza-fw-sp-pb-20 { padding-bottom: 2em !important; }
  .swell-block-fullWide.waza-fw-sp-pb-40 { padding-bottom: 4em !important; }
  .swell-block-fullWide.waza-fw-sp-pb-60 { padding-bottom: 6em !important; }
  .swell-block-fullWide.waza-fw-sp-pb-80 { padding-bottom: 8em !important; }
}

調整と確認

対象のフルワイドブロックを選択して、高度な設定の追加 CSS クラスにクラスを追加します。

幅960px以上で上の余白を0にする場合は、waza-fw-pc-pt-0を指定します。

同じ幅で下の余白を8emにする場合は、waza-fw-pc-pb-80を追加します。

以下の画像は旧版の参考画像です。

現在のクラス名は掲載コードを使用してください。

サンプル

以上です。

余白を上下別々で微調整するプラグイン

過去には、余白調整用のプラグインも配布していました。

以下は旧プラグインの参考情報であり、現在の環境への導入手順ではありません。

以下の画像は旧版の参考画像です。

現在のクラス名は掲載コードを使用してください。

旧版の配布プラグインと、この記事のwaza-fw-*クラスを使うCSSは別の実装です。

現在の検証対象は上に掲載したCSSです。

旧プラグインの候補修正には実エディターでの操作・再保存の確認が残るため、修正版ZIPの導入手順は公開していません。

以下の画像は旧版の参考画像です。

現在のクラス名は掲載コードを使用してください。

余白調整のプラグイン

旧配布ZIPへの導線は、候補版の実編集・保存検証が済むまで案内を停止しています。

まとめ

現在案内している方法は、掲載CSSと手動のクラス指定です。

旧プラグインの画面にあるコントロールを追加しなくても、この方法で余白を指定できます。

クラス名の値はpxではなく、掲載CSSに対応するem単位です。

対象ブロックの文字サイズと公開画面の幅を確認し、上下の余白を調整してください。

旧GitHub配布版は本文の修正版と同期していないため、このページの掲載CSSを使用してください。

クラスとCSSを保存した後の実測

2026年10月2日、WordPress 7.1.2・SWELL 2.19.0のコードエディターで本文のクラスと記事専用CSSを保存し、公開側で測定しました。

文字サイズはPC・959px幅で16px、375px幅で15pxでした。

既存の無関係なクラスも再読み込み後に残ることを確認しました。

この結果は手動でクラスを指定した場合のもので、旧プラグインの追加コントロールを操作した結果ではありません。

適用範囲・戻し方・確認する幅

追加CSSクラスには先頭のドットを付けず、半角スペースで区切ります。

同じ画面幅の同じ辺に、0と80など複数の値を指定しないでください。

20は20pxではなく2emで、ブロックの文字サイズに応じて変わります。

公開画面の見本と同じにする場合は、waza-fw-pc-pt-0 waza-fw-pc-pb-80 waza-fw-sp-pt-20 waza-fw-sp-pb-40 の4つを入力します。

エディターのプレビュー幅と公開画面の幅は一致しない場合があるため、公開プレビューでも確認します。

戻すときは追加した4つのクラスを外します。

CSS自体を削除する場合は、同じクラスを使った他のブロックがないか先に確認してください。

元から入っているSWELLの余白クラスは残します。

既存画像は旧クラス名を使った説明画像です。

現在のクラス名と幅の条件は、上のコードと動く見本を参照してください。

末尾の旧プラグイン・GitHub配布コードは今回の修正版と同期・動作確認していません。

今回の検証対象は掲載CSSと見本です。

2026年10月1日の公開画面で、1280px幅は上0・下128px、390px幅は上31.2px・下62.4pxを確認しました。

文字サイズがそれぞれ16px・15.6pxのため、指定したem値に対応します。

959pxと960pxの境界でも切り替わることを確認しています。

エディター内の表示は未検証です。