カラースウォッチ color-swatches

最終更新日： 2025年8月14日

トピック：
API

作成対象：

経験者
ユーザー
開発者

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

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

.s7mixedmediaviewer .s7colorswatches .s7swatches

色見本のCSS プロパティ

幅

スウォッチの幅。

の高さ

スウォッチの高さ。

下

垂直方向のスウォッチは、ビューアコンテナに対してオフセットされます。

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

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

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

.s7mixedmediaviewer .s7colorswatches .s7swatches .s7thumbcell

CSS プロパティ

説明

マージン

各サムネールの周りの水平および垂直余白のサイズ。実際のサムネールの間隔は、 .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-position

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

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

NOTE

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

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

dynamic-media-developer-resources-help-aem-viewers-ref