お気に入り表示

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

お気に入りビューコンテナの外観は、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7favoritesview

お気に入りビューの位置と高さは、ビューで管理します。CSS では、幅の定義のみ可能です。

お気に入りビューの CSS プロパティ

background-color

お気に入りビューの背景色。

width

ビューの幅。

例 — 幅が 100 ピクセルで、背景が半透明のグレーのお気に入りビューを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7favoritesview {
 width: 100px;
 background-color: rgba(221, 221, 221, 0.5);
}

お気に入りサムネールの間隔は、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell

お気に入りサムネールの CSS プロパティ

margin

各サムネールの周囲の垂直方向のマージンのサイズ。 実際のサムネールの間隔は、 .s7thumbcell .

例 — 10 ピクセルの間隔を設定するには

.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell {
 margin: 5px;
}

個々のサムネールの外観は、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7favoritesview .s7thumb

お気に入りサムネールの CSS プロパティ

幅

サムネールの幅。

height

サムネールの高さ。

枠線

サムネールの境界線。

メモ

サムネールは、 state 属性セレクター。サムネールの状態ごとに異なるスキンを適用するのに使用できます。 特に state="selected" は、ユーザーが最近選択したサムネールに対応します。 While state="default" は、残りのサムネールに対応します。 および state="over" は、マウスポインターを置いたときに使用されます。

例 — 75 x 75 ピクセルで、初期設定の境界線がライトグレー、選択された境界線がダークグレーのサムネールを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7favoritesview .s7thumb {
 width: 75px;
 height: 75px;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="default"] {
 border: 1px solid #dddddd;
}
.s7ecatalogsearchviewer .s7favoritesview .s7thumb[state="selected"] {
 border: 1px solid #666666;
}

サムネールラベルの外観は、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7favoritesview .s7label

お気に入りラベルの CSS プロパティ

font-famiy

フォント名。

font-size

フォントサイズ。

例 — 14 ピクセルの Helvetica®フォントを持つラベルを設定するには、次のように記述します。

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

このページ