VizupCommerce

カスタムCSSによるバナー動画コンテンツのカスタマイズ

カスタムCSSによるバナー動画コンテンツのカスタマイズ

カスタムCSSを使用して、バナー動画ウィジェットのタイトル、キャプション、CTAボタンの外観をカスタマイズする方法。

利用可能なCSSクラス

バナー動画ウィジェットには、カスタマイズ対象として指定できる専用のCSSクラスが用意されています：

コンテナクラス

  • .vizup-banner-content-overlay - すべてのカスタムコンテンツを保持するメインオーバーレイコンテナ

コンテンツ要素クラス

  • .vizup-banner-custom-title - カスタムタイトルの見出し要素
  • .vizup-banner-custom-caption - カスタムキャプションの段落要素
  • .vizup-banner-cta-button - コールトゥアクションのボタン/リンク要素

CSSカスタマイズの例

タイトルのカスタマイズ

/* タイトルを大きくして中央揃えにする */
.vizup-banner-custom-title {
    font-size: 24px !important;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff !important;
    margin-bottom: 10px !important;
}

/* タイトルに背景を追加する */
.vizup-banner-custom-title {
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

キャプションのカスタマイズ

/* キャプションテキストのスタイル */
.vizup-banner-custom-caption {
    font-style: italic;
    opacity: 0.9;
    font-size: 14px !important;
    line-height: 1.4;
    text-align: center;
}

CTAボタンのカスタマイズ

/* 強化されたCTAボタンのスタイル */
.vizup-banner-cta-button {
    border: 2px solid white !important;
    border-radius: 25px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold !important;
    padding: 12px 24px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

オーバーレイコンテナのカスタマイズ

/* 全体の位置とスペースを調整する */
.vizup-banner-content-overlay {
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    padding: 20px !important;
}

カスタムCSSの適用方法

カスタムCSSの追加場所と方法の詳細については、カスタムCSSの追加ガイドをご参照ください。

概要：

  1. Vizupアプリを使用する（推奨）：Vizupアプリ内の詳細設定ページでCSSを追加 - 詳細設定を開く
  2. Shopifyテーマエディタで：テーマのカスタマイズに移動し、テーマのカスタムCSSセクションにCSSを追加
  3. テーマファイル経由：assets/application.cssまたは類似のスタイルシートファイルにCSSを追加

重要な注意事項

  • デフォルトスタイルを上書きする場合は必要に応じて!importantを使用してください
  • さまざまなデバイスや画面サイズでカスタマイズをテストしてください
  • 設定のブランドカラー（brand_primary_colorおよびbrand_secondary_color）は引き続きCTAボタンの背景色とテキストカラーに適用されます
  • カスタムCSSはデフォルトスタイルよりも優先されますが、ダイナミックなブランドカラーは維持されます

サポートが必要な場合

カスタムCSSについてサポートが必要な場合や、特定のデザイン要件がある場合は、サポートチームにお問い合わせください。

← Back to All Tutorials