サポート サポートへのお問い合わせ | システムステータス システムステータス
ページコンテンツ

    ページ内エクスペリエンスのカスタム CSS リファレンス

    このトピックでは、ページ内エクスペリエンスの作成時に使用される CSS クラスの概要を説明します。この情報は、CSS を使用して体験をさらにスタイル設定できるように提供されています。

    スタイル設定されたコンポーネント

    これらの CSS クラスは、UI を使用してスタイル設定された項目に適用されます。 これらのスタイルは、これらのクラスを使用して、カスタム CSS でオーバーライドすることができます。 これらのクラスを使用して、UI スタイルをカスタム HTML に適用することもできます。 これらのクラスは安定しており、テンプレートバージョン間で変更すべきではありません。

     

    クラス 説明
    ee-components-style-global エクスペリエンスのためのグローバルなスタイリング
    ee-components-style-anchor 通常のリンクのスタイル設定
    ee-components-style-navigation ナビゲーションリンクのスタイル設定 (戻るボタン、共有ボタンなど)
    ee-components-style-videoInfo ビデオ情報ボックスのスタイリング (オーバーレイ)
    ee-components-style-videoTitle ビデオタイトルのスタイリング(オーバーレイ以外)
    ee-components-style-videoDescription ビデオ説明のスタイリング (オーバーレイ)
    ee-components-style-overlay オーバーレイビデオ情報ボックスのスタイリング
    ee-components-style-overlayTitle オーバーレイビデオタイトルのスタイリング
    ee-components-style-overlayDescription オーバーレイビデオ説明のスタイリング
    ee-components-style-overlayBanner オーバーレイバナー/インジケータスタイリング (監視インジケータ)
    ee-components-style-playButton 再生ボタンの基本的なスタイル設定 (より複雑なスタイル設定については、再生ボタンコンポーネントを参照してください)

    基本コンポーネント

    これらは、カスタムCSSを使用してスタイルを設定することができる基本的なコンポーネントです。 コンポーネントクラスは安定しており、テンプレートバージョン間で変更すべきではありません。 内部クラスは比較的安定しており、ほとんどの場合、テンプレートバージョン間で変更されません。

    再生ボタン

    再生ボタンは、すべての動画のサムネイルに表示されます。

     

    クラス 説明
    ee-components-play-button 再生ボタンコンポーネント
    ee-components-play-button-svg SVGコンテナ
    ee-components-play-button-group SVG 内部グループ
    ee-components-play-button-button 再生ボタン SVG グループ
    ee-components-play-button-frame 再生ボタンの円枠
    ee-components-play-button-icon 再生ボタンアイコン
    ee-components-play-button-countdown カウントダウンSVGグループ
    ee-components-play-button-pause カウントダウン一時停止アイコン
    ee-components-play-button-text カウントダウンテキスト
    ee-components-play-button-track カウントダウントラック
    ee-components-play-button-runner カウントダウンの進行状況

     

    矢印

    カルーセルテンプレートの矢印 (シングルブリードおよびフルブリードプレゼンテーションオプション)

     

    クラス 説明
    ee-components-arrow 矢印コンポーネント (背景を含む)
    ee-components-arrow-inner 矢印

     

    次の動画

    プレーヤーの設定で [ 次のビデオに自動的に進む] が有効になっていると、大きいサムネイルに次のインジケータが表示されます

     

    クラス 説明
    ee-components-up-next 次のコンポーネントを上へ
    ee-components-up-next-thumbnail 次の動画のサムネイル
    ee-components-up-next-text 次のテキストを上げる (カウントダウン+動画名)
    ee-components-up-next-text-countdown カウントダウンテキスト
    ee-components-up-next-close クローズボタン

     

    視聴した動画インジケータ

    [動画] 設定でオプションが有効になっていると、監視インジケータが表示されます。

     

    クラス 説明
    ee-components-watched-video-banner 視聴した動画インジケータ

     

    ビデオコンポーネント

    個々のビデオに関連するコンポーネント。これらのクラスは安定しており、テンプレートバージョン間で変更すべきではありません。

    プレーヤー

    Brightcove プレーヤーのコンテナ。

     

    クラス 説明
    ee-components-player プレーヤーコンテナ

     

    サムネイル

    ビデオポスター画像の基本的なコンテナ(再生ボタンは含まれません)。

     

    クラス 説明
    ee-components-thumbnail サムネイルコンテナ

     

    動画情報

     

    クラス 説明
    ee-components-video-info ビデオ情報コンテナ
    ee-components-video-info-content 内部ビデオ情報コンテナ
    ee-components-video-info-name ビデオ名コンテナ
    ee-components-video-info-name-content 動画名
    ee-components-video-info-duration Video duration
    ee-components-video-info-description ビデオの説明
    ee-components-video-info-related-link 動画関連リンク
    ee-components-video-info-download ビデオダウンロードリンク

     

    動画サムネイル

    ビデオ情報コンポーネントでラップされたサムネールコンポーネントが含まれます。

     

    クラス 説明
    ee-components-video-thumbnail ビデオサムネールコンポーネント

     

    ビデオコレクションコンポーネント

    ビデオのコレクション(プレイリストなど)に関連するコンポーネント。これらのクラスは安定しており、テンプレートバージョン間で変更すべきではありません。

    カバーフロー

    動画の3次元カバーフロープレゼンテーション。

     

    クラス 説明
    ee-components-cover-flow カバーフローコンポーネント
    ee-components-cover-flow-item 表紙フロー項目(動画サムネイル)

     

    ドットストリップ

    リスト内の各ビデオを表すドットのストリップ

     

    クラス 説明
    ee-components-dot-strip ドットストリップコンポーネント
    ee-components-dot-strip-item ドットストリップアイテム
    ee-components-dot-strip-dot ストリップの個々のドット

     

    ポスターカルーセル

    ポスター画像のカルーセル(矢印付き)

     

    クラス 説明
    ee-components-poster-carousel ポスターカルーセルコンポーネント
    ee-components-poster-carousel-container 行コンテナ
    ee-components-poster-carousel-row ポスター行
    ee-components-poster-carousel-cell 行項目(ビデオサムネイル)

     

    サムネイルストリップ

    サムネイル画像のストリップ (矢印付き)

     

    クラス 説明
    ee-components-thumbnail-strip サムネイルストリップコンポーネント
    ee-components-thumbnail-strip-container 行コンテナ
    ee-components-thumbnail-strip-row サムネイル行
    ee-components-thumbnail-strip-cell 行項目(ビデオサムネイル)

     

    動画グリッド

    サムネイル画像のグリッド

     

    クラス 説明
    ee-components-video-grid ビデオグリッドコンポーネント
    ee-components-video-grid-cell グリッドアイテム (ビデオサムネイル)

     

    動画リスト

    サムネイル画像の垂直リスト

     

    クラス 説明
    ee-components-video-list ビデオリストコンポーネント
    ee-components-video-list-item リストアイテム (動画サムネイル)

     

    コンポーネントの共有

    ソーシャルシェアリングに関連するコンポーネント。  Share Button クラスは比較的安定しており、テンプレートのバージョン間で変更されない可能性が高いです。 共有パネルのクラスは、近い将来に変更される可能性が最も高く、不安定であるとみなす必要があります。

    [共有] ボタン

    共有ボタンまたはアイコン。

    または

     

    クラス 説明
    ee-components-share-button 共有ボタンコンポーネント
    ee-components-share-button-button 共有ボタン (アイコンではない)

     

    パネルを共有

    ソーシャル共有表示がボタンに設定されている場合の共有パネル

     

    クラス 説明
    ee-components-share-wrapper-panel パネルラッパーコンポーネント
    ee-components-share-wrapper-inner パネル
    ee-components-share-wrapper-close クローズボタン
    ee-components-share-wrapper-item アイテムを共有する
    ee-components-share-wrapper-item-name アイテム名を共有する

     

    編集可能なコンポーネント

    UI のプラスボタンを使用してエクスペリエンスに追加できるコンポーネント。 これらのクラスは安定しており、テンプレートバージョン間で変更すべきではありません。 これらのコンポーネントのスクリーンショットは、その外観はユーザーが入力したコンテンツに大きく依存するため、提供されません。

    広告

    広告コンポーネント

     

    クラス 説明
    ee-components-advertisement 広告コンポーネント

     

    カスタムHTML

    カスタム HTML コンポーネント

     

    クラス 説明
    ee-components-html カスタム HTML コンポーネント

     

    画像

    イメージコンポーネント

     

    クラス 説明
    ee-components-image イメージコンポーネント
    ee-components-image-image 内部イメージ

     

    テキスト

    テキストコンポーネント

     

    クラス 説明
    ee-components-text テキストコンポーネント

     

    Twitter

    Twitterコンポーネント

     

    クラス 説明
    ee-components-twitter Twitterコンポーネント

     

    グローバルクラス

    これらは、エクスペリエンスにグローバルであるクラスです。 これらのクラスは安定しており、テンプレートバージョン間で変更すべきではありません。

     

    クラス 説明
    ee-components-app 最も外側のエクスペリエンス要素
    ee-components-view エクスペリエンスビュー (ページ内、ライトボックス)
    ee-components-container プラスボタンコンポーネントコンテナ