メインスウォッチ

メインスウォッチは、一連のサムネール画像と、左側および右側のオプションのスクロールボタンで構成されます。 スクロールボタンは、デスクトップで、すべてのサムネールがコンテナの幅に収まらない場合にのみ表示されます。 モバイルデバイスの場合や、サムネールがコンテナの幅に収まる場合は、スクロールボタンは表示されません。

スウォッチコンテナの外観は、以下に示すCSSクラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7swatches

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

height

スウォッチの高さ。

ビューアのコンテナを基準とした、スウォッチの垂直方向のオフセット。

例 — 高さが100ピクセルのスウォッチを設定するには、次のように記述します。

.s7mixedmediviewer .s7swatches { 
 height: 100px;  
}

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

.s7mixedmediaviewer .s7swatches .s7thumbcell

CSSプロパティ

説明

margin

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

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

.s7mixedmediaviewer .s7swatches .s7thumbcell { 
 margin: 5px; 
}

個々のサムネールの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7swatches .s7thumb

CSSプロパティ

説明

width

サムネールの幅。

height

サムネールの高さ。

枠線

サムネールの境界線。

メモ

サムネールでは、 state属性セレクターがサポートされます。このセレクターは、サムネールの状態ごとに異なるスキンを適用するのに使用できます。 特に、 state="selected"はメインビューに現在表示されている画像のサムネールに対応し、 state="default"は残りのサムネールに対応し、 state="over"はマウスカーソルを合わせたときに使用されます。

例 — 56 x 56ピクセルで、初期設定の境界線がライトグレー、選択された境界線がダークグレーのサムネールを設定するには、次のように記述します。

.s7mixedmediaviewer .s7swatches .s7thumb { 
 width: 56px; 
 height: 56px;  
} 
.s7mixedmediaviewer .s7swatches .s7thumb[state="default"] { 
 border: 1px solid #dddddd; 
} 
.s7mixedviewer .s7swatches .s7thumb[state="selected"] { 
 border: 1px solid #666666; 
}

アセットのタイプが、サムネール画像の上にオーバーレイされたアイコンとして表示されます。このアイコンは、以下のCSSクラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay

CSSプロパティ

説明

width

アイコンオーバーレイの幅。

height

アイコンオーバーレイの高さ。

オーバーレイでは、 type属性セレクターが次の値でサポートされます。image(1つの画像の場合)、swatchset(スウォッチセットの場合)、spinset(スピンセットの場合)、video(1つのビデオまたはアダプティブビデオセットの場合)。

例 — スピンセット、スウォッチセットおよびビデオのアイコンオーバーレイを設定するには、次のように記述します。

.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="swatchset"] { 
 background-image: url(images/v2/ThumbOverlaySwatchSet.png);  
} 
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="spinset"] { 
 background-image: url(images/v2/ThumbOverlaySpinSet.png);  
} 
.s7mixedmediaviewer .s7swatches .s7thumb .s7thumboverlay[type="video"] { 
 background-image: url(images/v2/ThumbOverlayVideo.png);  
}

左右のスクロールボタンの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7swatches .s7scrollrightbutton

CSSのtopleftbottomおよびrightプロパティを使用してスクロールボタンを配置することはできません。 代わりに、ビューアのロジックによって自動的に配置されます。

CSSプロパティ

説明

width

スクロールボタンの幅。

height

スクロールボタンの高さ。

background-image

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

background-position

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

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

メモ

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

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

例 — 56 x 56ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定します。

.s7mixedmediaviewer .s7swatches .s7scrollleftbutton { 
 background-size: auto; 
 width: 56px; 
 height: 56px; 
} 
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="up"]{ 
background-image:url(images/v2/ScrollLeftButton_up.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="over"]{ 
 background-image:url(images/v2/ScrollLeftButton_over.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="down"]{ 
 background-image:url(images/v2/ScrollLeftButton_down.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollleftbutton[state="disabled"]{ 
 background-image:url(images/v2/ScrollLeftButton_disabled.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton { 
 background-size: auto; 
 width: 56px; 
 height: 56px; 
} 
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="up"]{ 
background-image:url(images/v2/ScrollRightButton_up.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="over"]{ 
 background-image:url(images/v2/ScrollRightButton_over.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="down"]{ 
 background-image:url(images/v2/ScrollRightButton_down.png); 
} 
.s7mixedmediaviewer .s7swatches .s7scrollrightbutton[state="disabled"]{ 
 background-image:url(images/v2/ScrollRightButton_disabled.png); 
}

このページ