カラースウォッチ

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

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

.s7mixedmediaviewer .s7colorswatches .s7swatches

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

width

スウォッチの幅。

height

スウォッチの高さ。

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

例 — 高さが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プロパティ

説明

width

サムネールの幅。

height

サムネールの高さ。

枠線

サムネールの境界線。

メモ

サムネールでは、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 topleftbottomおよびrightプロパティを使用してスクロールボタンを配置することはできません。 ビューアのロジックによって自動的に配置が決まります。

CSSプロパティ

説明

width

スクロールボタンの幅。

height

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

background-image

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

background-position

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

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

メモ

このボタンでは、state属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。updownover、および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); 
}

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now