お気に入り表示

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

お気に入り表示コンテナの外観は、以下の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; 
}

このページ