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

共有を埋め込む embed-share

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

作成対象：

  • Developer
  • User

埋め込み共有ツールは、ソーシャル共有パネルに追加されたボタンと、ツールがアクティブ化されたときに表示されるモーダルダイアログボックスで構成されます。 ボタンの位置は、ソーシャル共有ツールで完全に管理されます。

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

.s7ecatalogsearchviewer .s7embedshare

埋め込み共有ツールの​CSS プロパティ

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

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

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

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

ソーシャル共有パネルからボタンを削除するには、CSS クラスにdisplay:none CSS プロパティを設定します。

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

例 – 28 x 28 ピクセルの埋め込み共有ボタンを設定し、4つの異なるボタンの状態ごとに異なる画像を表示するには：

.s7ecatalogsearchviewer .s7embedshare {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}

ダイアログボックスがアクティブな場合にweb ページをカバーする背景オーバーレイは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay

背景オーバーレイの​CSS プロパティ

不透明度
背景オーバーレイの不透明度。
背景色
背景オーバーレイの色：

例 – 背景オーバーレイを70%の不透明度でグレーに設定するには：

.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

初期設定では、モーダルダイアログボックスはデスクトップシステムの画面の中央に表示され、タッチデバイスのweb ページ全体を表示します。 いずれの場合も、ダイアログボックスの位置とサイズはコンポーネントによって管理されます。 ダイアログボックスは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialog

ダイアログボックスの​CSS プロパティ

border-radius
ダイアログボックスの境界線の半径（ダイアログボックスでブラウザー全体が使用されない場合）。
背景色
ダイアログボックスの背景色。
幅
設定を解除するか、100%に設定する必要があります。この場合、ダイアログボックスはブラウザーウィンドウ全体を使用します（このモードはタッチデバイスで推奨されます）。
の高さ
設定を解除するか、100%に設定する必要があります。この場合、ダイアログボックスはブラウザーウィンドウ全体を使用します（このモードはタッチデバイスで推奨されます）。

例 – ダイアログボックスを設定して、ブラウザーウィンドウ全体を使用し、タッチデバイスの背景が白くなるようにするには、次の手順を実行します。

.s7ecatalogsearchviewer .s7touchinput .s7embeddialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

ダイアログボックスヘッダーは、アイコン、タイトルテキスト、閉じるボタンで構成されます。 ヘッダーコンテナは

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader

ダイアログボックスヘッダーの​CSS プロパティ

パディング
ヘッダーコンテンツの内部パディング。

アイコンとタイトルテキストは、で制御される追加のコンテナにラップされます

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline

ダイアログ行の​CSS プロパティ

パディング
ヘッダーアイコンとタイトルの内側のパディング

ヘッダーアイコンは、次のCSS クラスセレクターで制御されます

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon

ダイアログボックスヘッダーアイコン の CSS プロパティ

幅
アイコンの幅：
の高さ
アイコンの高さ：
背景画像
アイコン画像：
background-position

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

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

ヘッダータイトルは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext

ダイアログボックスのヘッダーテキストの​CSS プロパティ

フォントの重み
フォントの太さ：
フォントサイズ
フォントの高さ：
フォントファミリー
フォントファミリー：
パディング
内部テキストパディング：

「閉じる」ボタンは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7closebutton

​ 閉じるボタン​のCSS プロパティ

上位
ヘッダーコンテナに対する垂直ボタンの位置。
右
ヘッダーコンテナに対する水平ボタンの位置。
幅
ボタンの幅：
の高さ
ボタンの高さ：
パディング
ボタンの内側パディング。
背景画像
各状態のボタン画像。
background-position

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

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

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

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

