はじめに
自作テーマの作成を開始するにあたり、ChatGPTに制作の手順を聞いてみた。
まずはサイト全体をどういうルールでデザインするか？を決めることが大切だという。
確かに文字サイズが記事によってバラバラだったり、色を多用したりすれば、華やかではあるがどこが重要であるか？など、読み手に伝わりにくくなりそうです。
このサイト全体のルールを担うのが「theme.json」というファイルなのだそう。
ここにルールを予め記載しておくことで、サイトエディターや記事投稿画面の設定に制限をかけることができるとのことであった。
今回はフォントサイズのプリセット（ルール）を作ることから始めてみたが、サイトエディターを使って設定することは難しかったという失敗談です。
サイトエディターを使ってフォントサイズを変更するという点は参考になると思います。
サイトエディターで設定してみる
いきなりtheme.jsonに直接コーディングは分かりづらいので、まずはサイトエディターで設定変更してみることにした。
フォントサイズの設定画面の出し方
- サイトエディター画面に移動
- ダッシュボードから外観⇒エディタの順に選ぶ
- 左端のリストの中から「スタイル」を選択
- 変更可能なスタイル一覧が右側に表示されるので「タイポグラフィ」を選択
- タイポグラフィの設定画面に切り替わるので、一番下にあるフォントサイズプリセットボタンを押す。
- デフォルトに、小・中・大・特大というのがあり、それぞれの設定値を選択することで変更することができる。
なお、小・中・大・特大は記事投稿画面に出てくるS・M・L・XLに対応しています。
デフォルト初期値
WordPressが設定している初期値は以下のような設定になっているようです。
文字サイズは固定で、フルードタイポグラフィは有効になっていない。
| プリセット名 | 投稿画面表記 | 初期サイズ | slug |
| 小 | S | 13px | small |
| 中 | M | 20px | medium |
| 大 | L | 36px | large |
| 特大 | XL | 42px | x-large |
フルードタイポグラフィとは？
それぞれのデバイス（PCやスマートフォンなど）の画面サイズに応じて、表示させる文字サイズを変更できるようする機能
フォントサイズの設定手順
設定例として文字サイズ「特大」をフルードタイポグラフィにします。
- フォントサイズ「特大」を選択する
- フルードタイポグラフィの設定をONに変更
- カスタムフルード値の設定もONに変更
- スマートフォンなど画面サイズが小さい場合の文字サイズを最小に入力
- PCなど画面サイズが大きい場合の文字サイズを最大に入力
- 設定値の変更が終わったら、画面右下にある「◯個の変更をレビュー…」ボタンを押す
- 確認画面が表示されますので「保存」ボタンを押すことで設定値が適用されます。
カスタムフォントサイズの作成
四種類の文字サイズだとサイトを構成しづらいという場合は、フォントサイズを追加することができます。
- デフォルトのフォント一覧の下にカスタムという項目があり、その右端にある「＋」をクリックします。
- 新規フォントサイズ1が作成されるので、それを選択し設定画面を開きます。
- 新規フォントサイズ1の右側に縦に並んだ3つの点アイコンをクリックすると、名前の変更と削除ができます。名前の変更を選択して「超大」と入力し、保存します。
- 名前が変更されたら、先ほどと同様にフォントサイズを設定します。
- 設定値の変更が終わったら、画面右下にある「◯個の変更をレビュー…」ボタンを押す
- 確認画面が表示されますので「保存」ボタンを押すことで設定値が適用されます。
設定値の保存先
サイトエディターで設定したフォントサイズの設定値はテーマに保存される？と思いきや、実はデータベース上に保存されており、theme.jsonに直接反映されません。
考えてみれば運営するユーザーの設定が最優先なのは当たり前の仕様ですよね。
テーマに直接反映させるにはもうひと手間かかるということになります。
設定値をtheme.jsonに反映させる方法
設定したフォントサイズをテーマ（theme.json）に反映させるには、テンプレートの画面から行う必要があります。
- ダッシュボードからサイトエディターを表示させます
- 右端のリストからテンプレートを選択します
- テンプレートの一覧が表示されるので、どれでも構いませんので選択します
- 右上にある「スパナ」アイコンをクリックします
- 表示された項目から「テーマへの変更を保存」を選択します
- テキストをローカライズより上の項目を選択し「変更内容を保存」ボタンを押す
- 変更を適用しましたという表示が出るので、OKボタンで画面を更新する
以上の操作で設定が「theme.json」に反映させることができます。
カスタムサイズはテーマサイズとして登録されますが、デフォルトのフォントサイズの設定が初期値に戻るというバグがあります。
また、追加されたカスタムサイズは、一番左側（カスタムサイズが2つ以上になるとドロップダウンリストの一番上から）に追加される仕様になっているようです。
この方法だとSが「超大」になるという使いづらさもあります。
まとめ
サイトエディターを使って、フォントサイズのプリセットを作ろうとしました。
しかし、思うようにプリセットを作ることができず、theme.jsonに直接記載するのが良いということが理解できました。
今後修正されるかは不明確ですが、サイトエディターを売りにしていくならば、真っ先に修正して欲しいと思いました。