2026-03-01

テーマで使う余白を追加・変更したい

mosir の余白は、テーマ内の theme.json を編集することで、追加・変更ができます。

新規追加をしたい場合は、JSONの編集以外にも作業が必要となることがあります。ページの後半で解説します。

0. すぐに余白を変えたい場合

非推薦ですが、子テーマを作る時間がない…余白の変更をとりあえず確認したい…という場合は「外観 > カスタマイズ」画面の「追加CSS」でCSS変数を直接上書きすることもできます。この変更は公開ページのみに反映され、編集画面の文字サイズは変わりません。

以下の例は5ピクセル単位で固定した例です。 mosir が想定しているユーザー体験は得られなくなります。

:root {
    --wp--preset--spacing--2-x-small: 5px;
    --wp--preset--spacing--x-small: 10px;
    --wp--preset--spacing--small: 20px;
    --wp--preset--spacing--medium: 30px;
    --wp--preset--spacing--large: 40px;
    --wp--preset--spacing--x-large: 50px;
    --wp--preset--spacing--2-x-large: 60px;
}

1. 各サイズについて

余白のサンプルはデモサイトの下記ページをご覧ください。

余白 – mosir

余白の詳細はドキュメントの下記ページをご覧ください。

余白 | WordPressテーマ mosir

表示名	主な使用箇所
2XS(4-6)	ヘッダが二段になった場合の上下ギャップ、カード、メディア内の要素間余白等
XS(8-12)	ヘッダの左右ギャップ等
S(16-24) ブロック間余白	マージン・パティングが未設定の場合のブロック間等、1行分程度に感じる余白
M(32-48)	投稿タイプが `post` のときの見出し2の上余白、ページタイトルとサブタイトルの間等
L(48-72)	本文下部とフッタ間の余白
XL(64-96)	新着情報セクションの上下余白
2XL(80-120)	余裕のあるデザインを採用した場合のセクションの上下余白。テーマ内では使用していない

2. html 要素との関係

文字サイズは rem と vw によって算出されています。このため、全体に大きく、または小さくしたい場合は html 要素の文字サイズを変更すると、すべてに反映されます（この場合、文字サイズも影響を受けます）。

3. 既存の余白を変更する

子テーマを作成し、 mosir の theme.json を複製してください。

作成したJSONファイルを開き、「”spacingSizes”」で検索をすると、余白を定義している箇所が見つかります。バージョン1.1.1 時点では以下のように定義しています。

"spacingSizes": [
	{
		"name": "2XS(4-6)",
		"size": "calc(clamp(0.25rem, 0.225vw + 0.195rem, 0.375rem))",
		"slug": "2-x-small"
	},

    ・・・中略

	{
		"name": "2XL(80-120)",
		"size": "calc(clamp(5rem, 4.494vw + 3.904rem, 7.5rem))",
		"slug": "2-x-large"
	}
]

各サイズの定義

name, size, slug の3つで1つの文字サイズを定義しています。以下の通り編集してください。

name

目盛りにカーソルを置いたときに表示されるサイズ名です。mosir は国際化をしている関係上、英語としています。

size

CSSで解釈できる文字サイズを、改行せず入力してください。mosir では clamp() 関数で指定しています。

slug

パレットのシステム上の文字サイズ名です。変更はテーマ全体に影響し、CSS変数や、余白を変えたときのクラス名に反映されます。この変更はしないことをおすすめします。

表示を確認する

変更は即時反映されます。ブラウザのキャッシュを削除して公開ページを更新し、表示を確認してください。管理画面の「外観 > デザイン」内のスタイル画面ではプレビューができません。テスト記事等を書いて確認してください。

4. 新規追加をした場合

追加した色を、WordPressのブロックエディタのみで使用する場合は、作業はありません。CSS、SCSSで使用したい場合は以下の通り作業してください[1]。

子テーマ用のCSSを追加する

子テーマ内に、上書き用のCSSを新規追加してください。

CSS変数を追加する

WordPressは theme.json で定義された色を --wp--preset--spacing--(文字サイズのスラッグ) というCSS変数に変換しています。

mosirのCSSでは、ファイルの冒頭でこれらの変数を wp--preset-- を外して簡略化した変数に代入しなおしています。

:root {
    --screen-x-spacing: var(--wp--preset--spacing--small); // Same value as --wp--style--root--padding-***
    --spacing-2xs: var(--wp--preset--spacing--2-x-small);
    --spacing-xs: var(--wp--preset--spacing--x-small);
    --spacing-sm: var(--wp--preset--spacing--small);

・・・

追加した変数が huge であれば、以下のCSSを子テーマ用のCSSに追加してください。CSS変数 --spacing-huge が使用できるようになります。

:root {
  --spacing-huge: var(--wp--preset--spacing--huge);
}

補足: `spacingScale` プロパティ

mosir ではすべての余白に「流体余白」を採用していますが、theme.jsonの spacingScale プロパティを使用していません。余白ルールはサイトの目的やカラーパレットによって大きく変動し、数学的な変化になるとは限らないためです。このため mosir では、それぞれの余白を clamp() 関数で明示しています。

もちろん spacingScale プロパティに変更することも可能です。しかし、CSS変数の名称やブロックエディタで付与されるクラス名が変更されるため、別途、CSS変数を定義し直す等の対応をしてください。

[1]: WordPressの変数をそのまま使用することもできます…が、避けるべきです。機械的に生成された変数名なので長くて覚えにくく、かつ、WordPressに依存しているため、改修の際に困ることになります