お気に入りビュー

お気に入りビューは、サムネール画像の列で構成されます。

お気に入りビューコンテナの外観は、以下の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-famiy

フォント名

font-size

フォントサイズ

例 — 14ピクセルのHelveticaフォントを使用するラベルを設定します。

.s7ecatalogviewer .s7favoritesview .s7label { 
 font-family: Helvetica,sans-serif; 
 font-size: 14px; 
}

このページ