グループ表示設定
グループ表示設定により、タブグループの視覚的な表示方法、レイアウト、動作をカスタマイズして、個人のワークフローと画面設定に最適化できます。
アクセス方法
グループ表示設定にアクセスするには：
- VertiTab 設定ページを開く
- 左側メニューの「グループ」セクションに移動
- 「グループ表示設定」または「表示設定」を見つける
主要な表示オプション
グループヘッダー表示
ヘッダースタイル
最小限
- グループ名と基本的な折りたたみインジケーターのみ
- 利点： 画面スペースを最大限に節約
- 最適： 小さな画面、多数のグループ
標準
- グループ名、色インジケーター、タブ数、コントロール
- 利点： 機能性と効率性のバランス
- 最適： ほとんどのユーザーに推奨
詳細
- 完全な情報：名前、色、タブ数、最終アクセス時間、クイックアクション
- 利点： 最大限の情報とコントロール
- 最適： 大画面、詳細な管理が必要
色の表示
色バー
- グループヘッダーの横に細い色付きバーを表示
- サイズ： 2-5px の設定可能な幅
- 位置： 左側、右側、または両側
背景色
- グループヘッダー全体に薄い背景色を適用
- 透明度： 10-30% の調整可能な不透明度
- 効果： より目立つグループ識別
アイコン色
- グループフォルダーアイコンにグループ色を適用
- スタイル： 塗りつぶしまたはアウトライン
- サイズ： 12-24px の調整可能なアイコンサイズ
タブリスト表示
グループ内タブの配置
標準リスト
- タブをグループヘッダーの下に垂直に配置
- インデント： 視覚的階層のための設定可能なインデント
- 間隔： タブ間のカスタマイズ可能な垂直間隔
コンパクトリスト
- タブ間の間隔を最小限に抑えて密度を最大化
- 利点： より多くのタブを画面に表示
- 最適： 多数のタブがあるグループ
グリッドビュー（プレミアム）
- タブを 2 列グリッドで表示
- 適応的： 利用可能な幅に基づいて列数を調整
- 最適： 非常に幅の広いサイドパネル
タブ項目の詳細レベル
最小限
- サイトアイコンとページタイトルのみ
- 高さ： タブ項目あたり 24-32px
- 利点： 最大限のタブ密度
標準
- アイコン、タイトル、URL（短縮）
- 高さ： タブ項目あたり 36-48px
- 利点： 情報と効率性のバランス
詳細
- アイコン、完全タイトル、完全 URL、最終アクセス時間
- 高さ： タブ項目あたり 52-64px
- 利点： 完全なタブ情報
折りたたみインジケーター
インジケータータイプ
矢印
- 従来の ▶ （折りたたみ）と ▼ （展開）矢印
- サイズ： 12-20px
- 位置： グループ名の前または後
プラス/マイナス
- フォルダーツリーに似た + と - 記号
- スタイル： 四角、円、またはプレーン
- アニメーション： 切り替え時の回転効果
カスタムアイコン
- フォルダー、雲、またはその他のテーマアイコン
- ライブラリ： Material Icons、Font Awesome
- カスタム： カスタム SVG アイコンのアップロード
アニメーション効果
スムーズ展開
- グループの展開/折りたたみ時のアニメーション
- 継続時間： 100-500ms
- イージング： ease-in、ease-out、または linear
アイコン回転
- 状態変更時のインジケーターアイコンの回転
- 角度： 90 度または 180 度回転
- タイミング： 展開/折りたたみと同期
高度な表示設定
密度とスペース
垂直密度
コンパクト
- 要素間の最小垂直スペース
- グループ間隔： 4-8px
- タブ間隔： 2-4px
- 最適： 小画面、多数のグループ
快適
- バランスの取れた垂直スペース
- グループ間隔： 8-16px
- タブ間隔： 4-8px
- 最適： 標準的な使用、中程度の数のグループ
リラックス
- 広々とした垂直スペース
- グループ間隔： 16-24px
- タブ間隔： 8-12px
- 最適： 大画面、少数のグループ
水平パディング
最小限
- 左側のインデントと内側のパディングを最小化
- インデント： 8-12px
- パディング： 4-8px
標準
- 適度なインデントとパディング
- インデント： 16-20px
- パディング： 8-12px
広々
- より広いインデントとパディング
- インデント： 24-32px
- パディング： 12-16px
カスタムスタイリング
フォント設定
グループヘッダーフォント
- サイズ： 12-18px
- 太さ： normal、bold、または custom
- スタイル： normal、italic
- 色： カスタムカラーピッカー
タブフォント
- サイズ： 10-16px
- **グループヘッダーとは独立して設定可能
- 可読性最適化： システムフォントまたはカスタムフォント
境界線とセパレーター
グループセパレーター
- グループ間の視覚的セパレーター
- スタイル： 実線、点線、またはなし
- 色： カスタマイズ可能な色とアルファ
- 太さ： 1-3px
タブ境界線
- 個別タブ周りの境界線
- ホバー効果： ホバー時の境界線ハイライト
- 選択状態： アクティブタブの特別な境界線
レスポンシブ表示
サイドパネル幅に基づく適応
狭いパネル（< 300px）
自動調整：
- 最小限のヘッダースタイルに切り替え
- コンパクト密度を強制
- 長いテキストを省略
- 不要な要素を非表示
標準パネル（300-400px）
バランス設定：
- 標準ヘッダースタイル
- 快適な密度
- 完全な機能セット
- 適度なテキスト表示
広いパネル（> 400px）
フル機能：
- 詳細ヘッダースタイル利用可能
- グリッドビューオプション
- 完全なテキスト表示
- すべての高度機能
画面解像度の考慮
高 DPI ディスプレイ
自動スケーリング：
- アイコンとフォントサイズの適切なスケーリング
- 鮮明な境界線とセパレーター
- 高解像度アイコンの使用
標準ディスプレイ
最適化された表示：
- ピクセルパーフェクトなレンダリング
- 効率的なスペース使用
- バランスの取れた要素サイズ
パフォーマンス設定
レンダリング最適化
大きなグループ
仮想化
- 大きなグループ（50+ タブ）の仮想スクロール
- 利点： 一定のレンダリングパフォーマンス
- トレードオフ： 一部の視覚効果が制限される場合がある
アニメーション制御
パフォーマンスモード
- 低性能デバイスでアニメーションを無効化
- 自動検出： システム性能に基づく自動調整
- 手動制御： すべてのアニメーションの強制無効化
カスタマイズのヒント
作業環境の最適化
マルチモニター設定
- セカンダリモニターでの詳細表示
- プライマリモニターでのコンパクト表示
モバイル/タブレット
- タッチフレンドリーなサイズとスペース
- より大きなタップターゲット
- スワイプジェスチャー対応
アクセシビリティ
視覚的アクセシビリティ
- 高コントラスト色オプション
- より大きなフォントサイズオプション
- 色覚障害に配慮した色の選択
運動アクセシビリティ
- より大きなクリックターゲット
- キーボードナビゲーション最適化
- 音声制御対応
トラブルシューティング
一般的な表示問題
グループが正しく表示されない：
- ブラウザズームレベルを確認（100% を推奨）
- サイドパネル幅を調整
- カスタム CSS の競合をチェック
パフォーマンス問題：
- アニメーションを無効化
- 密度設定をコンパクトに変更
- 大きなグループを分割
レイアウトの問題：
- ブラウザを再起動
- 拡張機能設定をリセット
- デフォルト表示設定に戻す
グループ表示設定により、個人の好みと作業要件に合わせてタブグループの視覚的な体験を完全にカスタマイズできます。適切な設定により、効率的で視覚的に魅力的なワークスペースを作成できます。