埋め込み共有

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

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

.s7video360viewer .s7embedshare

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

width	ボタンの幅。
height	ボタンの高さ。
background-image	特定のボタン状態に対して表示される画像。
background-position	CSS スプライトを使用する場合の、アートワークスプライト内の位置。 CSS スプライト も参照してください。

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

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

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

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

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

.s7video360viewer .s7embeddialog .s7backoverlay

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

不透明	背景オーバーレイの不透明度。
background-color	背景オーバーレイの色。

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

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

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

.s7video360viewer .s7embeddialog .s7dialog

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

border-radius	ダイアログボックスの境界線の半径（ダイアログボックスがブラウザー全体に表示されない場合）。
background-color	ダイアログボックスの背景色。
width	ダイアログボックスがブラウザーウィンドウ全体に表示される場合は、設定を解除するか、100 %に設定します（タッチデバイスではこのモードをお勧めします）。
height	ダイアログボックスがブラウザーウィンドウ全体に表示される場合は、設定を解除するか、100 %に設定します（タッチデバイスではこのモードをお勧めします）。

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

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

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

.s7video360viewer .s7embeddialog .s7dialogheader

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

パディング

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

アイコンとタイトルテキストは、次の方法で制御できる追加のコンテナにまとめられます。

.s7video360viewer .s7embeddialog .s7dialogheader .s7dialogline

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

パディング

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

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

.s7video360viewer .s7embeddialog .s7dialogheadericon

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

width	アイコンの幅。
height	アイコンの高さ。
background-image	アイコン画像。
background-position	CSS スプライトを使用する場合の、アートワークスプライト内の位置。 CSS スプライト も参照してください。

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

.s7video360viewer .s7embeddialog .s7dialogheadertext

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

font-weight	フォントの太さ。
font-size	フォントの高さ
font-family	フォントファミリ。
パディング	内部テキストパディング。

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

.s7video360viewer .s7embeddialog .s7closebutton

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

トップ	ヘッダーコンテナを基準とした垂直方向のボタン位置。
右	ヘッダーコンテナを基準とした水平方向のボタン位置。
width	ボタンの幅。
height	ボタンの高さ。
パディング	ボタンの内側のパディング。
background-image	各状態のボタン画像。
background-position	CSS スプライトを使用する場合の、アートワークスプライト内の位置。 CSS スプライト も参照してください。

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

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

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

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

.s7video360viewer .s7embeddialog .s7dialogfooter

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

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

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

.s7video360viewer .s7embeddialog .s7dialogbuttoncontainer

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

パディング

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

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

.s7video360viewer .s7embeddialog .s7dialogactionbutton

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

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

width	ボタンの幅。
height	ボタンの高さ。
color	各状態のボタンのテキストカラー。
background-color	各状態のボタンの背景色。

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

.s7video360viewer .s7embeddialog .s7dialogcancelbutton

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

width	ボタンの幅。
height	ボタンの高さ。
color	各状態のボタンのテキストカラー。
background-color	各状態のボタンの背景色。

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

.s7video360viewer .s7embeddialog .s7dialogfooter .s7button

ボタンの CSS プロパティ

font-weight	ボタンのフォントの太さ。
font-size	ボタンのフォントサイズ。
font-family	ボタンのフォントファミリ。
行の高さ	ボタン内のテキストの高さ。 垂直方向の整列に影響します。
box-shadow	ドロップシャドウ。
margin-right	ボタンの右余白。

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

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

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

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

.s7video360viewer .s7embeddialog .s7dialogviewarea

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

height	ダイアログボックスのメイン領域の高さ。 この値は、ダイアログボックスがデスクトップモードで動作する場合にのみ指定する必要があります。 ダイアログボックスがブラウザーウィンドウ全体を占めるようにサイズ設定されている場合は適用されません。
background-color	ダイアログボックスのメイン領域の背景色。
margin	外側の余白。

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

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

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

.s7video360viewer .s7embeddialog .s7dialogbody

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

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