例 – パディング、24 x 14 ピクセルアイコン、太字の16 ポイントタイトルを含むダイアログヘッダーを設定する。 最後に、28 x 28 ピクセルの「閉じる」ボタンを使用して、ダイアログコンテナの上部から2 ピクセル、右側から2 ピクセルを配置します。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader {
 padding: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgembed_cap.png");
    height: 14px;
    width: 24px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

ダイアログフッターは「キャンセル」ボタンで構成されます。 フッターコンテナは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter

​ ダイアログボックスのフッター​のCSS プロパティ

境界線
フッターをダイアログボックスの他の部分から視覚的に分離するために使用できる境界線。

フッターには、ボタンを保持する内部コンテナがあります。 これは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer

ダイアログボックスボタンコンテナの​CSS プロパティ

パディング
フッターとボタン間の内側のパディング。

「すべてを選択」ボタンは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton

このボタンは、デスクトップシステムでのみ使用できます。

すべてを選択ボタンのCSS プロパティ

幅
ボタンの幅：
の高さ
ボタンの高さ：
カラー
各状態のボタンのテキストカラー。
背景色
各状態のボタンの背景色。
NOTE
「すべてを選択」ボタンでは、state属性セレクターをサポートしています。このセレクターを使用すると、異なるスキンを異なるボタンの状態に適用できます。

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

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton

ダイアログボックスの​CSS プロパティのキャンセル ボタン

幅
ボタンの幅：
の高さ
ボタンの高さ：
カラー
各状態のボタンのテキストカラー。
背景色
各状態のボタンの背景色。
NOTE
このボタンは、state属性セレクターをサポートしています。このセレクターを使用すると、異なるスキンを異なるボタンの状態に適用できます。

さらに、両方のボタンは共通のCSS クラスを共有します。このクラスには、他のダイアログボックスボタンと同じCSS設定を含めることができます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button

ボタンの​CSS プロパティ

フォントの重み
ボタンのフォントの太さ：
フォントサイズ
ボタンのフォントサイズ。
フォントファミリー
ボタンフォントファミリー。
行の高さ
ボタン内のテキスト高さ。 垂直方向の整列に影響します。
ボックス シャドウ
ドロップシャドウ：
右余白
右ボタンのマージン。

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

例 – 64 x 34 「キャンセル」ボタン、82 x 34 「すべてを選択」ボタン、およびボタンの状態ごとに異なるテキストカラーと背景色を持つダイアログボックスフッターを設定するには、次の手順を実行します。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

ヘッダーとフッターの間にあるメインダイアログエリアには、右側のスクロール可能なダイアログコンテンツとスクロールパネルが含まれています。 いずれの場合も、コンポーネントはこの領域の幅を管理しますが、CSSで設定することはできません。 メインダイアログ領域は、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea

​ ダイアログボックスの表示領域のCSS プロパティ ​

の高さ
メインダイアログボックス領域の高さ。 ダイアログボックスがデスクトップモードで動作する場合にのみ指定する必要があります。 ダイアログボックスのサイズがブラウザーウィンドウ全体を占める場合は適用されません。
背景色
メインダイアログボックス領域の背景色。
マージン
外側のマージン：

例 – メインダイアログボックス領域を300 ピクセルの高さに設定するには、10 ピクセルの余白を設定し、白い背景を使用します。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

すべてのフォームコンテンツ（ラベルや入力フィールドなど）は、次のCSS クラスセレクターで制御されるコンテナ内にあります。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbody

このコンテナの高さがメインダイアログボックス領域よりも高いと思われる場合は、コンポーネントによって垂直スクロールが自動的に有効になります。

​ ダイアログボックスの本文​のCSS プロパティ

パディング
インナーパディング：

例 – フォームコンテンツを10 ピクセルパディングに設定するには：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbody {
    padding: 10px;
}

ダイアログボックスフォーム内のすべての静的ラベルは

.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel

このクラスは、フォームユーザーインターフェイスのさまざまな場所のテキストに適用できるため、ラベルのサイズや位置の制御には適していません。

​ ダイアログボックスラベルのCSS プロパティ。 ​

フォントの重み
ラベルのフォントの重さ：
フォントサイズ
ラベルのフォントサイズ：
フォントファミリー
ラベルフォントファミリー。
カラー
ラベルのテキストの色：

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

例 – すべてのラベルを9つのピクセルフォントを持つグレーで太字に設定するには：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

埋め込みコードの上に表示されるテキストコピーのサイズは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide

ダイアログボックス入力全体フィールドの​CSS プロパティ

幅
入力フィールドの幅。
パディング
インナーパディング：

例 – テキストのコピーを幅430 ピクセルで、下部に10 ピクセルのパディングを持つように設定するには：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

埋め込みコードはコンテナにラップされ、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

ダイアログボックス入力コンテナの​CSS プロパティ

幅
埋め込みコードコンテナの幅。
境界線
埋め込みコードコンテナの周囲の境界線。
パディング
インナーパディング：

例 – 埋め込みコードテキストの周囲に1 ピクセルのグレーの境界線を設定するには、幅430 ピクセル、パディング 10 ピクセルにします。

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 10px;
    width: 430px;
}

実際の埋め込みコードテキストは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

ダイアログボックス入力コンテナの​CSS プロパティ

ワードラップ
単語の折り返しスタイル。

例 – break-word ワードラッピングを使用するように埋め込みコードを設定するには：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogmessage {
    word-wrap: break-word;
}

埋め込みサイズラベルとドロップダウンは、ダイアログボックスの下部にあり、次のCSS クラスセレクターで制御されるコンテナに入れます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

ダイアログボックス埋め込みサイズパネルの​CSS プロパティ

パディング
インナーパディング：

例 – 埋め込みサイズパネルを10 ピクセルのパディングに設定するには：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel {
    padding: 10px;
}

埋め込みサイズラベルのサイズと整列は、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

ダイアログボックス埋め込みサイズパネルの​CSS プロパティ

垂直整列
垂直方向のラベルの整列：
幅
ラベルの幅：

例 – 埋め込みサイズラベルを上揃え、幅80 ピクセルに設定するには：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizelabel {
    vertical-align: top;
    width: 80px;
}

埋め込みサイズコンボボックスの幅は、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7combobox

コンボボックスの​CSS プロパティ

