ブロックごとの余白をPC・スマホ別に調整する｜Motoki Spacing Controllerの使い方

2023.10.092026.10.21

ブロックの上下の余白だけを、PCとスマホで別々に変えたい。

標準の余白設定はブロックとテーマの対応状況によって異なります。この記事では、960pxを境に上下の余白を切り替える追加機能を紹介します。

結局CSSを書いて、更新して、確認して、という往復になります。

余白指定のたびにCSSを書く手間を減らすために作ったのが「Motoki Spacing Controller」です。公開画面での確認は引き続き必要です。

サイドバーのボタンを押すだけで、上下の余白をPC・スマホ別に指定できます。

WordPress公式のプラグインディレクトリで配布しています。

Motoki Spacing Controller

できること

スクロールできます

項目	内容
調整できるもの	内側の余白（padding）と外側の余白（margin）
方向	上下のみ。左右には対応していません
画面幅	PCとスマホで別々に指定できる
対象のブロック	出力要素に指定クラスが反映されるブロックが対象です。段落でも見出しでもグループでも使えます
値	0 / 10 / 20 / 30 / 40 の5段階
やり方	サイドバーのボタンを押すだけ。CSSは書きません

「セクションの下だけ詰めたい」「スマホのときだけ余白を減らしたい」という調整に向いています。

入れ方

管理画面のプラグイン → 新規プラグインを追加を開く
検索欄に Motoki Spacing Controller と入れる
今すぐインストールを押して、有効化する

無料です。

ライセンスはGPLv2以降です。

スクロールできます

条件	必要なもの
WordPress	6.0 以上
PHP	7.4 以上
動作確認済み	配布readme表記：WordPress 6.8

配布ZIPのreadmeにはTested up to: 6.8と記載されています。

2026年10月21日の再確認では、配布ページのTested up toは6.8.11、1.0.0の配布ZIP内readmeは6.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はその指定のクラスを外します。1.0.0では、たとえばPC上paddingを操作すると pc-pt で始まるクラスをまとめて除去してから選択値を付けます。同じ接頭辞の独自クラスがある場合も消えるため、操作前にクラス欄と本文を控え、保存後に無関係なクラスが残っているか確認してください。

2026年10月13日、WordPress 7.1.3・Twenty Twenty-Five・Motoki Spacing Controller 1.0.0の新規Local環境で、架空の段落ブロックを確認しました。未指定の段落では数字のボタンが選択されておらず、指定済みの段落では該当する数字が青く表示されます。以下は英語UIの実画面です。

設定済みの例は、PCのpaddingが上10・下20、marginが上30・下40、SPのpaddingが上0・下10、marginが上20・下30です。公開側の架空ページを1280px・960px・959px・375pxで確認し、960px以上ではPC用、959px以下ではSP用の指定が反映されました。10・20・30・40はそれぞれ1・2・3・4emとして、その時点の計算済み文字サイズに比例します。このテーマでは文字サイズ自体も画面幅で変わるため、同じ指定でも実際のpx値は変わります。

今回の確認は架空段落の設定パネルと、保存済みクラスの表示までです。すべてのブロックやテーマ、設定変更後の保存操作、本番サイトでの動作を確認したものではありません。以前の検証記録はそのまま残しています。

Motoki Spacing Controller 1.0.0の余白設定パネル（未指定・架空段落・WordPress 7.1.3・Local・2026年10月13日） — 未指定の架空段落：数字ボタンは未選択です。 WordPress 7.1.3、ver.1.0.0、架空データ、2026年10月13日Local確認。

Motoki Spacing Controller 1.0.0の余白設定パネル（設定済み・架空段落・WordPress 7.1.3・Local・2026年10月13日） — 設定済みの架空段落：PC／SPの上下paddingとmarginを別々に指定した例です。 WordPress 7.1.3、ver.1.0.0、架空データ、2026年10月13日Local確認。

使う前に知っておくこと5つ

ここを知らないと、思ったとおりにならない場面があります。

1. 数字はピクセルではありません

ボタンの「10」は10pxではなく 1em です。

スクロールできます

ボタン	実際の値
0	0
10	1em
20	2em
30	3em
40	4em

emはその要素の文字サイズが基準です。

