アバターサイズ調整

MuiAvatar エディターを通じて、アバターコンポーネントの外観とサイズを精密に制御できます。

アクセスパス

1. VertiTab 設定ページを開く
2. サイドバーの「カスタムテーマ」メニューをクリック
3. 編集したいテーマを選択し、「編集」をクリック
4. 「🧩 コンポーネントカスタマイズ」タブをクリック
5. 「Avatar」設定カードを見つけて展開をクリック

アバター設定オプション

基本属性設定

バリアント (Variant)

• 円形 (Circular)：標準の円形アバター
• 角丸 (Rounded)：角丸の四角形アバター
• 四角形 (Square)：四角形アバター

サイズ (Size)

• 調節範囲：9-32px
• スライダー調節：スライダーをドラッグしてアバターサイズをリアルタイム調整
• 同時影響：幅と高さが同期調整

フォントサイズ (Font Size)

• 調節範囲：9-24px
• 効果作用：アバター内に表示される文字（ユーザー名のイニシャルなど）のサイズに影響
• 独立制御：アバター自体のサイズには影響しない

高度スタイル設定

ボーダー半径 (Border Radius)

• カスタム角丸レベル
• 角丸または四角形バリアントの時のみ有効

外側マージン (Margin)

• アバターと周囲要素との間隔を調節
• 最大値：20px

操作手順

アバターサイズの調整

1. 「サイズ」スライダー上で調節点をドラッグ
2. リアルタイムプレビュー効果を観察
3. 適切なサイズを見つけたらマウスを離す

文字サイズの調整

1. 「フォントサイズ」スライダーで調節
2. 主にアバター内に表示されるイニシャルに影響
3. 文字とアバターサイズの調和を確保

外観スタイルの変更

1. 適切なバリアントタイプを選択
2. 必要に応じてボーダー半径を調整
3. 適切な外側マージンを設定

実際の効果

• ユーザーアバター：プロフィール、コメントなどの位置に表示
• プレースホルダーアバター：ユーザー名のイニシャルを表示する際のスタイル
• インターフェース一貫性：すべてのアバターコンポーネントがこれらの設定を統一使用

使用推奨

1. 調和を保つ：アバターサイズはインターフェース他の要素と調和すべき
2. 可読性を考慮：アバター内の文字が明確に見えることを確保
3. 様々なシナリオでテスト：各種インターフェース位置で効果を検証
4. 適度な調整：過大または過小でインターフェースの美観に影響することを避ける

設定の保存

すべての調整はリアルタイムでプレビューされ、テーマエディターの「保存」ボタンをクリックして変更を保存します。