メインスウォッチ main-swatches

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

スウォッチコンテナの外観は、以下に示す 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
サムネールの高さ。
枠線
サムネールの境界線。
NOTE
サムネールでは、 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 (単一の画像の場合)、 swatchset (スウォッチセットの場合)、 spinset (スピンセットの場合)、および video (単一のビデオまたはアダプティブビデオセットの場合)。

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

.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 を使用してスクロールボタンを配置することはできません。 top, left, bottom、および right プロパティ。 代わりに、ビューアのロジックによって自動的に配置されます。

CSS プロパティ
説明
width
スクロールボタンの幅。
height
スクロールボタンの高さ。
background-image
ボタンの特定の状態に対して表示される画像。
background-position

CSS スプライトを使用する場合は、アートワークスプライト内に配置します。

詳しくは、 CSS スプライト.

NOTE
このボタンは、 state 属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。 up, down, over、および 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8