インタラクティブデータが設定でビューアに渡されると、インタラクティブスウォッチパネルがビデオコンテンツの横に表示されます。 上部に表示されるバナーは、「クリックして表示」、1つ以上のインタラクティブスウォッチの列、2つのスクロールボタン(デスクトップシステムのみ)などのテキストをレンダリングします。
デスクトップシステムおよびタッチデバイスでは、横置きレイアウトでは、インタラクティブスウォッチがビデオコンテンツの右に縦にレンダリングされます。 縦置きのタッチデバイスでは、スウォッチはビューアの下部に水平方向の行として表示されます。
以下に示すCSSクラスセレクターで、インタラクティブスウォッチパネルの位置と方向を制御します。
.s7interactivevideoviewer .s7interactiveswatches
width |
インタラクティブスウォッチパネルの幅 |
height |
インタラクティブスウォッチパネルの高さ。 |
トップ |
インタラクティブスウォッチパネルの上部の位置。 |
下 |
インタラクティブスウォッチパネルの下の位置。 |
左 |
インタラクティブスウォッチパネルの左側の位置。 |
右 |
インタラクティブスウォッチパネルの右側の位置。 |
インタラクティブスウォッチパネルの実行時の場所と向きは、上記のCSSプロパティを次のように組み合わせて定義します。
このスタイル設定とCSSマーカーを組み合わせて使用すると、インタラクティブスウォッチパネルを適切に配置できます。
タッチデバイスで横置きの方向にビューアの下部に水平方向にレンダリングし、その他の場合はビデオコンテンツの右に垂直方向に表示するインタラクティブスウォッチパネルを設定するには、次のように記述します。
.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches,
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches {
width:120px;
height:auto;
right:0px;
top:0px;
left:auto;
bottom:auto;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches {
width:auto;
height:136px;
right:auto;
top:auto;
left:0px;
bottom:0px;
}
バナーのサイズと位置は、インタラクティブスウォッチコンポーネントによって、CSSで適用された他のスタイル設定に基づいて管理され、明示的に設定することはできません。
以下に示すCSSクラスセレクターで、バナーパネルの外観を制御します。
.s7interactivevideoviewer .s7interactiveswatches .s7banner
background-color |
バナーパネルの背景色。 |
color |
バナーパネル内のテキストカラー。 |
枠線 |
バナーパネル周囲の境界線。 |
font-重み付け |
バナーパネル内のテキストに使用するフォント重み付け。 |
font-size |
バナーパネル内のテキストに使用するフォントサイズです。 |
font-family |
バナーパネル内のテキストに使用するフォントファミリー。 |
font-align |
バナーパネル内のテキストに使用するフォントの整列。 |
バナーのツールチップをローカライズできます。 詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。
背景色が濃いグレー、2ピクセルの境界線が明るいグレー、水平方向に中央揃えされた白のテキストのバナーを設定するには、次のように記述します。
.s7interactivevideoviewer .s7interactiveswatches .s7banner {
background-color: #222222;
border-bottom: 2px solid #444444;
color: #ffffff;
text-align: center;
}
以下に示すCSSクラスセレクターで、スウォッチの外観を制御します。
.s7interactivevideoviewer .s7interactiveswatches .s7swatches
background-color |
スウォッチ領域の背景色。 |
背景色が濃いグレーのスウォッチ領域を設定するには、次の手順に従います。
.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
background-color: #222222;
}
以下に示すCSSクラスセレクターで、スウォッチサムネールの間隔を制御します。
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell
margin |
各サムネール周囲の水平方向および垂直方向のマージンのサイズ。 実際のサムネールの間隔は、 .s7thumbcell に設定された左右のマージンの合計になります。 |
10ピクセルにする垂直方向の間隔を設定するには:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
margin: 5px;
}
以下に示すCSSクラスセレクターで、個々のサムネールの外観を制御します。
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb
width |
サムネールの幅。 |
height |
サムネールの高さ。 |
枠線 |
サムネールの境界線。 |
サムネールでは、state
属性セレクターがサポートされます。このセレクターは、サムネールの状態ごとに異なるスキンを適用するのに使用できます。 特に、state="selected"
は、現在選択されている画像のサムネールに対応します。state="default"
は、その他のサムネールに対応します。state="over"
は、マウスカーソルを合わせたときに使用されます。
100 x 75ピクセルのサムネールを設定するには:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
width:100px;
height:75px;
}
以下に示すCSSクラスセレクターで、サムネールラベルの外観を制御します。
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label
color |
テキストカラー |
枠線 |
ラベルの境界線。 |
text-align |
テキストの水平方向揃え。 |
font-family |
フォント名 |
左揃え、白、12ピクセル、Helveticaフォント、下の境界線を使用するラベルを設定するには、次のように記述します。
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label {
border-bottom: 1px solid #e9e9e9;
text-align: left;
color: #ffffff;
font-family: Helvetica,sans-serif;
font-size: 12px;
}
以下に示すCSSクラスセレクターで、上下のスクロールボタンの外観を制御します。
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton
.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton
CSS top
、left
、bottom
、right
の各プロパティを使用してスクロールボタンを配置することはできません。ビューアのロジックによって自動的に配置が決まります。
width |
スクロールボタンの幅。 |
height |
スクロールボタンの高さ。 |
background-image |
ボタンの特定の状態に対して表示する画像。 |
background-position |
CSSスプライトを使用する場合の、アートワークスプライト内の位置。 CSSスプライトも参照してください。 |
このボタンでは、state
属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。" up
"、" down
"、" over
"、" disabled
"
ボタンのツールヒントをローカライズできます。 詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。
60 x 36ピクセルで、状態ごとに異なるアートワークを持ち、コンポーネントのスプライト画像からそのアートワークを取得するスクロールアップボタンを設定するには、次のように記述します。
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton {
background-size: 120px;
width: 60px;
height: 36px;
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] {
background-image: url(images/v2/InteractiveSwatches_light_sprite.png);
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }