カラースウォッチは、一連のサムネール画像と、左側および右側のオプションのスクロールボタンで構成されます。 カラースウォッチは、デスクトップで、すべてのサムネールがコンテナの幅に収まらない場合にのみ表示されます。 モバイルデバイスの場合や、サムネールがコンテナの幅に収まる場合は、スクロールボタンは表示されません。
スウォッチコンテナの外観は、以下に示す 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 プロパティ |
説明 |
---|---|
幅 |
サムネールの幅。 |
高さ |
サムネールの高さ。 |
枠線 |
サムネールの境界線。 |
サムネールは、 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 スプライト . |
このボタンは、 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);
}