パディング

内側のパディング。

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

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

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

.s7video360viewer .s7embeddialog .s7dialoglabel

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

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

font-weight	ラベルのフォントの太さ
font-size	ラベルのフォントサイズ
font-family	ラベルのフォントファミリ。
color	ラベルのテキストの色。

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

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

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

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

.s7video360viewer .s7embeddialog .s7dialoginputwide

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

width	入力フィールドの幅。
パディング	内側のパディング。

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

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

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

.s7video360viewer .s7embeddialog .s7dialoginputcontainer

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

width	埋め込みコードコンテナの幅。
枠線	埋め込みコードコンテナの周囲の境界線。
パディング	内側のパディング。

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

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

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

.s7video360viewer .s7embeddialog .s7dialoginputcontainer

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

word-wrap

折り返しスタイル。

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

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

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

.s7video360viewer .s7embeddialog .s7dialogembedsizepanel

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

パディング

内側のパディング。

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

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

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

.s7video360viewer .s7embeddialog .s7dialogembedsizepanel

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

vertical-align	垂直方向のラベルの整列。
width	ラベルの幅。

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

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

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

.s7video360viewer .s7embeddialog .s7combobox

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

width

コンボボックスの幅。

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

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

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

.s7video360viewer .s7embeddialog .s7combobox .s7comboboxtext

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

height

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

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

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

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

.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton

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

トップ	コンボボックス内の垂直方向のボタン位置。
右	コンボボックス内の水平方向のボタン位置。
width	ボタンの幅。
height	ボタンの高さ。
background-image	各状態のボタン画像。
background-position	CSS スプライトを使用する場合の、アートワークスプライト内の位置。 CSS スプライト も参照してください。

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

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

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

.s7video360viewer .s7embeddialog .s7comboboxdropdown

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

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

枠線

パネルの境界線。

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

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

以下の CSS クラスセレクターを使用して制御される、ドロップダウンパネル内の単一の項目：

.s7video360viewer .s7embeddialog .s7dropdownitemanchor

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

background-color

項目の背景。

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

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

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

.s7video360viewer .s7embeddialog .s7checkmark

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

width	アイコンの幅。
height	アイコンの高さ。
background-image	項目の画像。
background-position	CSS スプライトを使用する場合の、アートワークスプライト内の位置。 CSS スプライト も参照してください。

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

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

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

.s7video360viewer .s7embeddialog .s7dialogcustomsizepanel

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

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

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

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

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

.s7video360viewer .s7embeddialog .s7dialogcustomsize

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

枠線	入力フィールドの周囲の境界線。
width	入力フィールドの幅。
margin	入力フィールドの余白。
パディング	入力フィールドのパディング。

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

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

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

.s7video360viewer .s7embeddialog .s7dialogscrollpanel

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

width

スクロールパネルの幅。

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

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

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

.s7video360viewer .s7embeddialog .s7scrollbar

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

width	スクロールバーの幅。
トップ	スクロールパネルの上端からのスクロールバーの垂直方向のオフセット。
下	スクロールパネルの下端からのスクロールバーの垂直方向のオフセット。
右	スクロールパネルの右端からのスクロールバーの水平方向のオフセット。

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

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

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

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolltrack

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

width	トラックの幅。
background-color	トラックの背景色。

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

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

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

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb

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

width	サムの幅。
height	サムの高さ
padding-top	トラックの上部との間の垂直方向のパディング。
padding-bottom	トラックの下端との間の垂直方向のパディング。
background-image	サムの特定の状態に対して表示される画像。
background-position	CSS スプライトを使用する場合の、アートワークスプライト内の位置。 CSS スプライト も参照してください。

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

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

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

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollupbutton

.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

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

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

width	ボタンの幅。
height	ボタンの高さ。
background-image	特定のボタン状態に対して表示される画像。
background-position	CSS スプライトを使用する場合の、アートワークスプライト内の位置。 CSS スプライト も参照してください。

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

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

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