ほぼ見た目のままに編集できるのが、WordPressのブロックエディター最大のメリットですが、どうもフロントエンド（閲覧画面）とバックエンド（編集画面）で見た目が異なると感じたことありませんか？

特に指定方法を誤ると、文字サイズや空白などがあからさまに違って、バグ？なんて思うこともありますね。

でもこれ、実は原因があるんです。

今回はブロックテーマの「theme.json」の文字サイズ指定の記述を例に、フロントエンドとバックエンドで差異が出ないようにする設定方法のツボを紹介します。

原因はフロントエンドとバックエンドの基準文字サイズの違い

ブロックテーマで基本となるスタイルを設定する場合には、「theme.json」を使います。

例えば、Twenty Twenty-Twoテーマで文字サイズを指定しているのは以下の2つの記述です。

"typography": {
	"font-size": {
		"huge": "clamp(2.25rem, 4vw, 2.75rem)",
		"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
		"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
	},
"fontSizes": [
	{
		"size": "1rem",
		"slug": "small"
	},
	{
		"size": "1.125rem",
		"slug": "medium"
	},
	{
		"size": "1.75rem",
		"slug": "large"
	},
	{
		"size": "clamp(1.75rem, 3vw, 2.25rem)",
		"slug": "x-large"
	}
]

ここで注目すべきは、すべての単位が相対値の「rem」で指定されていることです。

似たような相対値の単位に「em」というのがあり、実際に「theme.json」に記述することもできますが、この「em」こそ、WordPressのフロントエンドとバックエンドで文字サイズが異なってしまう原因です。

なぜ「em」だとおかしくなるのかは、「em」と「rem」の違いを理解する必要があり、それを理解するとおのずと解決方法が見つかります。

「em」と「rem」は似て非なるものなので．．

「em」と「rem」は何かの要素の相対値としてサイズを決定するという意味では同じものです。

しかし、文字サイズである「font-size」に例に話をすると、「em」はそれを使った要素の一番近い親階層にある「font-size」の指定値を基準にし、「rem」はブラウザの標準文字サイズを基準にする点が異なります。

WordPressでは、何かに内包していない限りは、段落ブロック（pタグ）の親はbodyタグ、bodyタグの親はhtmlタグになります。

バックエンド（編集画面）側では、HTMLタグには16px、bodyタグには13pxが指定されています。

フロントエンドでは、HTMLタグには16px、bodyタグには指定がありません。

この違いが「em」を使った場合の文字サイズに影響を与えます。

先ほど「em」と「rem」の基準の違いを紹介しました。

これに当てはめると、

  • バックエンドはすぐ上の親要素である「body」タグのサイズ13pxが基準
  • フロントエンドはすぐ上の親要素である「html」タグのサイズ16pxが基準

となり、「1em」と指定した場合には、

  • フロントエンドでは、16px x 1=16px
  • バックエンドでは、13px x 1 = 13px

となってしまい、フロントエンドとバックエンドで差異が生まれてしまうのです。

一方「1rem」と指定した場合には、

  • フロントエンドでは、16px x 1=16px
  • バックエンドでは、16px x 1 = 16px

と共通になるので、見た目も一緒になるということなのです。

別の見方をすれば、管理画面側のbodyタグの文字サイズを16pxにしてしまうという方法もあるのですが、それを行うことで、管理画面側で「em」指定されているすべての要素の文字サイズが変わってしまう（基準が変わるので．．）ことになりますから、それはそれで不都合が発生すると思います。

恐らくこれは、WordPressというツールが初期リリースされた段階からそうなっていて、そこにブロックエディターが登場して、できれば親和性を保つためにbodyの文字サイズ指定をなくす、または16pxや1remとしたかったものの、影響の大きさからそのままになっているのではないかと思慮します。

従って、WordPressで相対文字サイズを使用する場合は、基本を「rem」または絶対値（〇〇px）にして、親要素で文字サイズを絶対値（〇〇px）にしている場合のみ「em」を使うというのが妥当だと思います。

さらに言えば、「rem」も親であるhtmlがブラウザに依存していてサイズが可変するので、そもそも基本を絶対値にする、または「rem」にするというのを予め決めておくのもよいかも知れません。

WordPressのコード紹介をするページでは、その人の基本基準によって絶対値指定されていたり、相対値「em」で指定されていたり、「rem」で指定されていたりしますから、自身の基本基準に合わせて書き換えて利用するようにすると、「〇〇」で見ると何か変．．という不具合は出にくくなると思います。