お気に入り表示は、サムネール画像の列で構成されます。
お気に入り表示コンテナの外観は、以下のCSSクラスセレクターを使用して制御します。
.s7ecatalogviewer .s7favoritesview
お気に入り表示の位置と高さは、表示が管理します。CSSでは、幅の定義のみ可能です。
お気に入り表示のCSSプロパティ
background-color |
お気に入り表示の背景色。 |
width |
表示の幅。 |
例 — 幅が100ピクセルで、背景色が半透明のグレーのお気に入り表示を設定するには、次のように記述します。
.s7ecatalogviewer .s7favoritesview {
width: 100px;
background-color: rgba(221, 221, 221, 0.5);
}
お気に入りサムネールの間隔は、以下のCSSクラスセレクターを使用して制御します。
.s7ecatalogviewer .s7favoritesview .s7thumbcell
お気に入りサムネールのCSSプロパティ
margin |
各サムネール周囲の垂直方向のマージンのサイズ。 実際のサムネールの間隔は、 .s7thumbcell に設定された上下のマージンの合計になります。 |
例 — 10ピクセルの間隔を設定します。
.s7ecatalogviewer .s7favoritesview .s7thumbcell {
margin: 5px;
}
個々のサムネールの外観は、以下のCSSクラスセレクターを使用して制御します。
.s7ecatalogviewer .s7favoritesview .s7thumb
お気に入りサムネールのCSSプロパティ
width |
サムネールの幅。 |
height |
サムネールの高さ。 |
枠線 |
サムネールの境界線。 |
サムネールでは、state
属性セレクターがサポートされます。このセレクターは、サムネールの状態ごとに異なるスキンを適用するのに使用できます。 特に、state="selected"
は、ユーザが最近選択したサムネイルに対応しています。 state="default"
は、その他のサムネールに対応します。state="over"
はマウスカーソルを合わせたときに使用されます。
例 — 75 x 75ピクセルで、初期設定の境界線がライトグレー、選択された境界線がダークグレーのサムネールを設定します。
.s7ecatalogviewer .s7favoritesview .s7thumb {
width: 75px;
height: 75px;
}
.s7ecatalogviewer .s7favoritesview .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7ecatalogviewer .s7favoritesview .s7thumb[state="selected"] {
border: 1px solid #666666;
}
サムネールラベルの外観は、以下のCSSクラスセレクターを使用して制御します。
.s7ecatalogviewer .s7favoritesview .s7label
お気に入りラベルのCSSプロパティ
フォントファミリ |
フォント名 |
font-size |
フォントサイズ |
例 — 14ピクセルのHelveticaフォントのラベルを設定するには、次のように記述します。
.s7ecatalogviewer .s7favoritesview .s7label {
font-family: Helvetica,sans-serif;
font-size: 14px;
}