インタラクティブスウォッチ

インタラクティブデータが設定でビューアに渡されると、インタラクティブスウォッチパネルがビデオコンテンツの横に表示されます。 上部に表示されるバナーは、「クリックして表示」、1つ以上のインタラクティブスウォッチの列、2つのスクロールボタン(デスクトップシステムのみ)などのテキストをレンダリングします。

デスクトップシステムおよびタッチデバイスでは、横置きレイアウトでは、インタラクティブスウォッチがビデオコンテンツの右に縦にレンダリングされます。 縦置きのタッチデバイスでは、スウォッチはビューアの下部に水平方向の行として表示されます。

以下に示すCSSクラスセレクターで、インタラクティブスウォッチパネルの位置と方向を制御します。

.s7interactivevideoviewer .s7interactiveswatches

インタラクティブスウォッチのCSSプロパティ

width

インタラクティブスウォッチパネルの幅

height

インタラクティブスウォッチパネルの高さ。

トップ

インタラクティブスウォッチパネルの上部の位置。

インタラクティブスウォッチパネルの下の位置。

インタラクティブスウォッチパネルの左側の位置。

インタラクティブスウォッチパネルの右側の位置。

インタラクティブスウォッチパネルの実行時の場所と向きは、上記のCSSプロパティを次のように組み合わせて定義します。

  • インタラクティブスウォッチをビューアの下部で水平方向にレンダリングするには、高さを絶対ピクセル値に設定します。left, bottom to 0px;width, right, top to auto
  • インタラクティブスウォッチをビデオコンテンツの右側に垂直方向にレンダリングするには、幅を絶対ピクセルに設定します。rightとtop to 0px;height, left, bottom to auto

このスタイル設定と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

バナーパネルのCSSプロパティ

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

スウォッチ領域のCSSプロパティ

background-color

スウォッチ領域の背景色。

背景色が濃いグレーのスウォッチ領域を設定するには、次の手順に従います。

.s7interactivevideoviewer .s7interactiveswatches .s7swatches { 
    background-color: #222222; 
}

以下に示すCSSクラスセレクターで、スウォッチサムネールの間隔を制御します。

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

スウォッチのサムネールの間隔のCSSプロパティ

margin

各サムネール周囲の水平方向および垂直方向のマージンのサイズ。 実際のサムネールの間隔は、 .s7thumbcell に設定された左右のマージンの合計になります。

10ピクセルにする垂直方向の間隔を設定するには:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell { 
 margin: 5px; 
}

以下に示すCSSクラスセレクターで、個々のサムネールの外観を制御します。

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

個々のサムネールの外観のCSSプロパティ

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

サムネールラベルの外観のCSSプロパティ

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 topleftbottomrightの各プロパティを使用してスクロールボタンを配置することはできません。ビューアのロジックによって自動的に配置が決まります。

上下のスクロールボタンの外観のCSSプロパティ

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; }

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now