デフォルトスタイルとスタイルの指定にプリセット値を使う方法

CSSでのプリセットの使い方

CSSに記述するスタイルコードでは、文字の大きさや種類、色などいろいろなことを書きますね。

例えば段落タグに文字種、文字サイズ、文字色を指定する場合はこんな感じ。

p{
font-family:〇〇;
font-size:〇〇;
color:〇〇;
}

この中の文字サイズを示す「font-size」を例に挙げると、〇〇の値には「〇〇px」とか「〇〇em」とか「〇〇rem」などを指定すると思います。

スタイルコードは全体に作用させたり、特定のクラスを持つ要素に作用させたりできるので便利な反面、指定を細かくするほど改修時に苦労します。知らずに指定されている値に対して別のスタイルコードで上書きを繰り返していたりして、だんだん分からなくなっていくこともあります。

でも、グローバルスタイルのプリセット値を使うと、これが一機に解消されるんです。

例えば前述の「font-size」に対しては、WordPressのグローバルスタイルでは以下の値（スラグ）が定義されています。

• 「–wp–preset–font-size–small」
• 「–wp–preset–font-size–medium」
• 「–wp–preset–font-size–large」
• 「–wp–preset–font-size--x-large」
• 「–wp–preset–font-size–xx-large」

これが、ブロックエディターの段落ブロックなどを挿入した時に出てくる「タイポグラフィ」というところに反映され、ボタンをクリックするとそれに応じたサイズに文字が拡縮するという仕組みになっています。

これを使って特定の要素の文字サイズを指定する場合は以下のように記述します。

font-size:var(--wp--preset--font-size--medium) !important;

最後の「!important」は適用されないときに優先させるためのものなので、必要な場合と不要な場合があるものの、上のコードであれば、「medium」に指定している文字サイズで表示されるようになります。

どんなプリセット値があるのかは前項の一覧をご覧ください

この文字サイズの指定は、一応前述のグローバルスタイルとして基礎定義されているのですが、ブロックテーマにある（クラシックテーマに挿入して「ハイブリッドテーマ」と呼ばれることもある）、「theme.json」というファイルから、上書きしたり追加したりすることが可能なので、プリセット値で指定しておけば、「theme.json」の値を変えたらすべての同じ要素が一括で変更できるんです。

つまり、予めプリセット値のあるものはプリセット値で指定しておくことで、後々いろいろなコードを修正する必要がない、便利な機能なんですね。

ちなみに、ブロックテーマでは、この値を「theme.json」で変更しなくても、サイトエディターの半月マークをクリックしてGUI上で編集することで上書きすることもできるので、「theme.json」なんて知らんし．．という方にも配慮されています。本当にWordPressっていろいろと考えられてるんですね。

補足として、サイトエディターのグローバルスタイルで編集した場合、そのサイトでのスタイルということになり、別のサイトを作った時に流用というのがしにくくなる（厳密にはテーマのエクスポートで継承できるがちょっとややこしい）ので、「theme.json」の扱い方は覚えておいた方がいいかも知れません。

以下のページで「theme.json」の編集をちょっとしやすくするプラグインを配布してますので、よかったらどうぞ。