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;
}

デフォルトの line-height のカスタマイズ

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

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

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

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

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

デフォルトのフォントファミリーのカスタマイズ

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

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