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

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

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

誘い文句(CTA:コールトゥアクション)パネルは、常にビューアの使用可能な領域全体を占めます。

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

.s7interactivevideoviewer .s7calltoaction

誘い文句(CTA:コールトゥアクションパネル)の背景色のCSSプロパティ

background-color

誘い文句(CTA:コールトゥアクション)パネルの背景色。

ダークグレーの背景色の誘い文句(CTA:コールトゥアクション)パネルを設定するには:

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

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

.s7interactivevideoviewer .s7calltoaction .s7header

誘い文句(CTA:コールトゥアクション)パネルヘッダーのCSSプロパティ

background-color

ヘッダーの背景色。

height

ヘッダーの高さ。

border-bottom

ヘッダーの下の境界線。

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

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

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

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

誘い文句(CTA:コールトゥアクション)パネルのヘッダータイトルのCSSプロパティ:

color

バナー内のテキストカラー。

font-size

フォントサイズ

line-height

行の高さ。

font-family

フォントファミリ。

text-align

バナー内のテキストの配置。

padding-left

左パディング

padding-right

右パディング。「再生」ボタンのスペースを許可します。

行の高さが70ピクセル、フォントサイズが25ピクセル、白、左揃えのビデオタイトルを設定するには、次のように記述します。

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

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

.s7interactivevideoviewer .s7calltoaction .s7closebutton

誘い文句(CTA:コールトゥアクション)パネルの閉じるボタンのCSSプロパティ:

トップ

パディングを含む、ヘッダーの上端からの位置。

パディングを含む、ヘッダーの右からの位置。

width

ボタンの幅。

height

ボタンの高さ。

background-image

ボタンの特定の状態に対して表示される画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

CSSスプライトを参照してください。

メモ

このボタンでは、state属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。

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

誘い文句(CTA:コールトゥアクション)パネルのサムネールグリッド表示のCSSプロパティ:

background-color

サムネール領域の背景色。

暗いグレーの背景のサムネール領域を設定するには:

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

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

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

誘い文句(CTA:コールトゥアクション)パネルのサムネールのCSSプロパティ

margin

各サムネール周囲の水平方向および垂直方向のマージンのサイズ。

実際のサムネールの水平方向の間隔は、 .s7thumbcell に設定された左右のマージンの合計になります。 同じ規則が適用されますが、垂直方向の間隔には適用されます。

24ピクセルの水平方向の間隔と18ピクセルの垂直方向の間隔を設定するには、次のように記述します。

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

以下に示すCSSクラスセレクターで、「呼び出し先アクション」パネルでのサムネールの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7thumb

誘い文句(CTA:コールトゥアクション)パネルのサムネールのCSSプロパティ

width

サムネールの幅。

height

サムネールの高さ。

枠線

サムネールの境界線。

メモ

サムネールでは、state属性セレクターがサポートされます。このセレクターは、サムネールの状態ごとに異なるスキンを適用するのに使用できます。 具体的には、state="selected"は現在選択されている画像のサムネールに対応します。state="default"は、その他のサムネールに対応します。state="over"は、マウスカーソルを合わせたときに使用されます。

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

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

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

.s7interactivevideoviewer .s7calltoaction .s7label

誘い文句(CTA:コールトゥアクション)パネルのサムネールラベルのCSSプロパティ

color

ラベルのテキストカラー。

text-align

ラベルの水平方向の位置。

font-family

フォント名

font-size

フォントファミリ。

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

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

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

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

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

誘い文句(CTA:コールトゥアクション)パネルのスクロールバー領域のCSSプロパティ。

width

スクロールバーの幅。

トップ

サムネール領域の上端からのスクロールバーの垂直方向のオフセット。

サムネール領域の下端からのスクロールバーの垂直方向のオフセット。

サムネール領域の右端からのスクロールバーの水平方向のオフセット。

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

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

スクロールバートラックは、スクロールバーの上部ボタンと下部ボタンの間の領域です。 トラックの位置と高さが自動的に設定されます。

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

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

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

width

スクロールトラックバーの幅。

background-color

トラックバーの背景色。

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

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

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

以下に示すCSSクラスセレクターで、サムの高さの外観とその他の縦横比を制御します。

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

誘い文句(CTA:コールトゥアクション)パネルのサムの高さのCSSプロパティ

width

サムの幅。

height

サムの高さ。

padding-top

トラックの上端との間の垂直方向のパディング。

padding-bottom

トラックの下端との間の垂直方向のパディング。

border-radius

境界線の半径。

background-color

サムのカラー

background-image

サムの特定の状態に対して表示される画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

CSSスプライトを参照してください。

メモ

サムでは、state属性セレクターがサポートされます。このセレクターは、サムの次の状態ごとに異なるスキンを適用するのに使用できます。"up""down""over"、および"disabled"

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)パネルでは、スクロールバーのこれらのボタンは使用されないので、初期設定のCSSではサイズが0ピクセルに設定されています。

誘い文句(CTA:コールトゥアクション)パネルの上下のスクロールボタンのCSSプロパティ。

width

ボタンの幅。

height

ボタンの高さ。

background-image

ボタンの特定の状態に対して表示される画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

CSSスプライトを参照してください。

メモ

これらのボタンでは、state属性セレクターがサポートされます。このセレクターは、サムの次の状態ごとに異なるスキンを適用するのに使用できます。"up""down""over"、および"disabled"

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

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

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

このページ