背景設定
VertiTab では、CssBaseline コンポーネントを通じて拡張機能の背景スタイルをカスタマイズできます。
アクセスパス
- VertiTab 設定ページを開く
- サイドバーの「カスタムテーマ」メニューをクリック
- 編集したいテーマを選択し、「編集」をクリック
- 「🧩 コンポーネントカスタマイズ」タブをクリック
- 「CssBaseline」設定カードを見つけて展開をクリック
背景設定オプション
HTML 要素スタイル
フォントサイズ
- 調節範囲：12-20px
- 効果：ページ全体の基本フォントサイズに影響
- 推奨値：14-16px（読みやすさを保証）
BODY 要素スタイル
背景色設定
- カラーピッカー：任意の色を選択
- 透明度：背景色の透明度調整
- プリセット色：よく使われる色の素早い選択
背景画像
- 画像 URL：背景画像のリンクアドレスを入力
- 対応形式：JPG、PNG、SVG、WebP
- ローカル画像：data:image 形式でローカル画像を使用可能
背景表示モード
背景サイズ
- Cover：画像が完全にコンテナを覆う（推奨）
- Contain：画像全体が見えるようにスケーリング
- Auto：画像の元のサイズを保持
- カスタム：特定のピクセル値やパーセンテージを指定
背景位置
- Center：中央に配置（デフォルト）
- Top：上部に配置
- Bottom：下部に配置
- Left/Right：左/右に配置
- カスタム：精密なピクセル位置指定
背景リピート
- No-repeat：リピートしない（推奨）
- Repeat：水平と垂直にリピート
- Repeat-x：水平方向のみリピート
- Repeat-y：垂直方向のみリピート
背景固定
- Fixed：スクロール時に背景を固定
- Scroll：コンテンツと一緒にスクロール（デフォルト）
設定手順
単色背景の設定
- 「背景色」カラーピッカーをクリック
- 希望する色を選択
- 透明度を調整（必要に応じて）
- プレビューで効果を確認
画像背景の設定
- 「背景画像」フィールドに画像 URL を入力
- 背景サイズを「Cover」に設定（推奨）
- 背景位置を「Center」に設定
- 背景リピートを「No-repeat」に設定
- プレビューで表示効果を確認
複合背景の設定
- 背景色を設定（フォールバック色として）
- 背景画像を追加
- 画像の透明度やブレンドモードを調整
- 最適な視覚効果を得るまで微調整
一般的な背景スタイル
ミニマルスタイル
- 単色背景：白またはライトグレー
- 効果：クリーンでシンプル
モダンスタイル
- グラデーション背景：2 色または 3 色のグラデーション
- 効果：現代的で美しい
テクスチャスタイル
- テクスチャ画像：細かいパターンまたはテクスチャ
- 効果：奥行きと層次感
ブランドスタイル
- ブランド色：企業またはブランドの主色調
- 効果：統一されたブランド体験
技術的な注意事項
画像形式選択
WebP
- 利点：小さなファイルサイズ、高画質
- 適用：モダンブラウザ
PNG
- 利点：透明度サポート、高画質
- 適用：透明要素が必要な場合
JPG
- 利点：小さなファイルサイズ
- 適用：写真風背景
パフォーマンス最適化
- 画像サイズを制御：不要に大きな画像を避ける
- 適切な形式選択：使用シナリオに応じて選択
- CDN を使用：画像読み込み速度を向上
- キャッシュを活用：ブラウザキャッシュを有効利用
使用推奨
- コントラストを保つ：テキストが背景で明確に見えることを確保
- 性能を考慮：過度に複雑な背景画像は避ける
- アクセシビリティ：色覚異常者にも適している色を選択
- 統一性：アプリケーション全体のデザインスタイルと一致
保存設定
すべての調整はリアルタイムでプレビューされ、テーマエディターの「保存」ボタンをクリックして変更を保存します。