ドキュメントAEMDynamic Media ビューアリファレンスガイド

目次 table-of-contents

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

作成対象：

  • Developer
  • User

目次は、メインコントロールバーのボタンです。 アクティベートすると、ページインデックスとラベルのリストを含むドロップダウンパネルが表示されます。

設定に基づいて、リストには、カタログに存在するすべてのページを含めることも、明示的なラベルが定義されているページのみを含めることもできます。 デスクトップシステムでは、リストが使用可能な画面の不動産よりも長い場合、スクロールバーが右側に表示されます。

ビューアユーザーインターフェイスの目次ボタンの位置とサイズは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7tableofcontents

目次の​CSS プロパティ

margin-top
コントロールバーの上部からのオフセット。
margin-left
左の次のボタンまでの距離、またはこのボタンが行の最初のボタンの場合はコントロールバーの左側までの距離。
幅
目次ボタンの幅。
の高さ
目次ボタンの高さ。
背景画像
特定のボタン状態に対して表示される画像。
background-position

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

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

NOTE
このボタンは、state属性セレクターをサポートしています。このセレクターを使用すると、異なるスキンを異なるボタンの状態に適用できます。

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

例 – メインコントロールバーの下部から4 ピクセル、左側から43 ピクセルに配置された目次ボタンを設定します。 サイズは28 x 28 ピクセルで、4つの異なるボタンの状態ごとに異なる画像が表示されます。

.s7ecatalogsearchviewer .s7tableofcontents {
margin-top: 4px;
margin-left: 10px; width: 28px;
 height: 28px;
}
.s7ecatalogsearchviewer .s7tableofcontents[state='up'] {
background-image:url(images/v2/TableOfContents_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='over'] {
background-image:url(images/v2/TableOfContents_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='down'] {
background-image:url(images/v2/TableOfContents_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents[state='disabled'] {
background-image:url(images/v2/TableOfContents_dark_disabled.png);
}

ドロップダウンパネルの外観は、次のCSS クラスセレクターで制御されます。

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel

ドロップダウンパネルのCSS プロパティ

背景色
ドロップダウンパネルの背景色。
マージン
パネル境界とコンテンツ間の内部オフセット。
ボックス シャドウ
パネルの周囲にドロップシャドウを配置します。
NOTE
CSSからドロップダウンパネルのサイズや位置を制御することはできません。コンポーネントは、そのレイアウトをプログラムで管理します。

例 – 半透明の黒い背景、コンテンツの周囲に5 ピクセルの余白、およびドロップシャドウを持つドロップダウンパネルを設定します。

.s7ecatalogsearchviewer .s7tableofcontents .s7panel {
 background-color: rgba(0, 0, 0, 0.5);
 margin: 5px;
 box-shadow: 2px 2px 3px #c0c0c0;
}

個々のアイテムのルックアンドフィールは、次のCSS クラスセレクターで制御されます。

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item

項目の​CSS プロパティ

フォントファミリー
フォント名。
フォントサイズ
フォントサイズ：
の高さ
項目の高さ。
パディング
内部パディング：
NOTE
ドロップダウンリスト項目では、state属性セレクターをサポートしています。このセレクターを使用すると、様々なスキンを適用して、カーソルを合わせて選択した項目の状態を表示できます。

例 – Helvetica® 14 ピクセルのフォントと19 ピクセルの高さを持つドロップダウンアイテムを設定します。 選択した項目の上に濃いグレーの背景が表示され、薄いグレーの背景が表示されます。

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item {
font-family: Helvetica,sans-serif;
font-size: 14px;
height: 19px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="over"] {
background-color: rgb(102, 102, 102);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7item[state="selected"] {
background-color: rgb(178, 178, 178);
}

ページインデックスを示す要素は、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index

ページインデックスのCSS プロパティ

分幅
最小要素の幅。
max-width
エレメントの最大幅。
パディング右
ページインデックスとページラベルの間の距離。
NOTE
s7index CSS クラスにdisplay:noneを設定すると、ページインデックスを完全に非表示にできます。

例1 – 最小幅が40 ピクセル、最大幅が70 ピクセル、右側に5 ピクセルのマージンを含むページインデックスを設定します。

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
max-width: 70px;
min-width: 40px;
padding-right: 5px;
}

例2 - ページインデックスを非表示：

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7index {
display: none;
}

ページラベルは、次のCSS クラスセレクターで制御されます。

 .s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label

ページラベルの​CSS プロパティ

分幅
最小要素の幅。
max-width
エレメントの最大幅。

例 – 40 ピクセルの最小幅と240 ピクセルの最大幅でページインデックスを設定します。

.s7ecatalogsearchviewer .s7tableofcontents .s7panel .s7label {
min-width: 40px;
max-width: 240px;
}

ドロップダウンパネル内に垂直方向に収まる項目が多く、システムがデスクトップの場合、コンポーネントはパネルの右側に垂直方向のスクロールバーをレンダリングします。 スクロールバー領域の外観は、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar

スクロールバーの​CSS プロパティ

幅
スクロールバーの幅。
上位
パネル領域の上部からオフセットされた垂直方向のスクロールバー。
下
パネル領域の下部から垂直スクロールバーがオフセットされます。
右
パネル領域の右端から水平スクロールバーがオフセットされます。

例 – 28 ピクセル幅のスクロールバーを設定し、パネルの上部、右側、または下部の領域に余白を設定します。

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:28px;
}

スクロールバートラックは、上と下のスクロールボタンの間の領域です。 コンポーネントは、トラックの位置と高さを自動的に設定します。 トラックは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

スクロール トラックの​CSS プロパティ

幅
トラックの幅。
背景色
トラックの背景色。

例 – 28 ピクセル幅で、半透明のグレーの背景を持つスクロールバートラックを設定します。

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

スクロールバーの親指は、スクロールトラック領域内で垂直方向に移動します。 垂直位置は、コンポーネントロジックによって制御されます。 ただし、コンテンツの量によっては、親指の高さが動的に変化することはありません。 次のCSS クラスセレクターを使用して、親指の高さやその他の要素を設定できます。

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

スクロールバーの親指の​CSS プロパティ

幅
親指の幅。
の高さ
親指の高さ。
パディングトップ
トラックの上部の間の垂直方向のパディング。
パディング – 下
トラックの下部の間の垂直方向のパディング。
背景画像
特定のサムステートに対して表示される画像。
background-position

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

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

NOTE
Thumbはstate属性セレクターをサポートしています。このセレクターを使用すると、up、down、over、およびdisabledの親指状態に異なるスキンを適用できます。

例 – 28 x 45 ピクセルのスクロールバーの親指を設定し、上下に10 ピクセルの余白があり、状態ごとに異なるアートワークを設定します。

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

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

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

CSS top、left、bottom、rightのプロパティを使用してスクロールボタンを配置することはできません。代わりに、ビューアーロジックによって自動的に配置されます。

上にスクロールして下にスクロールするボタンの​CSS プロパティ

幅
ボタンの幅。
の高さ
ボタンの高さ。
背景画像
特定のボタン状態に対して表示される画像。
background-position

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

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

NOTE
ボタンはstate属性セレクターをサポートしています。このセレクターを使用すると、up、down、over、disabledのボタン状態に異なるスキンを適用できます。

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

例 – 28 x 32 ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定します。

.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref