リンク共有

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

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

.s7videoviewer .s7linkshare

リンク共有ツールのCSSプロパティ

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

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スプライトを参照してください。

「閉じる」ボタンのツールチップとダイアログボックスのタイトルをローカライズできます。 詳しくは、ユーザインターフェイス要素のローカライゼーションを参照してください。

例 — パディング、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	状態ごとのボタンの背景色。

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

.s7videoviewer .s7linkdialog .s7dialogcancelbutton

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

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

さらに、両方のボタンは同じ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; 
}