ブロックの上下の余白だけを、PCとスマホで別々に変えたい。
ブロックエディタの標準機能では、ここが届きません。
結局CSSを書いて、更新して、確認して、という往復になります。
その往復を無くすために作ったのが「Motoki Spacing Controller」です。
サイドバーのボタンを押すだけで、上下の余白をPC・スマホ別に指定できます。
WordPress公式のプラグインディレクトリで配布しています。
できること
| 項目 | 内容 |
|---|---|
| 調整できるもの | 内側の余白（padding）と外側の余白（margin） |
| 方向 | 上下のみ。左右には対応していません |
| 画面幅 | PCとスマホで別々に指定できる |
| 対象のブロック | 種類を問いません。段落でも見出しでもグループでも使えます |
| 値 | 0 / 10 / 20 / 30 / 40 の5段階 |
| やり方 | サイドバーのボタンを押すだけ。CSSは書きません |
「セクションの下だけ詰めたい」「スマホのときだけ余白を減らしたい」という調整に向いています。
入れ方
- 管理画面のプラグイン → 新規プラグインを追加を開く
- 検索欄に
Motoki Spacing Controllerと入れる - 今すぐインストールを押して、有効化する
無料です。
ライセンスはGPLv2以降です。
| 条件 | 必要なもの |
|---|---|
| WordPress | 6.0 以上 |
| PHP | 7.4 以上 |
| 動作確認済み | WordPress 6.8.8 まで |
動作確認は6.8.8までです。
それより新しいWordPressで使う場合は、テスト環境で先に確かめてください。
使い方
有効化すると、ブロックを選んだときのサイドバーに2つのパネルが増えます。
| パネル名 | 何を変えるか |
|---|---|
| Padding Adjustment | 内側の余白。背景色や枠線の内側が広がります |
| Margin Adjustment | 外側の余白。隣のブロックとの距離が変わります |
それぞれのパネルに、4つの指定欄があります。
| 指定欄 | 効く場所 |
|---|---|
| Top … Amount (PC) | 上の余白・PC |
| Bottom … Amount (PC) | 下の余白・PC |
| Top … Amount (SP) | 上の余白・スマホ |
| Bottom … Amount (SP) | 下の余白・スマホ |
0・10・20・30・40 のボタンを押すと、その場で反映されます。
取り消すときは右側の Clear を押してください。
0とClearは違います。
0は「余白を0にする」指定で、Clearは「何も指定しない」状態に戻すものです。
使う前に知っておくこと5つ
ここを知らないと、思ったとおりにならない場面があります。
1. 数字はピクセルではありません
ボタンの「10」は10pxではなく 1em です。
| ボタン | 実際の値 |
|---|---|
| 0 | 0 |
| 10 | 1em |
| 20 | 2em |
| 30 | 3em |
| 40 | 4em |
emはその要素の文字サイズが基準です。
文字が大きいブロックでは、同じ「20」でも余白が広くなります。
見出しと段落に同じ値を入れても、見た目の余白は揃いません。
2. すべて !important が付きます
テーマ側の余白指定を上書きします。
テーマの指定に勝てるので確実に効きます。
その代わり、あとから別のCSSで上書きするのが難しくなります。
細かく詰めたい箇所は、このプラグインではなくCSSで書いたほうが素直です。
3. スマホの境目は960pxです
画面幅960px未満がスマホ扱いです。
タブレットの横向きはPC側に入ることがあります。
この値は固定で、設定では変えられません。
4. PCの指定は、スマホにも効きます
ここが一番つまずくところです。
PC側の指定には画面幅の条件が付いていません。
そのため、PCだけに値を入れると、スマホでも同じ余白になります。
| 指定のしかた | PCでの見え方 | スマホでの見え方 |
|---|---|---|
| PCだけ 20 を指定 | 2em | 2em（PCの指定がそのまま効く） |
| PCに20、SPに10を指定 | 2em | 1em（SPが上書きする） |
| SPだけ 10 を指定 | 指定なし | 1em |
「スマホだけ詰めたい」ときは、PCにも値を入れてください。
5. 余白はクラス名として保存されます
プラグインがやっているのは、ブロックにクラス名を足すことだけです。
<p class="pc-pt-20 sp-pt-10">本文</p>見た目を作っているのはプラグイン側のCSSです。
そのためプラグインを止めると、クラスは残ったまま余白だけが消えます。
対処は次の章に書きました。
クラス名の一覧
覚え方は「画面 – 種類と方向 – 値」です。
pc-pt-20
│ │ └ 値（0 / 10 / 20 / 30 / 40）
│ └ p=padding m=margin ／ t=上 b=下
└ pc=パソコン sp=スマホ（960px未満）組み合わせは全部で40個あります。
| 上（padding） | 下（padding） | 上（margin） | 下（margin） | |
|---|---|---|---|---|
| PC | pc-pt-0〜40 | pc-pb-0〜40 | pc-mt-0〜40 | pc-mb-0〜40 |
| スマホ | sp-pt-0〜40 | sp-pb-0〜40 | sp-mt-0〜40 | sp-mb-0〜40 |
クラス名を直接書いても効きます。
カスタムHTMLブロックや、テーマのテンプレートの中でも使えます。
プラグインを止めても余白を残したい場合
クラスを足しているだけなので、同じCSSを自分で持てば維持できます。
カスタマイザーの「追加CSS」に貼り付けてください。
そのあとプラグインを止めても、余白はそのままになります。
長い記事で使ったあとに乗り換えるときや、納品先で余計なプラグインを増やしたくないときに使えます。
/* Padding for PC */
.pc-pt-0 { padding-top: 0!important; }
.pc-pb-0 { padding-bottom: 0!important; }
.pc-pt-10 { padding-top: 1em!important; }
.pc-pb-10 { padding-bottom: 1em!important; }
.pc-pt-20 { padding-top: 2em!important; }
.pc-pb-20 { padding-bottom: 2em!important; }
.pc-pt-30 { padding-top: 3em!important; }
.pc-pb-30 { padding-bottom: 3em!important; }
.pc-pt-40 { padding-top: 4em!important; }
.pc-pb-40 { padding-bottom: 4em!important; }
/* Margin for PC */
.pc-mt-0 { margin-top: 0!important; }
.pc-mb-0 { margin-bottom: 0!important; }
.pc-mt-10 { margin-top: 1em!important; }
.pc-mb-10 { margin-bottom: 1em!important; }
.pc-mt-20 { margin-top: 2em!important; }
.pc-mb-20 { margin-bottom: 2em!important; }
.pc-mt-30 { margin-top: 3em!important; }
.pc-mb-30 { margin-bottom: 3em!important; }
.pc-mt-40 { margin-top: 4em!important; }
.pc-mb-40 { margin-bottom: 4em!important; }
/* Padding for SP */
@media not all and (min-width: 960px) {
.sp-pt-0 { padding-top: 0!important; }
.sp-pb-0 { padding-bottom: 0!important; }
.sp-pt-10 { padding-top: 1em!important; }
.sp-pb-10 { padding-bottom: 1em!important; }
.sp-pt-20 { padding-top: 2em!important; }
.sp-pb-20 { padding-bottom: 2em!important; }
.sp-pt-30 { padding-top: 3em!important; }
.sp-pb-30 { padding-bottom: 3em!important; }
.sp-pt-40 { padding-top: 4em!important; }
.sp-pb-40 { padding-bottom: 4em!important; }
}
/* Margin for SP */
@media not all and (min-width: 960px) {
.sp-mt-0 { margin-top: 0!important; }
.sp-mb-0 { margin-bottom: 0!important; }
.sp-mt-10 { margin-top: 1em!important; }
.sp-mb-10 { margin-bottom: 1em!important; }
.sp-mt-20 { margin-top: 2em!important; }
.sp-mb-20 { margin-bottom: 2em!important; }
.sp-mt-30 { margin-top: 3em!important; }
.sp-mb-30 { margin-bottom: 3em!important; }
.sp-mt-40 { margin-top: 4em!important; }
.sp-mb-40 { margin-bottom: 4em!important; }
}プラグインが読み込んでいるCSSと同じ中身です。
向いている場面と、向かない場面
| 場面 | 向き不向き |
|---|---|
| セクションの上下だけ詰めたい・広げたい | 向いている |
| スマホのときだけ余白を変えたい | 向いている |
| クライアントに触ってもらう画面にしたい | 向いている。ボタンだけなので説明が短く済む |
| 左右の余白を変えたい | 向かない。上下のみ |
| 1em刻みより細かく決めたい | 向かない。値は5段階で固定 |
| サイト全体の余白を統一したい | 向かない。テーマ側かCSSで決める話 |
「ここだけ直したい」に向いた道具です。
全体の設計を担うものではありません。
SWELLのフルワイドブロックの余白を、CSSで上下別々に調整する方法は別にまとめています。
まとめ
- ブロックの上下の余白を、PCとスマホで別々に指定できる
- WordPress公式ディレクトリで無料配布。GPLv2以降
- 数字はpxではなくem。
10は1em - スマホの境目は960px固定
- PCの指定はスマホにも効く。スマホだけ変えたいときは両方に入れる
- やっているのはクラス名の付与だけ。同じCSSを持てば止めても維持できる
- 上下のみ。値は5段階で固定
この記事は2026年9月15日時点の ver.1.0.0 で確認しています。
配布ページはこちらです。
