フォントサイズ調整
VertiTab のカスタムテーマ機能では、フォントサイズを調整する 2 つの方法を提供しており、必要に応じて適切な方法を選択できます。
方法 1：フォント設定 - グローバル設定
アクセスパス
- VertiTab 設定ページを開く
- サイドバーの「カスタムテーマ」メニューをクリック
- 編集したいテーマを選択し、「編集」をクリック
- 「📝 フォント」タブをクリック
グローバルフォント設定
「グローバル設定」セクションで：
- 基本フォントサイズ：スライダーで 10-24px を調節、この値を変更するとすべてのテキストバリアントが同期調整される
- フォントファミリー：プリセットフォントを選択またはカスタムフォントファミリーを入力
独立テキストバリアント設定
10 種類のテキストバリアントを個別に調整可能：
見出しバリアント
- H1-H6：各レベル見出しのフォントサイズ（0.5-3rem）
本文バリアント
- Body1：メイン本文フォント
- Body2：サブ本文フォント
- Button：ボタンテキスト
- Caption：説明テキスト
その他の属性
- 行高：1-3 倍の行高調節
- フォント太さ：100-900
- テキスト変換：なし、大文字、小文字、頭文字大文字
方法 2：コンポーネントカスタマイズ - HTML フォントサイズ
アクセスパス
- テーマエディターで「🧩 コンポーネントカスタマイズ」タブをクリック
- 「CssBaseline」設定カードを見つけて展開をクリック
- 「HTML 要素スタイル」セクションで
HTML フォントサイズ設定
- 調節範囲：12-20px
- 効果作用：ページ全体の基本フォントサイズに影響
- リアルタイムプレビュー：スライダー調節時に即座に効果を確認
2 つの方法の違い
| 方法 | 作用範囲 | 特徴 |
|---|---|---|
| フォント設定 | 特定テキストバリアント | 各テキストタイプを精密制御 |
| HTML フォントサイズ | グローバル基本サイズ | 全体フォントベースラインに影響 |
使用推奨
- まず HTML フォントサイズを調整：適切な基本サイズを設定
- 次にフォント設定を調整：各種テキストバリアントを精密調整
- 視覚階層を保持：見出しが本文より大きく、明確な階層を形成
- 様々なシナリオでテスト：各種インターフェース要素で効果を検証
設定の保存
すべての調整はリアルタイムでプレビューされ、テーマエディターの「保存」ボタンをクリックして変更を保存します。