mosir の文字サイズは、テーマ内の theme.json を編集することで、追加・変更ができます。
- 新規追加をしたい場合は、JSONの編集以外にも作業が必要となることがあります。ページの後半で解説します。
0. すぐに文字サイズを変えたい場合
非推薦ですが、子テーマを作る時間がない…文字サイズの変更をとりあえず確認したい…という場合は「外観 > カスタマイズ」画面の「追加CSS」でCSS変数を直接上書きすることもできます。この変更は公開ページのみに反映され、編集画面の文字サイズは変わりません。
以下の例は全体に文字サイズの変化を小さく、かつピクセル単位にした例です。 mosir が想定しているユーザー体験は得られなくなります。
:root {
--wp--preset--font-size--x-small: 10px;
--wp--preset--font-size--small: 12px;
--wp--preset--font-size--medium: 14px;
--wp--preset--font-size--large: 16px;
--wp--preset--font-size--x-large: 18px;
--wp--preset--font-size--2-x-large: 20px;
--wp--preset--font-size--3-x-large: 24px;
--wp--preset--font-size--4-x-large: 28px;
--wp--preset--font-size--5-x-large: 32px;
--wp--preset--font-size--6-x-large: 36px;
--wp--preset--font-size--em-small: 0.8em;
--wp--preset--font-size--em-large: 1.2em;
}1. 各サイズについて
文字サイズのサンプルはデモサイトの下記ページをご覧ください。
文字サイズの詳細はドキュメントの下記ページをご覧ください。
| 表示名 | 主な使用箇所 |
|---|---|
| XS (10-12) | 一般に考えられる最小の文字サイズ。テーマ内では使用していない |
| S (12-14) | カード内の日付、ラベルテキスト等 |
| M (14-16) デフォルト | 本文と大半のナビゲーションのテキスト |
| L (16-18) | レベル4見出し、メガメニューのラベルテキスト、セクション見出し下のサブタイトル |
| XL (18-20) | レベル3見出し、メインビジュアルのリード文 |
| 2XL (20-24) | レベル2見出し、2段組のときのセクション見出し |
| 3XL (24-32) | レベル1見出し、セクション見出し |
| 4XL (32-40) | テーマ内では使用していない |
| 5XL (40-48) | テーマ内では使用していない |
| 6XL (48-60) | メインビジュアルの大見出し |
2. html 要素との関係
文字サイズは rem と vw によって算出されています。このため、全体に大きく、または小さくしたい場合は html 要素の文字サイズを変更すると、すべてに反映されます（この場合、余白も影響を受けます）。
3. 既存の文字サイズを変更する
子テーマを作成し、 mosir の theme.json を複製してください。
作成したJSONファイルを開き、「”fontSizes”」で検索をすると、文字サイズを定義している箇所が見つかります。バージョン1.1.1 時点では以下のように定義しています。
"fontSizes": [
{
"name": "XS (10-12)",
"size": "calc(clamp(0.625rem, 0.225vw + 0.57rem, 0.75rem))",
"slug": "x-small"
},
・・・中略
{
"name": "em-L (125%)",
"size": "1.25em",
"slug": "em-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--font-size--(文字サイズのスラッグ) というCSS変数に変換しています。
mosirのCSSでは、ファイルの冒頭でこれらの変数を wp--preset-- を外して簡略化した変数に代入しなおしています。
:root {
--font-size-xs: var(--wp--preset--font-size--x-small);
--font-size-sm: var(--wp--preset--font-size--small);
--font-size-md: var(--wp--preset--font-size--medium);
・・・
追加した変数が huge であれば、以下のCSSを子テーマ用のCSSに追加してください。CSS変数 --font-size-huge が使用できるようになります。
:root {
--font-size-huge: var(--wp--preset--font-size--huge);
}
補足: fluid プロパティ
mosir ではすべての文字サイズに「流体タイポグラフィ」を採用していますが、theme.jsonの fluid プロパティを使用していません。これはWordPress 6.9の時点では最小値と最大値の基準となる画面サイズ＝ブレークポイントを変更できないためです。
どこまでをスマートフォン、どこからを高解像度画面として扱うかは、制作会社やプロジェクトによって異なります。このため mosir では、それぞれの文字サイズを clamp() 関数で明示しています。
もちろん fluid プロパティに変更することも可能です。しかし、CSS変数の名称は変えないようにしてください。また、 mosir のブレークポイントはWordPressとは異なるため、画面サイズによっては文字のバランスに違和感が生じることがあります。
[1]: WordPressの変数をそのまま使用することもできます…が、避けるべきです。機械的に生成された変数名なので長くて覚えにくく、かつ、WordPressに依存しているため、改修の際に困ることになります