お気に入りビュー favorites-view

最終更新日： 2025年8月14日

作成対象：

Developer
User

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

お気に入りビューコンテナの外観は、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7favoritesview

お気に入りビューの位置と高さは、ビューによって管理されます。CSSでは、幅を定義することしかできません。

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

背景色

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

幅

ビューの幅。

例 – 半透明の灰色の背景を持つ、幅100 ピクセルのお気に入りビューを設定する。

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

お気に入りのサムネールの間隔は、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7favoritesview .s7thumbcell

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

マージン

各サムネールの垂直余白のサイズ。実際のサムネールの間隔は、 .s7thumbcell に設定されている上下の余白の合計と同じです。

例 – 10 ピクセル間隔を設定します。

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

個々のサムネールの外観は、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7favoritesview .s7thumb

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

幅

サムネールの幅。

の高さ

サムネールの高さ。

境界線

サムネールの境界線。

NOTE

サムネールはstate属性セレクターをサポートしています。このセレクターを使用すると、異なるサムネール状態に異なるスキンを適用できます。特に、state="selected"は、ユーザーが最近選択したサムネールに対応しています。 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 プロパティ

フォントファミリー

フォント名。

フォントサイズ

フォントサイズ：

例 – 14 ピクセルのHelvetica® フォントでラベルを設定する。

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

recommendation-more-help

dynamic-media-developer-resources-help-aem-viewers-ref