お気に入り表示

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

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

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now