カラースウォッチは、一連のサムネール画像と、左側および右側のオプションのスクロールボタンで構成されます。 カラースウォッチは、デスクトップで、すべてのサムネールがコンテナの幅に収まらない場合にのみ表示されます。 モバイルデバイスの場合や、サムネールがコンテナの幅に収まる場合は、スクロールボタンは表示されません。
スウォッチコンテナの外観は、以下の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 top
、left
、bottom
およびright
プロパティを使用してスクロールボタンを配置することはできません。 ビューアのロジックによって自動的に配置が決まります。
CSSプロパティ |
説明 |
---|---|
width |
スクロールボタンの幅。 |
height |
スクロールボタンの高さ。 |
background-image |
ボタンの特定の状態に対して表示する画像。 |
background-position |
CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトを参照してください。 |
このボタンでは、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);
}