文字が大きいブロックでは、同じ「20」でも余白が広くなります。

見出しと段落に同じ値を入れても、見た目の余白は揃いません。

2. すべて !important が付きます

テーマ側の余白指定を上書きします。

テーマ側にも!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を既定のままにするならSPだけ指定し、両方の値を固定する場合のみPCとSPを指定する

PCをテーマ既定の余白のまま残したい場合は、PCをClearにしてSPだけ指定してください。

5. 余白はクラス名として保存されます

プラグインがやっているのは、ブロックにクラス名を足すことだけです。

<p class="pc-pt-20 sp-pt-10">本文</p>

見た目を作っているのはプラグイン側のCSSです。

プラグインを停止すると、そのCSSは読み込まれなくなりますが、保存済みのクラスは残ります。余白が0になるとは限らず、テーマの既定値や同名クラスの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`

0 / 10 / 20 / 30 / 40 の5段階を8種類ぶん。合わせて40クラス

クラス名を直接書いても効きます。

カスタムHTMLブロックや、テーマのテンプレートの中でも使えます。

プラグインを止めても余白を残したい場合

クラスを足しているだけなので、同じCSSを自分で持てば維持できます。

カスタマイザーの「追加CSS」に貼り付けてください。

追加CSSを保存してからプラグインを停止し、キャッシュを更新して公開画面を比較します。同名クラスや!importantの競合、読み込み順によって結果が変わる場合があります。停止すると設定パネルもなくなり、追加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の指定はスマホにも効く。PCの既定値を残すならSPだけ指定する
やっているのはクラス名の付与だけ。同じCSSを持てば止めても維持できる
上下のみ。値は5段階で固定

この記事は2026年9月15日時点の ver.1.0.0 で確認しています。

配布ページはこちらです。

Motoki Spacing Controller

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。

PCとSPの指定を比較する見本

以下は配布CSSの該当ルールを見本の中だけに適用した表示で、文字サイズ16pxでは2emが32px、1emが16pxです。

PCのみ20：PCもSPも上32px

PC20・SP10：PC32px、SP16px

SPのみ10：PC0px、SP16px（この見本）

見本のPC0pxはこの見本独自の初期値で、実際のブロックではテーマ既定の余白になります。

よくある質問：Motoki Spacing Controllerでブロックの余白をPC・スマホ別に調整するとき

Motoki Spacing Controllerでは、何を調整できますか？

記事では、ブロックの上下の余白だけを、PCとスマホで別々に指定できます。内側の余白（padding）と外側の余白（margin）に対応し、左右には対応していません。値は0 / 10 / 20 / 30 / 40の5段階で、サイドバーのボタンを押すだけで、CSSは書きません。

導入に必要な条件はありますか？

記事では、WordPress公式のプラグインディレクトリで配布していて、無料です。ライセンスはGPLv2以降です。WordPress 6.0以上、PHP 7.4以上が必要で、動作確認済みは配布readme表記でWordPress 6.8です。それより新しいWordPressで使う場合は、テスト環境で先に確かめます。

ボタンの「10」は、10pxですか？

10pxではありません。記事では、ボタンの数字はpxではなくemで、10は1em、20は2emです。emはその要素の文字サイズが基準なので、文字が大きいブロックでは、同じ「20」でも余白が広くなります。

「0」と「Clear」は、何が違いますか？

記事では、0は「余白を0にする」指定で、Clearは「何も指定しない」状態に戻すものです。

PCだけに値を入れると、スマホにも効きますか？

効きます。記事では、PC側の指定には画面幅の条件が付いていないため、PCだけに値を入れると、スマホでも同じ余白になります。PCをテーマ既定の余白のまま残したい場合は、PCをClearにしてSPだけ指定します。

スマホの境目は、何pxですか？

記事では、画面幅960px未満がスマホ扱いです。タブレットの横向きはPC側に入ることがあります。この値は固定で、設定では変えられません。

テーマ側の余白指定より優先されますか？

記事では、すべて!importantが付くため、テーマ側の余白指定を上書きします。ただし、テーマ側にも!importantがある場合は詳細度や記述順で競合するため、必ず上書きできるわけではありません。あとから別のCSSで上書きするのが難しくなるので、細かく詰めたい箇所はCSSで書いたほうが素直です。