CSS カスタムプロパティを使ったカスタマイズ

デフォルトのテキストの1行の長さ（カラム幅）のカスタマイズ

unitone ではコンテンツ幅（記事の文章が表示されるエリアの幅）や各ブロックでのデフォルトのテキスト長は --unitone--measure という CSS カスタムプロパティで指定されています。下記の CSS でカスタマイズできます。

:root {
  --unitone--measure: 38rem;
}

ヘッダー・フッターの幅や幅広の幅などで使用されているコンテナー幅（コンテナーブロックのデフォルト幅）は下記の CSS でカスタマイズできます。

:root {
  --unitone--container-max-width: 1180px;
}

基本的にはグローバルスタイルエディターで設定するのがベターですが、下記の CSS でもカスタマイズできます。表示したい px 換算の数値を単位なしで指定します。

:root {
  --unitone--base-font-size: 20; /* 20px で指定する例 */
}

unitone の余白サイズは文字サイズと line-height も使用して算出されるため、文字サイズを大きくすると余白サイズも大きくなります。

基本的にはブロックのインスペクター（設定パネル）で設定するのがベターですが、下記の CSS でもカスタマイズできます。

/* 記事の h2 見出しの文字サイズのカスタマイズ */
.entry-content > h2,
.wp-block-post-content > h2 {
  --unitone--font-size: 5;
}

-2〜7まで設定できます。0 がデフォルトの文字サイズで、-1 だとそれより少し小さい、1 だとそれより少し大きい、という指定になります。

unitone の文字サイズは調和数列に --unitone--harmonic-sequence-base を掛けて算出されます。--unitone--harmonic-sequence-base が小さいほどスケールは大雑把になり、大きいほど細かくなります。

下記の CSS でカスタマイズできます。

:root {
  --unitone--harmonic-sequence-base: 8;
}

グローバルスタイルエディターで設定するのがベターですが、下記の CSS でもカスタマイズできます。

unitone の line-height は文字の上下に文字サイズの何掛けの余白を追加するか、という計算式で算出されます。--unitone--half-leading が 0.3 の場合、line-height は 1.6 となります。

:root {
  --unitone--half-leading: 0.3;
}

ただし、unitone の line-height は文字サイズによって自動的に調整されるため、1.6 がそのまま適用されるのはデフォルトの文字サイズのときになります。

unitone の余白サイズは文字サイズと line-height も使用して算出されるため、line-height を大きくすると余白サイズも大きくなります。

テキストは一般的には文字サイズが大きくなるほど行間を狭くしたほうが読みやすいです。unitone では文字サイズに応じて line-height が自動調整されますが、その調整は下記の基準でおこなわれています。

A = (1, 1.6) // 1rem のとき line-height: 1.6
B = (4, 1.1) // 4rem のとき line-height: 1.1

すると、下記の計算式が成り立ちます。

y = -0.1666666666667x + 1.7666666666667 // y = line-height, x = Font size ratio

つまりこの -0.1666666666667 が --unitone--line-height-slope となります。--unitone--line-height-slope を上書きすることでこの行間の傾斜角をカスタマイズできます。

:root {
  --unitone--line-height-slope: -0.1666666666667;
}

下記の CSS でカスタマイズできます。

:where(body) {
  --unitone--font-family: serif;
}