リンクツールは、ソーシャル共有パネルに追加されるボタンと、ツールがアクティブになったときに表示されるモーダルダイアログボックスで構成されます。 ボタンの位置は、ソーシャル共有ツールで完全に管理されます。
リンク共有ボタンの外観は、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7linkshare
リンク共有ツールのCSSプロパティ
width |
ボタンの幅。 |
height |
ボタンの高さ。 |
background-image |
ボタンの特定の状態に対して表示する画像。 |
background-position |
CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトを参照してください。 |
このボタンでは、state
属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。
CSSクラスにdisplay:none
CSSプロパティを設定すると、ソーシャル共有パネルからボタンを削除できます。
ボタンのツールチップをローカライズできます。 詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。
例 — 28 x 28ピクセルで、ボタンの4つの状態ごとに異なる画像を表示するリンク共有ボタンを設定するには、次のように記述します。
.s7videoviewer .s7linkshare {
width:28px;
height:28px;
}
.s7videoviewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7videoviewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7videoviewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7videoviewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}
ダイアログボックスがアクティブなときのWebページをカバーする背景オーバーレイは、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7linkdialog .s7backoverlay
背景オーバーレイのCSSプロパティ
opacity |
背景オーバーレイの不透明度。 |
background-color |
背景オーバーレイのカラー |
例 — 不透明度70 %のグレーの背景オーバーレイを設定するには、次のように記述します。
.s7videoviewer .s7linkdialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
デフォルトでは、モーダルなダイアログボックスがデスクトップシステムでは画面中央に表示され、タッチデバイスではWebページ領域全体に表示されます。 どのような場合でも、ダイアログボックスの位置とサイズはコンポーネントで管理されます。 ダイアログボックスは、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7linkdialog .s7dialog
ダイアログボックスのCSSプロパティ
border-radius |
ダイアログボックスの境界線の半径(ダイアログボックスがブラウザー全体に表示されない場合)。 |
background-color |
ダイアログボックスの背景色。 |
width |
ダイアログボックスがブラウザーウィンドウ全体に表示される場合は、設定しないか、100 %に設定する必要があります(タッチデバイスではこのモードを推奨)。 |
height |
ダイアログボックスがブラウザーウィンドウ全体に表示される場合は、設定しないか、100 %に設定する必要があります(タッチデバイスではこのモードを推奨)。 |
例 — タッチデバイスで、ブラウザーウィンドウ全体を使用し、背景色が白であるダイアログボックスを設定するには、次のように記述します。
.s7videoviewer .s7touchinput .s7linkdialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
ダイアログボックスのヘッダーは、アイコン、タイトルテキストおよび閉じるボタンで構成されます。 ヘッダーのコンテナは、
.s7videoviewer .s7linkdialog .s7dialogheader
ダイアログボックスヘッダーのCSSプロパティ
パディング |
ヘッダーコンテンツの内側のパディング。 |
アイコンとタイトルテキストは、追加のコンテナにまとめられます。このアイコンは、
.s7videoviewer .s7linkdialog .s7dialogheader .s7dialogline
ダイアログの線のCSSプロパティ
パディング |
ヘッダーのアイコンとタイトルの内側のパディング |
ヘッダーのアイコンは、以下のCSSクラスセレクターを使用して制御します
.s7videoviewer .s7linkdialog .s7dialogheadericon
ダイアログボックスのヘッダーアイコンのCSSプロパティ
width |
アイコンの幅。 |
height |
アイコンの高さ。 |
background-image |
アイコン画像。 |
background-position |
CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトを参照してください。 |
ヘッダーのタイトルは、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7linkdialog .s7dialogheadertext
ダイアログボックスのヘッダーテキストのCSSプロパティ
font-重み付け |
フォント重み付け |
font-size |
フォントの高さ。 |
font-family |
フォントファミリ。 |
パディング |
テキストの内部のパディング。 |
閉じるボタンは、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7linkdialog .s7closebutton
閉じるボタンのCSSプロパティ
トップ |
ヘッダーのコンテナを基準とした垂直方向のボタン位置。 |
右 |
ヘッダーのコンテナを基準とした水平方向のボタン位置。 |
width |
ボタンの幅。 |
height |
ボタンの高さ。 |
パディング |
ボタンの内側のパディング。 |
background-image |
状態ごとのボタン画像。 |
background-position |
CSSスプライトを使用する場合、アートワークスプライト内の位置。 CSSスプライトを参照してください。 |
このボタンでは、state
属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。
「閉じる」ボタンのツールチップとダイアログボックスのタイトルをローカライズできます。 詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。
例 — パディング、22 x 12ピクセルのアイコン、太字の16ポイントのタイトルおよび28 x 28ピクセルの閉じるボタンを設定し、ダイアログボックスのコンテナの上から2ピクセル、右から2ピクセルの位置に配置するには、次のように記述します。
.s7videoviewer .s7linkdialog .s7dialogheader {
padding: 10px;
}
.s7videoviewer .s7linkdialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7videoviewer .s7linkdialog .s7dialogheadericon {
background-image: url("images/sdk/dlglink_cap.png");
height: 12px;
width: 22px;
}
.s7videoviewer .s7linkdialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7videoviewer .s7linkdialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7videoviewer .s7linkdialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7videoviewer .s7linkdialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7videoviewer .s7linkdialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7videoviewer .s7linkdialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
ダイアログフッターは「キャンセル」ボタンで構成されます。 フッターのコンテナは、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7linkdialog .s7dialogfooter
ダイアログボックスのフッターのCSSプロパティ
枠線 |
フッターとダイアログボックスのそれ以外の部分を視覚的に区切るために使用できる境界線。 |
フッターには、ボタンを保持する内側のコンテナがあります。 これは、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7linkdialog .s7dialogbuttoncontainer
ダイアログボックスのボタンコンテナのCSSプロパティ
パディング |
フッターとボタンの間の内側のパディング。 |
「すべて選択」ボタンは、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7linkdialog .s7dialogactionbutton
このボタンは、デスクトップシステムでのみ使用できます。
「すべて選択」ボタンのCSSプロパティ
width |
ボタンの幅。 |
height |
ボタンの高さ。 |
color |
状態ごとのボタンのテキストカラー。 |
background-color |
状態ごとのボタンの背景色。 |
「すべて選択」ボタンでは、state
属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。
「キャンセル」ボタンは、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7linkdialog .s7dialogcancelbutton
ダイアログボックスの「キャンセル」ボタンのCSSプロパティ
width |
ボタンの幅。 |
height |
ボタンの高さ。 |
color |
状態ごとのボタンのテキストカラー。 |
background-color |
状態ごとのボタンの背景色。 |
このボタンでは、state
属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。
さらに、両方のボタンは同じCSSクラスを共有します。このCSSクラスには、他のダイアログボックスのボタンと同じCSS設定を含めることができます。
.s7videoviewer .s7linkdialog .s7dialogfooter .s7button
ボタンのCSSプロパティ
font-重み付け |
ボタンのフォント重み付け。 |
font-size |
ボタンのフォントサイズ |
font-family |
ボタンのフォントファミリ。 |
line-height |
ボタン内のテキストの高さ。 垂直方向揃えに影響します。 |
box-shadow |
ドロップシャドウ。 |
margin-right |
ボタンの右マージン。 |
ボタンのツールヒントをローカライズできます。 詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。
例 — 64 x 34の「キャンセル」ボタンがあり、テキストカラーと背景色がボタンの状態ごとに異なるダイアログボックスフッターを設定するには、次のように記述します。
.s7videoviewer .s7linkdialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7videoviewer .s7linkdialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7videoviewer .s7linkdialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
ダイアログのメイン領域(ヘッダーとフッターの間)には、ダイアログのコンテンツが含まれます。 どのような場合でも、コンポーネントがこの領域の幅を管理します。CSSで設定することはできません。 ダイアログのメイン領域は、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7linkdialog .s7dialogviewarea
ダイアログボックスの表示領域のCSSプロパティ
height |
ダイアログボックスのメイン領域の高さ。 ダイアログボックスがデスクトップモードで動作する場合にのみ指定します。 ダイアログボックスがブラウザーウィンドウ全体を占めるようにサイズ設定される場合は適用されません。 |
background-color |
ダイアログボックスのメイン領域の背景色。 |
margin |
外側のマージン。 |
例 — 高さが300ピクセルで、マージンが10ピクセルで、白の背景を使用するダイアログボックスのメイン領域を設定するには、次のように記述します。
.s7videoviewer .s7linkdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
すべてのフォームコンテンツ(ラベルや入力フィールドなど)は、
.s7videoviewer .s7linkdialog .s7dialogbody
ダイアログボックスの本体のCSSプロパティ
パディング |
内側のパディング。 |
例 — 10ピクセルのパディングがあるフォームコンテンツを設定するには、次のように記述します。
.s7videoviewer .s7linkdialog .s7dialogbody {
padding: 10px;
}
ダイアログボックスのフォーム内の静的なラベルはすべて、以下を使用して制御します。
.s7videoviewer .s7linkdialog .s7dialoglabel
このクラスは、ラベルのサイズや位置の制御には適していません。このクラスは、フォームユーザーインターフェイスの様々な場所のテキストに適用できるからです。
ダイアログボックスのラベルのCSSプロパティ。
font-重み付け |
ラベルのフォント重み付け |
font-size |
ラベルのフォントサイズ |
font-family |
ラベルのフォントファミリ。 |
color |
ラベルのテキストカラー |
ダイアログボックスのラベルをローカライズできます。 詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。
例 — グレー、太字、9ピクセルのフォントとなるようにすべてのラベルを設定するには、次のように記述します。
.s7videoviewer .s7linkdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
リンクの上部に表示されるテキストコピーのサイズは、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7linkdialog .s7dialoginputwide
ダイアログボックスの広い入力フィールドのCSSプロパティ
width |
テキストの幅。 |
パディング |
内側のパディング。 |
例 — 幅が430ピクセルで、下部に10ピクセルのパディングがあるテキストコピーを設定するには、次のように記述します。
.s7videoviewer .s7linkdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
共有リンクはコンテナでラップし、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7linkdialog .s7dialoginputcontainer
ダイアログボックスの入力コンテナのCSSプロパティ
枠線 |
共有リンクコンテナの周囲の境界線。 |
パディング |
内側のパディング。 |
例 — 埋め込みコードテキストの周囲に9ピクセルのパディングがある1ピクセルのグレーの境界線を設定するには、次のように記述します。
.s7videoviewer .s7linkdialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
共有リンク自体は、以下のCSSクラスセレクターを使用して制御します。
.s7videoviewer .s7linkdialog .s7dialoglink
ダイアログボックス共有リンクのCSSプロパティ
width |
共有リンクの幅。 |
例 — 共有リンクの幅を450ピクセルに設定するには、次のように記述します。
.s7videoviewer .s7linkdialog .s7dialoglink {
width: 450px;
}