メインスウォッチ main-swatches

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

開発者
ユーザー

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

スウォッチコンテナの外観は、CSS クラスセレクターで制御します。

.s7mixedmediaviewer .s7swatches

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

高さ

スウォッチの高さ。

下

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

例 – 100 ピクセルの高さのスウォッチを設定する

.s7mixedmediviewer .s7swatches {
 height: 100px;
}

スウォッチサムネール間の間隔は、次の CSS クラスセレクターで制御します。

.s7mixedmediaviewer .s7swatches .s7thumbcell

CSS プロパティ

説明

margin

各サムネールの周囲の水平方向と垂直方向の余白のサイズ。実際のサムネールの間隔は、.s7thumbcell に設定された左右の余白合計と等しくなります。

例

垂直方向と水平方向の両方で 10 ピクセルに間隔を設定します。

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

個々のサムネールの外観は、次の CSS クラスセレクターで制御します。

.s7mixedmediaviewer .s7swatches .s7thumb

CSS プロパティ

説明

幅

サムネールの幅

高さ

サムネールの高さ

境界線

サムネールのボーダー。

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 プロパティ

説明

幅

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

高さ

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

オーバーレイでは、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 プロパティ

説明

幅

スクロールボタンの幅。

高さ

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

background-image

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

background-position

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

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

NOTE

このボタンは、up、down、over、disabled などの異なるボタン状態に異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

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

例 – 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