リンク共有 link-share

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

リンク共有ボタンの外観は、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7linkshare

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

ボタンの幅
高さ
ボタンの高さ。
background-image
特定のボタン状態に対して表示される画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

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

NOTE
このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

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

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

例 – 28 x 28 ピクセルのリンク共有ボタンを設定し、4 つの異なるボタン状態のそれぞれに異なる画像を表示するには、次のようにします。

.s7smartcropvideoviewer .s7linkshare {
 width:28px;
 height:28px;
}
.s7smartcropvideoviewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7smartcropvideoviewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7smartcropvideoviewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7smartcropvideoviewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}

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

.s7smartcropvideoviewer .s7linkdialog .s7backoverlay

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

opacity
背景オーバーレイの不透明度。
の背景色の
背景のオーバーレイカラー。

例 – 背景オーバーレイを 70% の不透明度でグレーに設定するには:

.s7smartcropvideoviewer .s7linkdialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

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

.s7smartcropvideoviewer .s7linkdialog .s7dialog

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

border-radius
ダイアログボックスの境界線の半径(ダイアログボックスがブラウザー全体を取らない場合)。
の背景色の
ダイアログボックスの背景色。
未設定または 100% に設定する必要があります。この場合、ダイアログボックスはブラウザーウィンドウ全体を取り込みます(タッチデバイスでは、このモードをお勧めします)。
高さ
未設定または 100% に設定する必要があります。この場合、ダイアログボックスはブラウザーウィンドウ全体を取り込みます(タッチデバイスでは、このモードをお勧めします)。

例 – ブラウザーウィンドウ全体を使用し、タッチデバイスの背景が白くなるようにダイアログボックスを設定するには:

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

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

.s7smartcropvideoviewer .s7linkdialog .s7dialogheader

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

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

アイコンとタイトルテキストは、で制御される追加のコンテナにラップされます

.s7smartcropvideoviewer .s7linkdialog .s7dialogheader .s7dialogline

ダイアログラインの CSS プロパティ

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

ヘッダーアイコンは、次の CSS クラスセレクターで制御します

.s7smartcropvideoviewer .s7linkdialog .s7dialogheadericon

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

アイコンの幅。
高さ
アイコンの高さ。
background-image
アイコン画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

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

ヘッダーのタイトルは、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7linkdialog .s7dialogheadertext

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

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

「閉じる」ボタンは、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7linkdialog .s7closebutton

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

ヘッダーコンテナに対する垂直方向のボタンの位置。
right
ヘッダーコンテナに対する水平方向のボタンの位置。
ボタンの幅
高さ
ボタンの高さ。
padding
ボタンの内側のパディング。
background-image
各状態のボタン画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

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

NOTE
このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

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

例 – パディング、22 x 12 ピクセルのアイコン、太字の 16 ポイントのタイトルを含むダイアログボックスヘッダーを設定する 最後に、ダイアログボックスのコンテナの上から 2 ピクセル、右から 2 ピクセルの位置にある 28 x 28 ピクセルの「閉じる」ボタンを選択します。

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

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

.s7smartcropvideoviewer .s7linkdialog .s7dialogfooter

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

境界線
フッターをダイアログボックスの他の部分と視覚的に区別する際に使用する境界線。

フッターには、ボタンを保持する内部コンテナがあります。 次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7linkdialog .s7dialogbuttoncontainer

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

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

「すべてを選択」ボタンは、次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7linkdialog .s7dialogactionbutton

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

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

ボタンの幅
高さ
ボタンの高さ。
color
各状態のボタンのテキストの色。
の背景色の
各状態のボタンの背景色
NOTE
「すべてを選択」ボタンでは、state 属性セレクターがサポートされており、異なるボタン状態に異なるスキンを適用するために使用できます。

「キャンセル」ボタンは、次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7linkdialog .s7dialogcancelbutton

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

ボタンの幅
高さ
ボタンの高さ。
color
各状態のボタンのテキストの色。
の背景色の
各状態のボタンの背景色
NOTE
このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

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

.s7smartcropvideoviewer .s7linkdialog .s7dialogfooter .s7button

ボタンの CSS プロパティ

フォントの太さの
ボタンのフォントの線幅。
font-size
ボタンのフォントサイズ。
フォントファミリーの
ボタンのフォントファミリー。
line-height
ボタン内のテキストの高さ。 垂直方向の位置揃えに影響します。
ボックスの影の
ドロップシャドウ。
margin-right
ボタンの右の余白。

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

例 – 64 x 34 の「キャンセル」ボタンを持つダイアログボックスのフッターを設定し、ボタンの状態ごとにテキストカラーと背景色が異なるようにするには、次の手順に従います。

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

メインダイアログ領域には、ヘッダーとフッターの間にダイアログコンテンツが含まれています。 いずれの場合も、コンポーネントによってこの領域の幅が管理されます。CSS で設定することはできません。 メインダイアログ領域は、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7linkdialog .s7dialogviewarea

ダイアログボックスの表示エリアの CSS プロパティ ​

高さ
メイン ダイアログ ボックス領域の高さです。 このオプションは、ダイアログボックスがデスクトップモードで動作する場合にのみ指定してください。 ダイアログ ボックスのサイズがブラウザ ウィンドウ全体に表示される場合は、この設定は適用されません。
の背景色の
メインのダイアログボックス領域の背景色。
margin
外側余白。

例 – メインダイアログボックス領域の高さを 300 ピクセルに設定し、余白を 10 ピクセルにして背景を白くするには:

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

すべてのフォームコンテンツ(ラベルや入力フィールドなど)は、で制御されるコンテナに格納されます

.s7smartcropvideoviewer .s7linkdialog .s7dialogbody

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

padding
内側のパディング

例 – フォームコンテンツの 10 ピクセルのパディングを設定するには:

.s7smartcropvideoviewer .s7linkdialog .s7dialogbody {
    padding: 10px;
}

ダイアログボックスのフォームのすべての静的ラベルは、次のコントロールで制御されます

.s7smartcropvideoviewer .s7linkdialog .s7dialoglabel

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

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

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

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

例 – すべてのラベルを 9 ピクセルのフォントを使用してグレー、太字に設定するには:

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

リンクの上に表示されるテキストコピーのサイズは、次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7linkdialog .s7dialoginputwide

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

テキストの幅。
padding
内側のパディング

例 – テキストコピーの幅を 430 ピクセルに設定し、下部に 10 ピクセルのパディングを含める場合:

.s7smartcropvideoviewer .s7linkdialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

共有リンクはコンテナにラップされ、次の CSS クラスセレクターで制御されます。

.s7smartcropvideoviewer .s7linkdialog .s7dialoginputcontainer

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

境界線
リンクを共有コンテナを囲むボーダー。
padding
内側のパディング

例 – 埋め込みコードテキストの周囲に 1 ピクセルのグレーの境界線を設定し、9 ピクセルのパディングを持つ

.s7smartcropvideoviewer .s7linkdialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}

共有リンク自体は、次の CSS クラスセレクターで制御します。

.s7smartcropvideoviewer .s7linkdialog .s7dialoglink

ダイアログボックスの CSS プロパティ共有リンク

リンクの幅を共有します。

例 – 共有リンクの幅を 450 ピクセルに設定する場合:

.s7smartcropvideoviewer .s7linkdialog .s7dialoglink {
    width: 450px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8