リンク共有 link-share

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

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

.s7video360viewer .s7linkshare

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

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

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

参照: CSS スプライト.

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

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

ボタンのツールチップはローカライズできます。 参照: ユーザーインターフェイス要素のローカリゼーション.

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

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

次の CSS クラスセレクターを使用して、アクティブなダイアログボックスが制御されている場合に web ページに適用される背景オーバーレイ。

.s7video360viewer .s7linkdialog .s7backoverlay

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

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

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

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

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

.s7video360viewer .s7linkdialog .s7dialog

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

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

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

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

ダイアログボックスヘッダーは、アイコン、タイトルテキスト、閉じるボタンで構成されます。 ヘッダーコンテナは、次の CSS クラスセレクターで制御します。

.s7video360viewer .s7linkdialog .s7dialogheader

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

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

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

.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline

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

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

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

.s7video360viewer .s7linkdialog .s7dialogheadericon

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

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

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

参照: CSS スプライト.

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

.s7video360viewer .s7linkdialog .s7dialogheadertext

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

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

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

.s7video360viewer .s7linkdialog .s7closebutton

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

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

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

参照: CSS スプライト.

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

閉じるボタンのツールヒントとダイアログボックスのタイトルは、ローカライズできます。 参照: ユーザーインターフェイス要素のローカリゼーション.

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

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

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

.s7video360viewer .s7linkdialog .s7dialogfooter

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

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

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

.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer

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

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

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

.s7video360viewer .s7linkdialog .s7dialogactionbutton

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

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

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

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

.s7video360viewer .s7linkdialog .s7dialogcancelbutton

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

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

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

.s7video360viewer .s7linkdialog .s7dialogfooter .s7button

ボタンの CSS プロパティ

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

ボタンのツールチップはローカライズできます。 参照: ユーザーインターフェイス要素のローカリゼーション.

- 64 x 34 の「キャンセル」ボタンを持つダイアログボックスのフッターを設定する場合。各ボタンの状態によって異なるテキストの色と背景の色を使用します。

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

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

.s7video360viewer .s7linkdialog .s7dialogviewarea

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

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

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

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

ラベルや入力フィールドなどのすべてのフォームコンテンツは、次の CSS クラスセレクターで制御されるコンテナ内に存在します。

.s7video360viewer .s7linkdialog .s7dialogbody

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

パディング
内側のパディング

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

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

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

.s7video360viewer .s7linkdialog .s7dialoglabel

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

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

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

ダイアログ ボックスのラベルはローカライズできます。 参照: ユーザーインターフェイス要素のローカリゼーション.

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

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

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

.s7video360viewer .s7linkdialog .s7dialoginputwide

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

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

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

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

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

.s7video360viewer .s7linkdialog .s7dialoginputcontainer

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

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

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

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

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

.s7video360viewer .s7linkdialog .s7dialoglink

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

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

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

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