前回の続きで、今回はスタイルのタイポグラフィについて深掘りしていきます。
スタイルあたってない状態で見ようと思うので、Create Block Themeで空テーマをつくります。
空のブロックテーマでスタイルの画面にアクセスした状態
タイポグラフィ
タイポグラフィの画面では、フォントのインストールやスタイル・サイズ等の設定ができます。
フォント
フォントという文字の横にあるスライダーのようなマークをクリックすることでポップアップが表示されます。
ライブラリ
現在インストールされているフォント一覧が表示されます。
アップロード
自分で持っているフォントファイルをアップロードできます。
正常にインストールできたら以下のように緑のアラートが表示され、
ライブラリの「カスタム」に追加されます。
フォントを削除したいときは、該当フォントをクリックしてバリアントの選択画面に遷移し、[更新]ボタンの左にある[削除]ボタンをクリックします。
フォントをインストール
Google Fontsからインストールできます。初回は[Google Fonts へのアクセスを許可する]ボタンをクリックする必要があります。
アクセスを許可すると、Google Fontsで使えるフォントが表示されるので、使いたいフォントを選択し、使いたいバリアントにチェックを入れて[インストール]をクリックすることで使用可能になります。
要素
- テキスト
- リンク
- 見出し
- キャプション
- ボタン
それぞれ、
- スタイル
- サイズ
- ウェイト
- 行間
- 文字感覚
- 大文字小文字
の設定ができます。例として[テキスト]で見ていきます。この[テキスト]で設定した項目は、サイト上にあるすべてのテキストに適用されます。
フォント
インストールしているフォントから設定できます。
M PLUS 1を設定してみました。
今回は[テキスト]で設定しているので、サイトの全てのテキストが対象になります。
例えばこの設定を[見出し]で行うとこんな感じになります。
見出しだけがM Plus 1に設定される
サイズ
フォントサイズの調整を行います。なにも設定していないとS/M/L/XLが表示されますが、ここはカスタマイズ可能です。（あとで項目解説します）
テキストの横にあるスライダーマークでカスタム値を設定することもできます。
デフォルトではpxの単位になっていますが、他の単位も設定できます。
カスタムの値はPCではこの値、SPではこの値といった設定はできないので注意が必要です。
外観
フォントウェイトの設定です。
行の高さ
line-heightを設定できます。ここは単位のない値固定です。
文字感覚
letter-spacingを設定できます。ここもフォントのカスタムサイズと同様に単位の指定ができます。
見出しについて
見出しだけは少し特殊で、全ての見出しレベルで同一の設定ができる他、見出しレベルごとに設定することもできます。
[全て]の状態ではフォントサイズ指定がありませんが、レベルを変えると出てきます。
フォントサイズプリセット
一番下のフォントサイズプリセットでは、スライダー（数が多いとセレクトボックス）で設定できるフォントサイズを設定できます。
Create Block Themeで空テーマを作ったときは、ここは小/中/大/特大が入っています。
設定済みの[小]をクリックすると、13pxが設定されています。この値を変えることで、サイト全体で[小]が設定されている要素のフォントサイズが変わります。
また、単位を変更することもできます。
フルードタイポグラフィのトグルをオンにすることで、SPとPCでフォントサイズを変更することもできます。トグルをオンにすると、さらに[カスタムフルード値]というトグルが表示されますので、最小（スマホ時の表示）と最大（PC時の表示）の数値をカスタムすることができます。
なお、Create Block Themeで作った空テーマでは[カスタムフルード値]をオンにしなかった場合の最小値は14pxになる模様。単位を変えると14px相当の値に変わります。
管理画面ではできないこと
フォントの設定まわりに関しては管理画面だけでほぼ困ることはなさそうな印象ですが、「行間は管理画面から触らせたくないんだけどな…」といったときに機能を無効化するということは管理画面からできなさそうです。
もしそういう要望があるときはtheme.jsonから機能を無効化します。
パラメーターはこちらにあります。行間を無効化したい場合は、
{
...
"settings": {
"typography": {
"lineHeight": false
},
},
...
}
とすれば無効化できます。
その他、執筆モードの変更だったり、デフォルトのフォントサイズを使わない、といった設定も同様にtheme.jsonからしかできないようですが、特段管理画面からできなくて困る項目ではないので、theme.jsonも併用したらもっと色々できるんだなーくらいで頭の片隅に入れておく程度でよさそうです。
Discussion