誘い文句（CTA、コールトゥアクション） call-to-action
コールトゥアクションパネルは、ビデオが終了すると表示され、特定のビデオに関連付けられているすべてのインタラクティブスウォッチが表示されます。
このパネルは、ビデオのタイトルを示すヘッダー領域、右上隅の再生ボタン、スクロール可能なグリッドとして表示される実際のインタラクティブスウォッチで構成されます。 callToActionRecap 設定属性を使用して、パネルを無効にできます。
コールトゥアクションパネルは、常に使用可能なビューア領域全体を使用します。
次の CSS クラスセレクターは、コールトゥアクションパネルの背景色の外観を制御します。
.s7interactivevideoviewer .s7calltoaction
コールトゥアクションパネルの背景色の CSS プロパティ css-properties-of-the-background-color-of-the-call-to-action-panel
例 example
背景がダークグレーのコールトゥアクションパネルを設定するには：
.s7interactivevideoviewer .s7calltoaction {
background-color: #222222;
}
次の CSS クラスセレクターは、コールトゥアクションパネルのヘッダーの外観を制御します。
.s7interactivevideoviewer .s7calltoaction .s7header
コールトゥアクションパネルヘッダーの CSS プロパティ css-properties-of-the-call-to-action-panel-header
例 example-1
高さが 70 ピクセルで、背景が濃いグレー、下部に沿って 2 ピクセルの境界線がわずかに明るいグレーのヘッダーを設定するには：
.s7interactivevideoviewer .s7calltoaction .s7header {
height: 70px;
border-bottom: 2px solid #444444;
background-color: #222222;
}
次の CSS クラスセレクターは、コールトゥアクションパネルのヘッダータイトルの外観を制御します。
.s7interactivevideoviewer .s7calltoaction .s7header .s7title
コールトゥアクションパネルのヘッダータイトルの CSS プロパティ： css-properties-of-the-header-title-in-the-call-to-action-panel
例 example-2
高さ 70 ピクセル、フォントサイズ 25 ピクセル、白色および左揃えを使用してビデオタイトルを設定するには：
.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
line-height: 70px;
font-size: 25px;
color: #ffffff;
text-align: left;
}
次の CSS クラスセレクターは、コールトゥアクションパネルの閉じるボタンの外観を制御します。
.s7interactivevideoviewer .s7calltoaction .s7closebutton
コールトゥアクションパネルの閉じるボタンの CSS プロパティ： css-properties-of-the-close-button-in-the-call-to-action-panel
state 属性セレクターをサポートしています。例 example-3
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 プロパティ： css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel
例 example-4
濃いグレーの背景でサムネール領域を設定するには：
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
background-color: #222222;
}
次の CSS クラスセレクターは、コールトゥアクションパネルのサムセルの外観を制御します。
.s7interactivevideoviewer .s7calltoaction .s7thumbcell
コールトゥアクションパネルのサムセルの CSS プロパティ： css-properties-of-the-thumbcell-in-the-call-to-action-panel
例 example-5
水平方向の間隔を 24 ピクセル、垂直方向の間隔を 18 ピクセルに設定するには：
.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
margin-top: 9px;
margin-bottom: 9px;
margin-left: 12px;
margin-right: 12px;
}
次の CSS クラスセレクターは、コールトゥアクションパネルのサムネールの外観を制御します。
.s7interactivevideoviewer .s7calltoaction .s7thumb
コールトゥアクションパネルのサムネールの CSS プロパティ： css-properties-of-the-thumbnail-in-the-call-to-action-panel
state 属性セレクターがサポートされており、これを使用して異なるスキンを異なるサムネール状態に適用できます。 特に、state="selected" は、現在選択されている画像のサムネールに対応します。state="default" は、残りのサムネールに対応します。state="over" は、マウスのカーソルを合わせたときに使用されます。例 example-6
94 x 100 ピクセルのサムネールを設定するには：
.s7interactivevideoviewer .s7calltoaction .s7thumb {
width:94px;
height:100px;
}
次の CSS クラスセレクターは、コールトゥアクションパネルのサムネールラベルの外観を制御します。
.s7interactivevideoviewer .s7calltoaction .s7label
コールトゥアクションパネルのサムネールラベルの CSS プロパティ： css-properties-of-the-thumbnail-label-in-the-call-to-action-panel
例 example-7
白を使用するラベルを設定するには、中央に 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 プロパティ： css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel
例 example-8
幅 22 ピクセルで、サムネール領域の上、右または下から余白を持たないスクロールバーを設定するには：
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
top:0px;
bottom:0px;
right:0px;
width:22px;
}
スクロールバートラックは、上部と下部のスクロールバーボタンの間の領域です。 トラックの位置と高さが自動的に設定されます。
次の CSS クラスセレクターは、コールトゥアクションパネルのスクロールバートラックの外観を制御します。
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack
スクロールトラックバーの CSS プロパティ css-properties-of-the-scroll-track-bar
例 example-9
幅 22 ピクセルで灰色のスクロールバーのトラックを設定するには：
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
width:22px;
background-color:#222222;
}
スクロールバーの親指は、スクロールトラック領域内で垂直に移動します。 垂直方向の位置はコンポーネントロジックによって完全に制御されますが、コンテンツの量に応じて親指の高さが動的に変化することはありません。
次の CSS クラスセレクターは、親指の高さなどのアスペクトの外観を制御します。
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb
コールトゥアクションパネルの親指の高さの CSS プロパティ： css-properties-of-the-thumb-height-in-the-call-to-action-panel
state 属性セレクターをサポートしています。このセレクターを使用して、"up"、"down"、"over" および "disabled" の異なるサムステートに異なるスキンを適用できます。例 example-10
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 プロパティ： css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel
state 属性セレクターをサポートしています。このセレクターを使用して、"up"、"down"、"over" および "disabled" の異なる親指状態に異なるスキンを適用できます。ボタンのツールチップはローカライズできます。 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 example-11
スクロールボタンのサイズを 0 に設定して非表示にすることにより、スクロールボタンを無効にします。
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
visibility: hidden;
width: 0px;
height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
visibility: hidden;
width: 0px;
height: 0px;
}