今回は 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 で制御できるようになってればノーコードで設定できる拡張機能も作りやすいので良い事ではないかなと思う今日この頃です。
元資料
この記事を書いた人
- 代表取締役
-
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー（LT）
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他
最近の投稿
WordPress2025年6月16日ブロックテーマでGoogleフォントを追加・設定する方法
WordPress2025年4月9日AIコーディング時代の到来によって手を動かすだけのエンジニアは完全に淘汰されるのか？- WordPress2024年12月25日2024年リリースのイチオシ機能を一挙紹介！
- WordPress2024年12月1日ベクトル製品リリースタイムラインから見る開発の裏話と進化の歴史
これまでにないスピードで
自分好みの WordPress サイトが
立ち上がる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
これまでにないスピードで
自分好みの WordPress サイトが立ち上がる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
爆速!!１分でデモサイトと同じ
ホームページができる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。