WordPress の theme.json での流体タイポグラフィ（Fluid typography）と 6.4 での最大・最小 ViewportWidth 指定の覚書

今回は theme.json で指定できる settings プロパティのタイポグラフィの fluid について、WordPress 6.4 で最大・最小 ViewportWidth 指定ができるようになるので、あらためておさらいしながら見ていきます。

流体タイポグラフィ（Fluid typography）とは？

現在のウェブサイトはあらゆる画面幅で見られます。読みやすい文字サイズも画面サイズやレイアウトによって異なりますので、大きな画面では大きな文字サイズに、小さい画面では小さい文字サイズに流動的なフォントサイズにする事…という解釈で良いですよね？

流動タイポグラフィを見る前に、例えばフォントサイズ Medium を指定した theme.json が以下のようになっていたとします。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"name": "Medium",
					"slug": "medium",
					"size": "14px"
				}
		}
	}
}

この14pxを流動タイポグラフィにするには theme.json の settings > typography に以下のように書くことで動作します。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
		"fluid":true,
			"fontSizes": [
				{
					"name": "Medium",
					"slug": "medium",
					"size": "14px",
					"fluid": {
						"min": "10px",
						"max": "18px"
					}
				}
		}
	}
}

これで、画面サイズが大きい時は 18px で表示し、画面サイズが狭くなるにつれて 10px になるまで縮小します。

6.3 までの仕様での問題

画面サイズに応じて文字サイズが可変するなんて便利！と思うかもしれませんがそうは問屋が卸しません。

文字サイズが可変するのは画面サイズが最小 320px 〜最大幅広サイズ（settings > layout > wideSize）あるいは指定がない場合は 1600px。

幅広や1600pxではなくてコンテンツ幅で最大文字サイズになるようにしたいと思っても、今までの theme.json の仕様ではできないので css で指定する必要がありました。

※とは言え今までも theme.json のフォントのサイズ指定で clamp(14px, calc( 14px + (100vw - 360px) * ( (16 - 14) / (1200 - 360) ) ), 16px) ） とか書いてたので、別にそれでもできる。

6.4 で最大幅、最小幅の指定が可能になった

WordPress 6.4 では maxViewportWidth と minViewportWidth というプロパティが追加されました。これを使うと以下のように指定できます。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
		"fluid": {
				"maxViewportWidth": "1120px",
				"minViewportWidth": "320px"
			},
			"fontSizes": [
				{
					"name": "Medium",
					"slug": "medium",
					"size": "14px",
					"fluid": {
						"min": "10px",
						"max": "18px"
					}
				}
		}
	}
}

これによって、今までは幅広サイズ（または 1600px）まで文字が大きくなり続けてしまいましたが、例えば maxViewportWidth を contentSize と同じにする事で、文字の拡大が止まる画面サイズをコンテンツ幅と揃えたり、任意に指定する事ができるようになります。

所感

とりあえず

6.3以前のWordPress環境では当然効かないので、汎用テーマにおいては今の段階でこちらに切り替えてしまうのはまずい
文字サイズのジャンプ率はちゃんと計算しないときれいに見えないので、そうなると CSSで書いた方が良いのではないかな…

と思ったりもしますが、theme.json で制御できるようになってればノーコードで設定できる拡張機能も作りやすいので良い事ではないかなと思う今日この頃です。

元資料

Fluid typography: add min and max viewport width configurable options by ramonjd · Pull Request #53081 · WordPress/gutenberg · GitHub

What? Welcome to this PR! Please test its exciting features. Wow! We're adding configurable min and max viewport width values to the typography.fluid theme.json schema, to allow theme developer…

GitHub

Miscellaneous Editor changes in WordPress 6.4

この記事を書いた人

石川栄和代表取締役

名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー（LT）
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

今すぐチェック

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。

VK パターンライブラリを今すぐチェック

ブロックエディターで

ABテストを

自由に作成できる VK AB Testing

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。

VK AB Testing を詳しく見る

クリック率・売上を上げる AB テストが簡単に出来る！