MENU

【theme.json】フォントサイズの設定

WordPress

この記事では、theme.jsonでフォントサイズを設定する方法について解説しています。

WordPressで用意されているデフォルトのフォントサイズではなく、オリジナルのフォントサイズを設定したい人はぜひご参考ください。

目次

settings.typography.fontSizes

フォントサイズを設定するには、settings.typography.fontSizesの項目を指定する必要があります。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "typography": {
            "defaultFontSizes": false,
            "fontSizes": [
                {
                    "name": "Small",
                    "size": "14px",
                    "slug": "small"
                },
                {
                    "name": "Medium",
                    "size": "18px",
                    "slug": "medium"
                },
                {
                    "name": "Large",
                    "size": "24px",
                    "slug": "large"
                },
                {
                    "name": "Extra Large",
                    "size": "32px",
                    "slug": "x-large"
                },
                {
                    "name": "Extra Extra Large",
                    "size": "40px",
                    "slug": "xx-large"
                }
            ]
        }
    }
}
theme.json
プロパティ解説
  • defaultFontSizes：WordPressで用意されているフォントサイズを使用するか
  • fontSizes：配列の中にオブジェクトを作成し、その中でフォントサイズの情報を定義します。

上記コードでは5つのフォントサイズを設定していますが、それ以上の数を設定することも可能です。
また、フォントサイズが6つ以上になるとプルダウンメニューから選択になります。

生成されるcssは以下のとおりです。

:root {
    --wp--preset--font-size--small: 14px;
    --wp--preset--font-size--medium: 18px;
    --wp--preset--font-size--large: 24px;
    --wp--preset--font-size--x-large: 32px;
    --wp--preset--font-size--xx-large: 40px;
}
CSS

設定したフォントサイズが選択された場合、エディタとフロントには以下のクラスが付与されスタイルが適用されます。

/* Smallが選択された場合 */
.has-small-font-size {
    font-size: var(--wp--preset--font-size--small) !important;
}

/* Mediumが選択された場合 */
.has-medium-font-size {
    font-size: var(--wp--preset--font-size--medium) !important;
}

/* Largeが選択された場合 */
.has-large-font-size {
    font-size: var(--wp--preset--font-size--large) !important;
}

/* Extra Largeが選択された場合 */
.has-x-large-font-size {
    font-size: var(--wp--preset--font-size--x-large) !important;
}

/* Extra Extra Largeが選択された場合 */
.has-xx-large-font-size {
    font-size: var(--wp--preset--font-size--xx-large) !important;
}
CSS

可変サイズの適用

可変サイズの適用では、fluidプロパティが用意されており最大値・最小値を設定することでWordPress側でclampの計算式を自動で算出してくれます。

しかし、ブレイクポイントなどの設定をすることができないため、個人的には「Min-Max-Value Interpolation」のツールを使って値を設定するほうがやりやすいです。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "typography": {
            "defaultFontSizes": false,
            "fontSizes": [
                {
                    "name": "Small",
                    "size": "clamp(0.75rem, 0.661rem + 0.45vw, 0.875rem)",
                    "slug": "small"
                }
            ]
        }
    }
}
theme.json

サイト全体のデフォルトのフォントサイズを変更

この設定はハードコーディングされている場所にも影響が出ます。

サイト全体で適用されているデフォルトのフォントサイズを変更したい場合は、styles.typography.fontSizeに値を設定します。

下記のコードは、Mediumで生成されたcss変数を指定しています。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "styles": {
        "typography": {
            "fontSize": "var(--wp--preset--font-size--medium)"
        }
    }
}
theme.json

生成されるcssは以下のとおりです。

:root :where(body) {
    font-size: var(--wp--preset--font-size--medium);
}
CSS

ブロックごとのデフォルトのフォントサイズを変更

この設定はハードコーディングされている場所にも影響が出ます。

各ブロックに適用されているデフォルトのフォントサイズを変更したい場合は、styles.blocks.ブロック名.typography.fontSizeに値を設定します。

段落ブロックなどの頻繁に使用するブロックに設定することで、毎回フォントサイズを変更する手間が省けます。

下記のコードは、Largeで生成されたcss変数をcore/paragraph(段落ブロック)に指定しています。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "styles": {
        "blocks": {
            "core/paragraph": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--large)"
                }
            }
        }
    }
}
theme.json

生成されるcssは以下のとおりです。

:root :where(p) {
    font-size: var(--wp--preset--font-size--large);
}
CSS

フォントサイズを自由に設定させない

ユーザーがページを作成する際、決められたフォントサイズ以外を使ってほしくない場合は、settings.typography.customFontSizeの値をfalseに変更します。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "typography": {
            "customFontSize": false,
        }
    }
}
theme.json
WordPress
よかったらシェアしてね！
  • URLをコピーしました！
目次