リストスタイル設定（間隔/区切り線/角丸）
ListItemButton コンポーネントを通じて、サイドパネルタブの表示効果を詳細にカスタマイズできます。これは最も視覚的影響の大きい設定の一つです。
アクセスパス
- VertiTab 設定ページを開く
- サイドバーの「カスタムテーマ」メニューをクリック
- 編集したいテーマを選択し、「編集」をクリック
- 「🧩 コンポーネントカスタマイズ」タブをクリック
- 「ListItemButton」設定カードを見つけて展開をクリック
主要設定オプション
基本スタイル設定
背景色
- デフォルト背景：通常状態の背景色
- ホバー背景：マウスホバー時の背景色
- 選択背景：選択状態の背景色
テキスト色
- デフォルトテキスト：通常状態のテキスト色
- 選択テキスト：選択状態のテキスト色
間隔とレイアウト
パディング設定
- 上パディング：項目上部の内側間隔
- 下パディング：項目下部の内側間隔
- 左パディング：項目左側の内側間隔
- 右パディング：項目右側の内側間隔
- 調節範囲：0-24px
マージン設定
- 外側間隔：項目間の外側間隔
- 影響：リスト項目間の距離
角丸とボーダー
ボーダー半径
- 角丸レベル：0-16px で調節可能
- 効果：項目の角の丸み具合
- 0px：完全な四角形
- 高数値：より丸い角
ボーダー設定
- ボーダー幅：項目の枠線太さ
- ボーダー色：項目の枠線色
- ボーダースタイル：実線、破線など
視覚効果の調整
コンパクトスタイル
密度の高い表示に適している：
- パディング：4-8px
- マージン：0-2px
- 角丸：0-4px
快適スタイル
読みやすさを重視：
- パディング：8-16px
- マージン：2-4px
- 角丸：4-8px
スペーシーススタイル
豪華で広々とした表示：
- パディング：12-20px
- マージン：4-8px
- 角丸：8-12px
操作手順
間隔の調整
- パディングスライダーを使用して内側間隔を調整
- マージンスライダーで項目間距離を調整
- リアルタイムプレビューで効果を確認
外観の調整
- ボーダー半径で角丸レベルを設定
- 背景色でコントラストを調整
- ホバー効果で交互作用体験を最適化
カラーマッチング
- 背景色がテーマと調和することを確保
- テキスト色の可読性を保証
- 選択状態の対比を明確に
一般的なスタイルプリセット
ミニマルスタイル
- パディング：6px
- マージン：1px
- 角丸：2px
- 薄い背景色
モダンスタイル
- パディング：12px
- マージン：4px
- 角丸：8px
- グラデーション背景
クラシックスタイル
- パディング：8px
- マージン：0px
- 角丸：0px
- 明確なボーダー
実際の影響
サイドパネルタブ表示
- 各タブ項目の間隔
- タブのクリック領域
- タブの視覚階層
ユーザー体験
- 操作の正確性
- 視覚の快適性
- インターフェースの美観性
使用推奨
- 画面サイズを考慮：小画面ではコンパクトスタイル、大画面では快適スタイル
- 一貫性を保つ：アプリケーション全体のスタイルと統一
- コントラストをテスト：異なる照明条件での可読性を確認
- アクセシビリティを考慮：十分なクリック領域とコントラストを保証
保存設定
すべての調整はリアルタイムでプレビューされ、テーマエディターの「保存」ボタンをクリックして変更を保存します。