「サムネール」ボタン thumbnails-button

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

トピック：
{"id":"a01bfd36-4ab8-4bf8-9dc0-5b45b890552e"}

作成対象：

{"id":"d378ca77-2da1-4f39-ad92-1917fe974a38"}
{"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"ff6a42d2-313e-452e-93a6-792e4fad9ff8"}

このボタンを選択またはタップすると、メインビューとサムネールの間でビューアが切り替わります。このボタンは、メインコントロールバーに表示されます。 CSSを使用して、このボタンのサイズ、肌、位置を調整できます。

メインビューア領域のCSS プロパティ

ボタンの外観は、次のCSS クラスセレクターで制御されます。

.s7ecatalogviewer .s7thumbnailpagebutton

CSS プロパティ

説明

margin-top

コントロールバーの上部からのオフセット。

margin-left

行の最初のボタンの場合、左側の次のボタン、またはコントロールバーの左側までの距離。

幅

ボタンの幅。

の高さ

ボタンの高さ。

背景画像

特定のボタン状態に対して表示される画像。

background-position

CSS スプライトを使用する場合は、アートワークスプライト内に配置します。

CSS スプライトも参照してください。

NOTE

このボタンは、stateとselectedの両方の属性セレクターをサポートしており、異なるスキンを異なるボタンの状態に適用するために使用できます。特に、selected='true'はサムネールモードがアクティブな状態のビューア状態に対応し、selected='false'はメイン表示のデフォルト状態に対応します。

ボタンツールのヒントはローカライズできます。詳しくは、ユーザーインターフェイス要素のローカライゼーションを参照してください。

例 – 28 x 28 ピクセルで、下から4 ピクセル、メインコントロールバーの左端から5 ピクセルの位置にあるサムネールボタンを設定します。最後に、選択または選択されていない4つの異なるボタンの状態ごとに異なる画像が表示されます。

.s7ecatalogviewer .s7thumbnailpagebutton{
margin-top: 4px;
margin-left: 5px; width:28px;
 height:28px;
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='false'][state='up'] {
background-image:url(images/v2/ThumbnailPageButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='false'][state='over'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='false'][state='down'] {
background-image:url(images/v2/ThumbnailPageButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='false'][state='disabled'] {
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='true'][state='up'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='true'][state='over'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='true'][state='down'] {
background-image:url(images/v2/ThumbnailPageButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailpagebutton [selected='true'][state='disabled'] {
background-image:url(images/v2/ThumbnailPageButton_dark_disabled.png);
}

recommendation-more-help

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