mosir では7段階の余白を使用できます。インターフェイスは左右ゲージ型となり、マウスのドラッグで調節ができます[1]。
選択肢のラベルには、実際のピクセル数が付記されています。「XLは何ピクセルだったか」と思い出す必要はなく、デザインの知識が少ない担当者でも適切な余白を選ぶことができます。
実際の余白のサンプルは、下記のデモページを参照ください。
1. 余白一覧
余白ラベルは、ウィンドウ幅に対する変動値[2]となっています。最初の2桁が最小（画面幅390px）のピクセル数、後ろの2桁が最大（画面幅1280px）のピクセル数を表しています。
CSSでは rem 単位での設定となっており、 1rem = 16px です。
| サイズ名 | 最小 (px / rem) | 最大 (px / rem) |
|---|---|---|
| 2XS(4-6) | 4px / 0.25rem | 6px / 0.375rem |
| XS(8-12) | 8px / 0.5rem | 12px / 0.75rem |
| S(16-24) ブロック間余白 | 16px / 1rem | 24px / 1.5rem |
| M(32-48) | 32px / 2rem | 48px / 3rem |
| L(48-72) | 48px / 3rem | 72px / 4.5rem |
| XL(64-96) | 64px / 4rem | 96px / 6rem |
| 2XL(80-120) | 80px / 5rem | 120px / 7.5rem |
最小と最大
mosirの余白は必ず 4の倍数pxとなり、最小の値は日本のウェブサイトで一般に使用されてきた値を採用しています。サイズが大きくなるほど最小と最大の変化値も大きくなります。最大は最小の150%となる法則があります。
ウィンドウの左右余白
WordPressのブロックエディタは、各ブロックが自動的に左右余白を作る仕様となっています[3]。この余白は、 S(16-24) と同値です。
ブロック間余白
WordPressのブロックエディタは、マージン・パディングの上書きをしていない場合、自動的にブロック間に余白を作る仕様となっています。この余白は、 S(16-24) と同値です。
余白、さらに詳しく
ブロック間余白は、本文の文字サイズとの関係で 1em に見えますが、固定値です。つまり文字サイズがたとえ6XLであっても S(16-24) です。ブログ等の見出しのスタイルを決める際に、デザイナーとの認識違いの原因になりがちなので注意が必要です。
厳密には、さらに行間を加算した値が、実際に可視化される余白となります。これは mosir に限らない、ウェブブラウザの共通仕様です。
- デフォルト: 行間1.5の上部 = 0.25em
- p要素: 行間1.75の上部 = 0.375em
正確なブロック間余白を実現したい場合は、ブロックエディタで行間を 1 にするか、CSSの text-box-trim プロパティでの上書きを検討してください。
なお mosir では、投稿タイプが post だった場合のみ、見出し2の上余白が大きくなります。これは長文のコンテンツで可読性を確保するための配慮です。ブロックエディタの機能ではなく、CSSでスタイルを上書きしています。サンプルは下記ページを参照ください。
[1]: WordPressのブロックエディタで左右ゲージ型を利用できるのは、7段階までです。このため、theme.jsonで余白を追加して8段階以上になると、文字サイズと同様にドロップダウン型になります。
[2]: 変動値はCSSの clamp() 関数を使用して実装しています。オンライン上に多数のジェネレーターがあるので、変更したい場合はそれらを使用して再計算をしてください。
[3]: 高解像度の環境では左右余白がないように見えます。ウィンドウ幅がコンテンツ（なし・幅広の幅）よりも小さくなったとき、コンテンツがウィンドウの端から少し離れることで可視化されます。