誘い文句（CTA、コールトゥアクション）

コールトゥアクションパネルは、ビデオが終了すると表示され、特定のビデオに関連付けられているすべてのインタラクティブスウォッチを表示します。

パネルは、ビデオタイトルを示すヘッダー領域、右上隅の再生ボタン、スクロール可能なグリッドとして表示される実際のインタラクティブスウォッチで構成されます。 設定属性callToActionRecapを使用して、パネルを無効にできます。

コールトゥアクションパネルは、常にビューア領域全体を使用します。

以下に示すCSSクラスセレクターで、コールトゥアクションパネルの背景色の外観を制御します。

.s7interactivevideoviewer .s7calltoaction

コールトゥアクションパネルの背景色のCSSプロパティ

例

背景色が濃いグレーのコールトゥアクションパネルを設定するには：

.s7interactivevideoviewer .s7calltoaction {
    background-color: #222222;
}

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのヘッダーの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7header

コールトゥアクションパネルヘッダーのCSSプロパティ

例

高さ70ピクセルで、背景が濃いグレーで、下部にグレーの境界線がやや明るい2ピクセルのヘッダーを設定するには、次のように記述します。

.s7interactivevideoviewer .s7calltoaction .s7header {
    height: 70px;
    border-bottom: 2px solid #444444;
    background-color: #222222;
}

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのヘッダータイトルの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

コールトゥアクションパネルのヘッダータイトルのCSSプロパティ：

例

70ピクセルの線の高さ、25ピクセルのフォントサイズ、白の色および左揃えのビデオタイトルを設定するには：

.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
    line-height: 70px;
    font-size: 25px;
    color: #ffffff;
    text-align: left;
}

以下に示すCSSクラスセレクターで、コールトゥアクションパネルの閉じるボタンの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7closebutton

コールトゥアクションパネルの閉じるボタンのCSSプロパティ：

例

28 x 28ピクセルの再生ボタンを設定するには、次のように記述します。 ボタンの位置は、ヘッダーの上端と右端から20ピクセルにする必要があります。 また、ボタンの4つの状態ごとに異なる画像を表示する必要があります。コンポーネントのスプライト画像からアートワークを取り出します。

.s7interactivevideoviewer .s7calltoaction .s7closebutton {
 top: 20px;
 right: 20px;
 background-size: 336px;
 width: 28px;
 height: 28px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state] {
 background-image: url(images/v2/PlayPauseButton_sprite.png);
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='up'] {
 background-position: -28px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='over'] {
 background-position: -0px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='down'] {
 background-position: -28px -1232px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='disabled'] {
 background-position: -0px -1232px;
}

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのサムネールグリッドビューの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

コールトゥアクションパネルのサムネールグリッドビューのCSSプロパティ：

例

濃いグレーの背景を持つサムネール領域を設定するには：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
    background-color: #222222;
}

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのサムセルの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

コールトゥアクションパネルのサムのセルのCSSプロパティ：

例

24ピクセルの水平方向の間隔と18ピクセルの垂直方向の間隔を設定するには：

.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
 margin-top: 9px;
 margin-bottom: 9px;
 margin-left: 12px;
 margin-right: 12px;
}

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのサムネールの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7thumb

コールトゥアクションパネルのサムネールのCSSプロパティ：

例

94 x 100ピクセルのサムネールを設定するには：

.s7interactivevideoviewer .s7calltoaction .s7thumb {
 width:94px;
 height:100px;
}

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのサムネールラベルの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7label

コールトゥアクションパネルのサムネールラベルのCSSプロパティ：

例

白の色を使用するラベルを設定するには、中央揃えで15ピクセル、Arial®フォントを使用します。

.s7interactivevideoviewer .s7calltoaction .s7label {
 text-align: center;
 color: #ffffff;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 15px;
}

垂直方向に表示できる数より多いサムネールがある場合、サムネールは右側に垂直方向のスクロールバーをレンダリングします。 デフォルトでは、コールトゥアクションパネルは、サムやスクロールボタンのない小さな縦棒をレンダリングします。 ただし、ビューアのCSSを変更してバーをカスタマイズすることはできます。

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのスクロールバー領域の外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

コールトゥアクションパネルのスクロールバー領域のCSSプロパティ：

例

幅が22ピクセルで、サムネール領域の上、右または下からの余白がないスクロールバーを設定するには、次のように記述します。

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:22px;
}

スクロールバートラックは、上下のスクロールバーボタンの間の領域です。 このコンポーネントは、トラックの位置と高さを自動的に設定します。

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのスクロールバートラックの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

スクロールトラックバーのCSSプロパティ

例

幅が22ピクセルで、グレー色のスクロールバートラックを設定するには：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:22px;
 background-color:#222222;
}

スクロールバーサムは、スクロールトラック領域内で垂直方向に移動します。 垂直方向の位置は、コンポーネントのロジックで完全に制御されます。ただし、サムの高さはコンテンツの量に応じて動的に変化するわけではありません。

次のCSSクラスセレクターで、サムの高さの外観とその他の要素を制御します。

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

コールトゥアクションパネルのサムの高さのCSSプロパティ：

例

6 x 167ピクセルで、3ピクセルの丸い角とグレーの色を持つスクロールバーサムを設定するには、次のように記述します。

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] {
 width:6px;
 height:167px;
 background-color:#666666;
 background-image:none;
 border-radius:3px 3px 3px 3px;
}

以下に示すCSSクラスセレクターで、上下のスクロールボタンの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

CSSのtop、left、bottomまたはrightプロパティを使用してスクロールボタンを配置することはできません。ビューアのロジックによって、自動的に配置が決まります。 インタラクティブビデオビューアのコールトゥアクションパネルでは、スクロールバーのこれらのボタンは使用されないので、初期設定のCSSではサイズが0ピクセルに設定されています。

コールトゥアクションパネルの上下のスクロールボタンのCSSプロパティ：

ボタンのツールチップはローカライズできます。 ユーザインターフェイス要素のローカライゼーションを参照してください。

例

スクロールボタンのサイズを0に設定して非表示にすることで、スクロールボタンを無効にします。

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}

Business.Adobe.com リソース

Style System Embedded Charts Content As A Service Dynamic Media Digital Rights Management Digital Asset Management