パソコンで「いい感じ」に決めた大きな見出しを、スマホで見たら、文字が大きすぎて窮屈…。そんな経験はありませんか。今回は、文字サイズを画面の大きさに合わせて自動で伸び縮みさせて、この問題をまるごと解決する方法が「Fluid Typography（流体タイポグラフィ）」です。しかも一度設定すれば、あとはずっと自動。むずかしい呪文を、毎回手書きする必要もなくなります。
スマホで見出しが大きすぎてはみ出す問題
大きな見出し、とくにトップページの顔である「ヒーロー」のキャッチコピーで、よく起きる問題があります。パソコンの広い画面で気持ちいい大きさに決めると、その同じ大きさが、スマホの狭い画面では巨大すぎて、はみ出したり、何行にも折り返して窮屈になったりするんです。
かといって、スマホに合わせて小さくすると、今度はパソコンで物足りない。「パソコンでは大きく、スマホでは小さく」を両立させたい——これが、今回のテーマです。
これまでは「clamp」を手書きしていた
この「画面に合わせて伸び縮みさせる」ために、これまでは clamp(クランプ)という書き方を使っていました。「最小はこれ以下にしない・最大はこれ以上にしない・その間は画面に合わせてなめらかに変える」を、一行で指定できる便利なものです。
イメージは、身長に合わせて伸び縮みするゴムの服。小さい子が着ても、大きい大人が着ても、ちょうどよく。ただし「縮みすぎ・伸びすぎ」はしないように、最小と最大の歯止めがついている。それがclampです。
便利なのですが、困るのは「毎回手で書く」こと。見出しを置くたびに、ブロックごとに呪文を書き込むのは大変ですし、あちこちにバラバラに散らばって、後から「全部少し大きくしたい」となったとき、一つずつ直して回るはめになります。
theme.jsonの「fluid」に、ぜんぶ任せる
そこで登場するのが、theme.jsonの「fluid(フルイド＝流動的)」という設定です。文字サイズを登録するときに、これを有効にしておくだけ。あとはWordPressが、さっきのclampを自動で作ってくれます。
つまり、もう自分でclampを手書きする必要がありません。一度「このサイズは、このくらいまで伸び縮みしてね」と登録しておけば、そのサイズを使うところは全部、勝手に画面に合わせて伸縮してくれます。手書きの呪文から、卒業です。
文字サイズも「役割」で登録する
ここで、もうひと工夫。文字サイズを、ただ登録するのではなく、「役割」で登録するのがおすすめです。たとえば、小・本文・小見出し・見出し・大見出し、という具合に。
これは、色を「パレット」で登録したのと、まったく同じ考え方です。色を「メインの色・アクセントの色」と役割で決めておくと、毎回カラーコードを入力せずに選ぶだけで済みますよね。文字サイズも同じで、「見出し」「本文」と役割で登録しておけば、あとは選ぶだけ。サイト全体で大きさがそろって、管理もぐっとラクになります。
いちばん効くのは、大きい文字
この自動伸縮、実はすべての文字に同じように効くわけではありません。いちばん効果が大きいのは、大きい文字——つまり見出し、とくにヒーローのキャッチコピーです。
理由は、バネを思い浮かべると分かりやすいです。小さいバネは、伸ばしても縮めても、変化はわずか。でも大きいバネは、伸び縮みの幅がぐんと大きい。文字も同じで、本文のような小さい文字は、パソコンとスマホでそんなに大きさを変えなくていい。でも大きな見出しは、パソコンでは大きく、スマホではぐっと小さく、と変化の幅が大きいので、自動伸縮のありがたみが段違いなんです。
まずはヒーローの大見出しから始めてみてください。いちばん見栄えが変わるので、効果を実感しやすいですよ。
フルイド化するのは『大きな見出し（H1やH2）』だけに絞るのがオススメなんです。スマホでもパソコンでもそこまでサイズが変わらない小さな本文（16px前後）にまで設定すると、コードが複雑になるだけで効果が薄く、逆にメンテナンスが大変になります
設定は、サイトエディタではなく「theme.json」に書く
ここで、ひとつ大事なことを。この「流体をオンにする」「最小と最大を決める」という設定は、実はサイトエディタの画面では設定できません。テーマの設計図にあたるtheme.jsonというファイルに、直接書き込みます。
イメージは、リモコンと配線の関係です。サイトエディタの画面は、いわば普段使いの「リモコン」。登録済みのサイズを選ぶだけの、かんたん操作です。いっぽうtheme.jsonは、その奥にある「配線の大元」。そもそも何を選べるようにするか、どう伸び縮みさせるかは、こちらで決めます。だから流体の設定は、リモコンではなく配線側——theme.jsonに書く、というわけです。
では、実際にどう書くのか。さきほど「まずはヒーローの大見出しから」とお伝えしたので、その形をそのまま例にしてみます。下のように、文字サイズを役割で登録しつつ、大見出しにだけ最小と最大を指定します。
{
"version": 3,
"settings": {
"typography": {
"fluid": true,
"fontSizes": [
{
"name": "大見出し",
"slug": "hero",
"size": "3rem",
"fluid": {
"min": "1.75rem",
"max": "3rem"
}
}
]
}
}
}読み方は、こうです。いちばん上の"fluid": trueが、全体の親スイッチ。これを入れておくと、登録したサイズが自動で伸び縮みするようになります。そのうえで「大見出し」に"min"と"max"を書いて、「これ以下にもこれ以上にもしないでね」という伸び縮みの幅を、自分の手で決めています。まずはこの一つから。これが、さきほどの「ヒーローの大見出しから」を、そのまま形にしたものです。
もしtheme.jsonをさわるのが初めてだったり、波カッコやカンマといったJSONの書き方に自信がなければ、中身をAIに書いてもらうことを強くおすすめします。「fluidを有効にして、大見出しだけ最小1.75rem・最大3remで登録するtheme.jsonを書いて」とお願いすれば、形のととのったコードを返してくれます。JSONはカンマや括弧が一つズレるだけで動かなくなる、少し神経質なファイル。最初の一歩は、無理に手書きしなくて大丈夫です。
そもそもtheme.jsonって何をするファイルなの?というところから知りたい方
【WordPress】theme.jsonって何？設定ファイル1つでサイトの見た目を統一する仕組み
theme.jsonは、色・フォント・見出しスタイルを1つのファイルでまとめて管理できる「サイトの司令塔」。
この記事では、実際のサンプルコードを見ながら…
まとめ:土台を作れば、あとは選ぶだけ
文字サイズを画面に合わせて伸縮させるclampは、とても便利。でも、毎回手書きするのは大変です。WordPressの「Fluid Typography（流体タイポグラフィ）」は、最小・最大を決めるだけです。
しかも、サイズを「役割」で登録しておけば、色のパレットと同じように、あとは選ぶだけ。とくに効果が大きいのは、ヒーローのような大きい見出しです。一度この土台を作ってしまえば、もう文字サイズで悩むことはありません。手書きのclampから、そろそろ卒業してみませんか。
ちょっとした落とし穴の話
じつは文字サイズを登録するとき、WordPressがもともと持っている標準サイズが、消したつもりでもこっそり居座り続ける、という落とし穴があります。今回は名前(slug)を標準と重ならないものにして、そっとよけて通りました。この「招かれざる同居人」を完全に追い出す方法は、たっぷり2時間ハマった実体験として、別のところに書いています。よかったら、のぞいてみてください。
→ theme.jsonでフォントサイズを変えたのに反映されへん！犯人は「コアのデフォルト」やった話（note）