幅
コンボボックスの幅。
NOTE
コンボボックスでは、expanded属性セレクターをサポートしています。使用可能な値はtrueとfalseです。 値trueは、コンボボックスに事前定義済みの埋め込みサイズのいずれかが表示されている場合に使用されるので、使用可能なすべての幅を使用する必要があります。 値falseは、コンボボックスで「カスタムサイズ」オプションが選択されている場合に使用されるので、カスタム幅と高さの入力フィールドのスペースを許可するために縮小する必要があります。

例 – 事前定義済みのアイテムを表示する場合は300 ピクセル、カスタムサイズを表示する場合は110 ピクセル幅に埋め込みサイズコンボボックスを設定するには、次の手順を実行します。

.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="true"] {
    width: 300px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="false"] {
    width: 110px;
}

コンボボボックスのテキストの高さは、特殊な内部要素によって定義され、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext

コンボボボックステキストの​CSS プロパティ

の高さ
コンボボックスのテキストの高さ

例 – 埋め込みサイズコンボボックスのテキストの高さを40 ピクセルに設定するには：

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext {
    height: 40px;
}

コンボボックスの右側には「ドロップダウン」ボタンがあり、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton

コンボボボックスボタンの​CSS プロパティ

上位
コンボボックス内の縦方向ボタンの位置。
右
コンボボックス内の水平ボタンの位置。
幅
ボタンの幅：
の高さ
ボタンの高さ：
背景画像
各状態のボタン画像。
background-position

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

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

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

例 – ドロップダウンボタンを28 x 28 ピクセルに設定し、各状態に対して個別の画像を設定するには、次の手順を実行します。

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}

コンボボックスを開いたときに表示される埋め込みサイズのリストを含むパネルは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown

パネルのサイズと位置は、コンポーネントによって制御されます。 CSSで変更することはできません。

コンボボボックスドロップダウンの​CSS プロパティ

境界線
パネルの境界線

例 – コンボボボックスパネルの境界線を1 ピクセルのグレーに設定するには：

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown {
    border: 1px solid #CCCCCC;
}

次のCSS クラスセレクターで制御されるドロップダウンパネル内の1つの項目。

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor

ドロップダウン アイテム アンカーの​CSS プロパティ

背景色
アイテムの背景：

例 – コンボボボックスパネルの項目を白い背景に設定するには：

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor {
    background-color: #FFFFFF;
}

次のCSS クラスセレクターで制御されるコンボボボックスパネル内の選択した項目の左側に表示されるチェックマーク。

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark

チェックマークボックスの​CSS プロパティ

幅
アイコンの幅：
の高さ
アイコンの高さ：
背景画像
アイテム画像：
background-position

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

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

例 – チェックマークアイコンを25 x 25 ピクセルに設定するには：

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark {
    background-image: url("images/sdk/cboxchecked.png");
    height: 25px;
    width: 25px;
}

「埋め込みサイズ」コンボボックスで「カスタムサイズ」オプションを選択すると、ダイアログボックスの右側に2つの追加の入力フィールドが表示され、ユーザーがカスタム埋め込みサイズを入力できるようになります。 これらのフィールドは、次のCSS クラスセレクターで制御されるコンテナにラップされます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel

ダイアログボックスのカスタムサイズパネルの​CSS プロパティ

さんがを残しました
埋め込みサイズ コンボボックスからの距離。

例 – カスタムサイズの入力フィールドパネルをコンボボックスの右側の20 ピクセルに設定するには：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel {
    left: 20px;
}

各カスタムサイズ入力フィールドは、境界線をレンダリングし、フィールド間の余白を設定するコンテナで囲まれます。 これは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize

ダイアログボックスの​CSS プロパティのカスタムサイズ

境界線
入力フィールドの周囲にボーダーを設定します。
幅
入力フィールドの幅。
マージン
入力フィールドマージン。
パディング
入力フィールドのパディング：

例 – カスタムサイズの入力フィールドに、1 ピクセルのグレーの境界線、余白、パディングを設定し、幅を70 ピクセルにするには、次の操作を行います。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize {
    border: 1px solid #CCCCCC;
    margin-right: 20px;
    padding-left: 2px;
    padding-right: 2px;
    width: 70px;
}

垂直方向のスクロールが必要な場合、スクロールバーはダイアログボックスの右端に近いパネルに表示されます。このパネルは、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel

ダイアログボックススクロールパネルの​CSS プロパティ

幅
スクロールパネルの幅：

例 – スクロールパネルを幅44 ピクセルに設定する

.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel {
    width: 44px;
}

スクロールバー領域の外観は、次のCSS クラスセレクターで制御されます。

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar

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

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

例 – 28 ピクセル幅のスクロールバーを設定し、スクロールパネルの上下から8 ピクセルの余白を持たせるには、次の手順を実行します。

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

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

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack

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

幅
トラック幅：
背景色
背景色をトラック：

例 – 28 ピクセル幅で灰色の背景を持つスクロールバートラックを設定するには：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

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

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb

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

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

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

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

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

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

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

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

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

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

上下のスクロールボタンのCSS プロパティ

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

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

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

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

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

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

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}
recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref