埋め込み共有

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

埋め込み共有ボタンの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embedshare

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

width

ボタンの幅。

height

ボタンの高さ。

background-image

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

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

メモ

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

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

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

例 — 28 x 28ピクセルで、ボタンの4つの状態ごとに異なる画像を表示する埋め込み共有ボタンを設定するには、次のように記述します。

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

ダイアログボックスがアクティブなときのWebページをカバーする背景オーバーレイは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7backoverlay

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

opacity

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

background-color

背景オーバーレイのカラー

例 — 不透明度70 %のグレーの背景オーバーレイを設定するには、次のように記述します。

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

デフォルトでは、モーダルなダイアログボックスがデスクトップシステムでは画面中央に表示され、タッチデバイスではWebページ領域全体に表示されます。 どのような場合でも、ダイアログボックスの位置とサイズはコンポーネントで管理されます。 ダイアログボックスは、以下のCSSクラスセレクターを使用して制御します。

.s7embeddialog .s7dialog

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

border-radius

ダイアログボックスの境界線の半径(ダイアログボックスがブラウザー全体に表示されない場合)。

background-color

ダイアログボックスの背景色。

width

ダイアログボックスがブラウザーウィンドウ全体に表示される場合は、設定しないか、100 %に設定する必要があります(タッチデバイスではこのモードを推奨)。

height

ダイアログボックスがブラウザーウィンドウ全体に表示される場合は、設定しないか、100 %に設定する必要があります(タッチデバイスではこのモードを推奨)。

例 — タッチデバイスで、ブラウザーウィンドウ全体を使用し、背景色が白であるダイアログボックスを設定するには、次のように記述します。

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

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

.s7ecatalogviewer .s7embeddialog .s7dialogheader

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

パディング

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

アイコンとタイトルテキストは、追加のコンテナにまとめられます。このアイコンは、

.s7ecatalogviewer .s7embeddialog .s7dialogheader .s7dialogline

ダイアログの線のCSSプロパティ

パディング

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

ヘッダーのアイコンは、以下のCSSクラスセレクターを使用して制御します

.s7ecatalogviewer .s7embeddialog .s7dialogheadericon

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

width

アイコンの幅。

height

アイコンの高さ。

background-image

アイコン画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

ヘッダーのタイトルは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7dialogheadertext

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

font-重み付け

フォント重み付け

font-size

フォントの高さ。

font-family

フォントファミリ。

パディング

テキストの内部のパディング。

閉じるボタンは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7closebutton

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

トップ

ヘッダーのコンテナを基準とした垂直方向のボタン位置。

ヘッダーのコンテナを基準とした水平方向のボタン位置。

width

ボタンの幅。

height

ボタンの高さ。

パディング

ボタンの内側のパディング。

background-image

状態ごとのボタン画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

メモ

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

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

例 — パディング、24 x 14ピクセルのアイコン、太字の16ポイントのタイトル、28 x 28ピクセルの閉じるボタンを含み、上から2ピクセル、ダイアログコンテナの右から2ピクセルの位置に配置するダイアログヘッダーを設定するには、次のように記述します。

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

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

.s7ecatalogviewer .s7embeddialog .s7dialogfooter

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

枠線

フッターとダイアログボックスのそれ以外の部分を視覚的に区切るために使用できる境界線。

フッターには、ボタンを保持する内側のコンテナがあります。 これは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7dialogbuttoncontainer

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

パディング

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

「すべて選択」ボタンは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7dialogactionbutton

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

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

width

ボタンの幅。

height

ボタンの高さ。

color

状態ごとのボタンのテキストカラー。

background-color

状態ごとのボタンの背景色。

メモ

「すべて選択」ボタンでは、state属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。

「キャンセル」ボタンは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7dialogcancelbutton

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

width

ボタンの幅。

height

ボタンの高さ。

color

状態ごとのボタンのテキストカラー。

background-color

状態ごとのボタンの背景色。

メモ

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

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

.s7ecatalogviewer .s7embeddialog .s7dialogfooter .s7button

ボタンのCSSプロパティ

font-重み付け

ボタンのフォント重み付け。

font-size

ボタンのフォントサイズ

font-family

ボタンのフォントファミリ。

line-height

ボタン内のテキストの高さ。 垂直方向揃えに影響します。

box-shadow

ドロップシャドウ。

margin-right

ボタンの右マージン。

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

例 — 64 x 34の「キャンセル」ボタン、82 x 34の「すべて選択」ボタンを含み、ボタンの状態ごとにテキスト色と背景色が異なるダイアログボックスのフッターを設定するには、次のように記述します。

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

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

.s7ecatalogviewer .s7embeddialog .s7dialogviewarea

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

height

ダイアログボックスのメイン領域の高さ。 ダイアログボックスがデスクトップモードで動作する場合にのみ指定します。 ダイアログボックスがブラウザーウィンドウ全体を占めるようにサイズ設定される場合は適用されません。

background-color

ダイアログボックスのメイン領域の背景色。

margin

外側のマージン。

例 — 高さが300ピクセルで、マージンが10ピクセルで、白の背景を使用するダイアログボックスのメイン領域を設定するには、次のように記述します。

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

すべてのフォームコンテンツ(ラベルや入力フィールドなど)は、コンテナ内に配置します。このコンテンツは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7dialogbody

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

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

パディング

内側のパディング。

例 — 10ピクセルのパディングがあるフォームコンテンツを設定するには、次のように記述します。

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

ダイアログボックスのフォーム内の静的なラベルはすべて、以下を使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7dialoglabel

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

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

font-重み付け

ラベルのフォント重み付け

font-size

ラベルのフォントサイズ

font-family

ラベルのフォントファミリ。

color

ラベルのテキストカラー

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

例 — グレー、太字、9ピクセルのフォントとなるようにすべてのラベルを設定するには、次のように記述します。

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

埋め込みコードの上部に表示されるテキストコピーのサイズは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7dialoginputwide

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

width

入力フィールドの幅。

パディング

内側のパディング。

例 — 幅が430ピクセルで、下部に10ピクセルのパディングがあるテキストコピーを設定するには、次のように記述します。

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

埋め込みコードはコンテナにまとめられ、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7dialoginputcontainer

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

width

埋め込みコードコンテナの幅。

枠線

埋め込みコードコンテナ周囲の境界線。

パディング

内側のパディング。

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

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

実際の埋め込みコードテキストは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7dialoginputcontainer

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

word-wrap

折り返しのスタイル。

例 — break-wordワードラップを使用する埋め込みコードを設定するには、次のように記述します。

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

埋め込みサイズのラベルとドロップダウンは、ダイアログボックスの下部にあり、コンテナに配置されます。このフォルダは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7dialogembedsizepanel

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

パディング

内側のパディング。

例 — 10ピクセルのパディングがある埋め込みサイズパネルを設定するには、次のように記述します。

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

埋め込みサイズのラベルのサイズと配置は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7dialogembedsizepanel

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

vertical-align

ラベルの垂直方向揃え。

width

ラベルの幅。

例 — 上揃えで幅が80ピクセルの埋め込みサイズラベルを設定するには、次のように記述します。

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

埋め込みサイズコンボボックスの幅は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7combobox

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

width

コンボボックスの幅。

メモ

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

例 — 定義済みのアイテムを表示する場合の幅が300ピクセル、カスタムサイズを表示する場合の幅が110ピクセルの埋め込みサイズコンボボックスを設定するには、次のように記述します。

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

コンボボックスのテキストの高さは、特別な内部要素で定義し、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxtext

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

height

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

例 — 埋め込みサイズコンボボックスのテキストの高さを40ピクセルに設定するには、次のように記述します。

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

コンボボックスの右側にはドロップダウンボタンがあり、このボタンは以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7combobox .s7comboboxbutton

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

トップ

コンボボックス内部の垂直方向のボタン位置。

コンボボックス内部の水平方向のボタン位置。

width

ボタンの幅。

height

ボタンの高さ。

background-image

状態ごとのボタン画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

メモ

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

例 — 28 x 28ピクセルで、状態ごとに個別の画像を持つドロップダウンボタンを設定するには、次のように記述します。

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

コンボボックスを開いたときに表示される埋め込みサイズのリストを持つパネルは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7comboboxdropdown

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

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

枠線

パネルの境界線。

例 — 1ピクセルのグレーの境界線があるコンボボックスパネルを設定するには、次のように記述します。

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

ドロップダウンパネル内の1つの項目は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7dropdownitemanchor

ドロップダウン項目アンカーのCSSプロパティ

background-color

項目の背景

例 — 背景色が白であるコンボボックスパネル項目を設定するには、次のように記述します。

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

コンボボックスパネル内の選択項目の左側に表示されるチェックマークは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7checkmark

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

width

アイコンの幅。

height

アイコンの高さ。

background-image

項目の画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

例 — チェックマークアイコンを25 x 25ピクセルに設定するには、次のように記述します。

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

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

.s7ecatalogviewer .s7embeddialog .s7dialogcustomsizepanel

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

埋め込みサイズコンボボックスからの距離

例 — コンボボックスの右側20ピクセルの位置にカスタムサイズ入力フィールドパネルを設定するには、次のように記述します。

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

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

.s7ecatalogviewer .s7embeddialog .s7dialogcustomsize

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

枠線

入力フィールド周囲の境界線。

width

入力フィールドの幅。

margin

入力フィールドの余白。

パディング

入力フィールドのパディング。

例 — 1ピクセルのグレーの境界線、マージン、パディングがあり、幅が70ピクセルのカスタムサイズ入力フィールドを設定するには、次のように記述します。

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

垂直方向のスクロールが必要な場合、ダイアログボックスの右端近くのパネル内にスクロールバーがレンダリングされます。このスクロールバーは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7dialogscrollpanel

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

width

スクロールパネルの幅。

例 — 幅が44ピクセルのスクロールパネルを設定するには、次のように記述します。

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

スクロールバー領域の外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7scrollbar

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

width

スクロールバーの幅。

トップ

スクロールパネルの上端からのスクロールバーの垂直方向のオフセット。

スクロールパネルの下端からのスクロールバーの垂直方向のオフセット。

スクロールパネルの右端からのスクロールバーの水平方向のオフセット。

例 — 幅が28ピクセルで、スクロールパネルの上、右および下からのマージンが8ピクセルのスクロールバーを設定するには、次のように記述します。

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

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

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolltrack

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

width

トラックの幅

background-color

トラックの背景色。

例 — 幅が28ピクセルで、背景色がグレーのスクロールバートラックを設定するには、次のように記述します。

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

スクロールバーサムは、スクロールトラック領域内で垂直方向に移動します。 その垂直方向の位置は、コンポーネントのロジックによって完全に制御されます。 一方、サムの高さは、コンテンツの量に応じて動的に変化するわけではありません。 サムの高さや、その他の外観は、以下のCSSクラスセレクターを使用して設定できます。

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollthumb

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

width

サムの幅。

height

サムの高さ。

padding-top

トラックの上端との間の垂直方向のパディング。

padding-bottom

トラックの下端との間の垂直方向のパディング。

background-image

サムの特定の状態に対して表示される画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

メモ

サムでは、state属性セレクターがサポートされます。このセレクターは、サムの状態ごとに異なるスキンを適用するのに使用できます。updownover、およびdisabled

例 — 28 x 45ピクセルで、上下に10ピクセルのマージンがあり、状態ごとに異なるアートワークを持つスクロールバーサムを設定するには、次のように記述します。

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

上下のスクロールボタンの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

CSS topleftbottomおよびrightプロパティを使用してスクロールボタンを配置することはできません。 ビューアのロジックによって自動的に配置が決まります。

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

width

ボタンの幅。

height

ボタンの高さ。

background-image

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

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

メモ

次のボタンでは、state属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。updownover、およびdisabled

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

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

.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] { 
background-image:url(images/sdk/scroll_up_up.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] { 
 background-image:url(images/sdk/scroll_up_over.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] { 
 background-image:url(images/sdk/scroll_up_down.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/sdk/scroll_up_disabled.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] { 
 background-image:url(images/sdk/scroll_down_up.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] { 
 background-image:url(images/sdk/scroll_down_over.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] { 
 background-image:url(images/sdk/scroll_down_down.png); 
} 
.s7ecatalogviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/sdk/scroll_down_disabled.png); 
}

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free