インタラクティブデータが設定でビューアに渡されると、ビデオコンテンツの横にインタラクティブスウォッチパネルが表示されます。 「クリックして表示」、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-weight |
バナーパネル内のテキストに使用するフォントの太さです。 |
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; }