共有を埋め込む embed-share
埋め込み共有ツールは、ソーシャル共有パネルに追加されたボタンと、ツールがアクティベートされたときに表示されるモーダルダイアログボックスで構成されます。 ボタンの位置は、ソーシャル共有ツールで完全に管理されます。
埋め込み共有ボタンの外観は、次の CSS クラスセレクターで制御します。
.s7video360viewer .s7embedshare
埋め込み共有ツールの CSS プロパティ
state 属性セレクターをサポートしています。CSS クラスに CSS プロパティを設定することで、ソーシャル共有パネルからボタン display:none 削除することができます。
ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 - 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 プロパティ
例 – 背景オーバーレイを 70% の不透明度でグレーに設定するには：
.s7video360viewer .s7embeddialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
デフォルトでは、モーダルダイアログボックスはデスクトップシステムでは画面の中央に表示され、タッチデバイスでは web ページ領域全体を取ります。 どの場合でも、ダイアログボックスの位置とサイズはコンポーネントで管理されます。 このダイアログボックスは、次の CSS クラスセレクターで制御します。
.s7video360viewer .s7embeddialog .s7dialog
ダイアログボックスの CSS プロパティ
例 - ブラウザーウィンドウ全体を使用し、タッチデバイス上で背景が白くなるようにダイアログボックスを設定します。
.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 プロパティ
ヘッダーのタイトルは、次の CSS クラスセレクターで制御します。
.s7video360viewer .s7embeddialog .s7dialogheadertext
ダイアログボックスのヘッダーテキストの CSS プロパティ
「閉じる」ボタンは、次の CSS クラスセレクターで制御します。
.s7video360viewer .s7embeddialog .s7closebutton
閉じるボタンの の CSS プロパティ
state 属性セレクターをサポートしています。ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 - パディング、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 プロパティ
state 属性セレクターがサポートされており、異なるボタン状態に異なるスキンを適用するために使用できます。「キャンセル」ボタンは、次の CSS クラスセレクターで制御されます。
.s7video360viewer .s7embeddialog .s7dialogcancelbutton
ダイアログボックスのキャンセルボタンの CSS プロパティ
state 属性セレクターをサポートしています。さらに、両方のボタンは共通の CSS クラスを共有します。このクラスには、他のダイアログボックスのボタンと同じ CSS 設定を含めることができます。
.s7video360viewer .s7embeddialog .s7dialogfooter .s7button
ボタンの CSS プロパティ
ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 - 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 プロパティ
例 - メインダイアログボックス領域の高さを 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 プロパティ。
ダイアログ ボックスのラベルはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – すべてのラベルを 9 ピクセルフォントで太字にするグレーで設定するには、次の手順を実行します。
.s7video360viewer .s7embeddialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
埋め込みコードの上に表示されるテキストコピーのサイズは、次の CSS クラスセレクターで制御されます。
.s7video360viewer .s7embeddialog .s7dialoginputwide
ダイアログボックス入力全体フィールドの CSS プロパティ
例 - テキストコピーの幅を 430 ピクセルに設定し、下部に 10 ピクセルのパディングを含めるには、次のようにします。
.s7video360viewer .s7embeddialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
埋め込みコードはコンテナにラップされ、次の CSS クラスセレクターで制御されます。
.s7video360viewer .s7embeddialog .s7dialoginputcontainer
ダイアログボックス入力コンテナの CSS プロパティ
例 – 埋め込みコードテキストの周囲に 1 ピクセルのグレーの境界線を設定するには、幅を 430 ピクセルにし、10 ピクセルのパディングを使用します。
.s7video360viewer .s7embeddialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 10px;
width: 430px;
}
実際の埋め込みコードテキストは、次の CSS クラスセレクターで制御されます。
.s7video360viewer .s7embeddialog .s7dialoginputcontainer
ダイアログボックス入力コンテナの CSS プロパティ
例 -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 プロパティ
例 – 埋め込みサイズ ラベルを上揃えおよび幅 80 ピクセルに設定するには、次のようにします。
.s7video360viewer .s7embeddialog .s7dialogembedsizelabel {
vertical-align: top;
width: 80px;
}
埋め込みサイズ コンボボックスの幅は、次の CSS クラスセレクターで制御します。
.s7video360viewer .s7embeddialog .s7combobox
コンボボックスの CSS プロパティ
true および false の可能な値を持つ expanded 属性セレクターがサポートされています。 true の値は、コンボボックスに事前定義済みの埋め込みサイズのいずれかが表示される場合に使用されるので、使用可能なすべての幅を取る必要があります。 false の値は、コンボボックスで「カスタムサイズ」オプションが選択されている場合に使用されるため、カスタムの幅および高さの入力フィールドを挿入するために値を縮小する必要があります。例 – 定義済みの項目を表示する場合は埋め込みサイズ コンボボックスの幅を 300 ピクセル、カスタムサイズを表示する場合は幅を 110 ピクセルに設定する：
.s7video360viewer .s7embeddialog .s7combobox[expanded="true"] {
width: 300px;
}
.s7video360viewer .s7embeddialog .s7combobox[expanded="false"] {
width: 110px;
}
コンボボックステキストの高さは、特別な内部要素によって定義され、次の CSS クラスセレクターで制御されます。
.s7video360viewer .s7embeddialog .s7combobox .s7comboboxtext
コンボボックステキストの CSS プロパティ
例 – 埋め込みサイズ コンボボックスのテキストの高さを 40 ピクセルに設定するには：
.s7video360viewer .s7embeddialog .s7combobox .s7comboboxtext {
height: 40px;
}
コンボボックスの右側には「ドロップダウン」ボタンがあり、次の CSS クラスセレクターで制御されます。
.s7video360viewer .s7embeddialog .s7combobox .s7comboboxbutton
コンボボックスボタンの CSS プロパティ
state 属性セレクターをサポートしています。例 - ドロップダウンボタンを 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;
}
ドロップダウンパネル内の 1 つの項目。次の CSS クラスセレクターで制御されます。
.s7video360viewer .s7embeddialog .s7dropdownitemanchor
ドロップダウンアイテムアンカーの CSS プロパティ
例 - コンボボックスパネル項目の背景を白に設定するには：
.s7video360viewer .s7embeddialog .s7dropdownitemanchor {
background-color: #FFFFFF;
}
コンボボックスパネル内で選択された項目の左側に表示されるチェックマーク。以下の CSS クラスセレクターで制御されます。
.s7video360viewer .s7embeddialog .s7checkmark
チェックボックスの 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 プロパティ
例 - カスタムサイズの入力フィールドを 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 プロパティ
例 - スクロールパネルの幅を 44 ピクセルに設定する
.s7video360viewer .s7embeddialog .s7dialogscrollpanel {
width: 44px;
}
スクロールバー領域の外観は、次の CSS クラスセレクターで制御します。
.s7video360viewer .s7embeddialog .s7scrollbar
スクロールバーの CSS プロパティ
例 – 幅 28 ピクセルで、スクロールパネルの上、右および下から 8 ピクセルのマージンを持つスクロールバーを設定するには、次のようにします。
.s7video360viewer .s7embeddialog .s7scrollbar {
bottom: 8px;
right: 8px;
top: 8px;
width: 28px;
}
スクロールバートラックは、上部と下部のスクロールボタンの間の領域です。 トラックの位置と高さが自動的に設定されます。 トラックは、次の CSS クラスセレクターで制御します
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolltrack
スクロールバートラックの CSS プロパティ
例 – 幅 28 ピクセルで背景がグレーのスクロールバーのトラックを設定するには：
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}
スクロールバーの親指は、スクロールトラック領域内で垂直に移動します。 垂直方向の位置は、コンポーネントのロジックによって完全に制御されます。 ただし、コンテンツの量に応じて親指の高さが動的に変化することはありません。 親指の高さやその他の側面は、次の CSS クラスセレクターで設定できます。
.s7video360viewer .s7embeddialog .s7scrollbar .s7scrollthumb
スクロールバーのサムネールの CSS プロパティ
up、down、over、disabled などの異なるサムステートに異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。例 - 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 プロパティ
state 属性セレクターをサポートしています。このセレクターを使用して、ボタンの状態（up、down、over、disabled）に応じて異なるスキンを適用できます。ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 - 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);
}