WordPress標準のブロックテーマを更新したら、フォントサイズや余白がおかしくなった時の対処

公開日:2024(令和6)年7月15日/最終更新日:

WordPressのトラブル対処方法の画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



WordPress6.6から、theme.jsonで利用できるバージョンが2から3に上がります。

これが即座にWordPress標準のブロックテーマであるTwenty Twenty-Two、Twenty Twenty-Three、Twenty Twenty-Fourで採用されるかどうかは分かりません(ひょっとしたら6.6リリースと同時に代わるかも知れません)が、将来的には変更されることは間違いないと思います。

theme.jsonのバージョンが2から3に変わることで、使用できる設定情報が増えて、よりtheme.jsonでサイトの基本的なスタイルの設定ができるようになることは間違いないのですが、このページのタイトルのように、今までのフォント設定が適用されなくなって文字サイズがおかしくなったり、余白が今までと変わってしまったりします。

この現象は、バージョン2では同じスラグを持つフォントとスペースの設定がWordPressの標準と同一の場合にtheme.json側が優先適用されていたものが、バージョン3で逆(WordPressの標準が優先)になるために発生します。

WordPress標準のブロックテーマを利用しているサイトで、テーマ更新したらいきなり文字サイズが大きく(小さく)なってしまった、余白が変わってしまったという方は、以下のようにtheme.jsonへ行の追加をすることで、今まで通りの優先順序に戻すことができます。

WordPress6.6以降でtheme.jsonのバージョンを3へ変更した場合のみに必要な措置ですので、この条件でない方は何もする必要はありません(サイトに変化もないはずです)

フォントサイズの優先順位を元に戻す

theme.json内のフォント指定の部分に以下の指定を追加します。

"defaultFontSizes": false,

Twenty Twenty-Threeの場合は具体的に以下のようにします。

"typography": {
	"defaultFontSizes": false,
	"dropCap": false,
	"fluid": true,
..........

余白サイズ(スペーシングサイズ)を元に戻す

theme.json内のフォント指定の部分に以下の指定を追加します。

"defaultSpacingSizes": false,

Twenty Twenty-Threeの場合は具体的に以下のようにします。

"spacing": {
	"defaultSpacingSizes": false,
	"spacingScale": {
		"steps": 0
	},
	"spacingSizes": [
...........

この変更については、以下の公式ブログで紹介されていますが、気づかない方も多いと思いますのでメモとして公開しておきます。

これによれば、上記の追加コードがない場合にはtrueになるようになっているという説明がされていますが、個人的にはこういう変更があった時には、今まで使っている方が戸惑わないよう、デフォルトをfalseにすべきなのでは?と感じました。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
画面に表示させずにデバッグ情報(エラーや警告の情報)を取得する方法