MENU

【theme.json】行間の設定

WordPress

この記事では、theme.jsonで行間を設定する方法について解説しています。

エディタとフロントの行間が上手く同期できない人はぜひご参考ください。

目次

settings.typography.lineHeight

WordPressのデフォルト設定では、行間の設定は無効化されています。

行間の設定を有効化するには、settings.typography.fontFamiliesの値にtrueを指定する必要があります。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "typography": {
            "lineHeight": true
        }
    }
}
JSON

行間を変更すると、HTMLタグに対して「style=”line-height: 設定値”」が付与されます。
クラスは生成されません。

エディタとフロントの行間を同期させる

エディタとフロントの行間を同期させる簡単な方法は、サイト全体に共通の行間値を設定します。

設定方法は、styles.typography.lineHeightに共通値を設定します。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "typography": {
            "lineHeight": true
        }
    },
    "styles": {
        "typography": {
            "lineHeight": "1.5"
        }
    }
}
JSON

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

:root :where(body) {
    line-height: 1.5;
}
CSS

ブロックごとの行間を変更する

ブロックごとの行間を変更することも可能で、core/paragraph(段落)の行間は1.25にして、core/heading(見出し)の行間は1.75にするといったことができます。

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "typography": {
            "lineHeight": true
        }
    },
    "styles": {
        "blocks": {
            "core/paragraph": {
                "typography": {
                    "lineHeight": "1.25"
                }
            },
            "core/heading": {
                "typography": {
                    "lineHeight": "1.75"
                }
            }
        }
    }
}
JSON

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

:root :where(p) {
    line-height: 1.25;
}

:root :where(.wp-block-heading) {
    line-height: 1.75;
}
CSS
WordPress
よかったらシェアしてね！
  • URLをコピーしました！
目次