カラースウォッチ color-swatches

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

トピック：

作成対象：

開発者
ユーザー

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

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

.s7mixedmediaviewer .s7colorswatches .s7swatches

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

幅

スウォッチの幅。

高さ

スウォッチの高さ。

下

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

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

.s7mixedmediviewer .s7colorswatches .s7swatches {
 height: 100px;
}

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell

CSS プロパティ

説明

margin

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

例

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

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

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumb

CSS プロパティ

説明

幅

サムネールの幅

高さ

サムネールの高さ

境界線

サムネールのボーダー。

NOTE

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

例 – 56 x 56 ピクセルのサムネールで、デフォルトの境界線が薄いグレーになり、選択した境界線が濃いグレーになるようにします。

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

左右のスクロールボタンの外観は、次の CSS クラスセレクターで制御します。

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollleftbutton

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7scrollrightbutton

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

CSS プロパティ

説明

幅

スクロールボタンの幅。

高さ

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

background-image

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

background-position

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

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

NOTE

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

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

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

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8