リンク共有

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

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

.s7video360viewer .s7linkshare

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

width

ボタンの幅。

height

ボタンの高さ。

background-image

特定のボタン状態に対して表示される画像。

background-position

CSS スプライトを使用する場合の、アートワークスプライト内の位置。

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

メモ

このボタンでは、 state 属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。

CSS クラスで display:none 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);
}

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

.s7video360viewer .s7linkdialog .s7backoverlay

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

不透明

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

background-color

背景オーバーレイの色。

— 不透明度 70 %のグレーの背景オーバーレイを設定するには、次のように記述します。

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

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

.s7video360viewer .s7linkdialog .s7dialog

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

border-radius

ダイアログボックスの境界線の半径(ダイアログボックスがブラウザー全体に表示されない場合)。

background-color

ダイアログボックスの背景色。

width

ダイアログボックスがブラウザーウィンドウ全体に表示される場合は、設定を解除するか、100 %に設定します(タッチデバイスではこのモードをお勧めします)。

height

ダイアログボックスがブラウザーウィンドウ全体に表示される場合は、設定を解除するか、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 プロパティ

width

アイコンの幅。

height

アイコンの高さ。

background-image

アイコン画像。

background-position

CSS スプライトを使用する場合の、アートワークスプライト内の位置。

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

ヘッダーのタイトルは、以下の CSS クラスセレクターを使用して制御します。

.s7video360viewer .s7linkdialog .s7dialogheadertext

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

font-weight

フォントの太さ。

font-size

フォントの高さ

font-family

フォントファミリ。

パディング

内部テキストパディング。

閉じるボタンは、以下の CSS クラスセレクターを使用して制御します。

.s7video360viewer .s7linkdialog .s7closebutton

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

トップ

ヘッダーコンテナを基準とした垂直方向のボタン位置。

ヘッダーコンテナを基準とした水平方向のボタン位置。

width

ボタンの幅。

height

ボタンの高さ。

パディング

ボタンの内側のパディング。

background-image

各状態のボタン画像。

background-position

CSS スプライトを使用する場合の、アートワークスプライト内の位置。

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

メモ

このボタンでは、 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 プロパティ

width

ボタンの幅。

height

ボタンの高さ。

color

各状態のボタンのテキストカラー。

background-color

各状態のボタンの背景色。

メモ

「すべて選択」ボタンでは、 state 属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。

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

.s7video360viewer .s7linkdialog .s7dialogcancelbutton

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

width

ボタンの幅。

height

ボタンの高さ。

color

各状態のボタンのテキストカラー。

background-color

各状態のボタンの背景色。

メモ

このボタンでは、 state 属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。

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

.s7video360viewer .s7linkdialog .s7dialogfooter .s7button

ボタンの CSS プロパティ

font-weight

ボタンのフォントの太さ。

font-size

ボタンのフォントサイズ。

font-family

ボタンのフォントファミリ。

行の高さ

ボタン内のテキストの高さ。 垂直方向の整列に影響します。

box-shadow

ドロップシャドウ。

margin-right

ボタンの右余白。

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

- 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 プロパティ

height

ダイアログボックスのメイン領域の高さ。 この値は、ダイアログボックスがデスクトップモードで動作する場合にのみ指定する必要があります。 ダイアログボックスがブラウザーウィンドウ全体を占めるようにサイズ設定されている場合は適用されません。

background-color

ダイアログボックスのメイン領域の背景色。

margin

外側の余白。

— 高さが 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

ラベルのフォントファミリ。

color

ラベルのテキストの色。

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

— グレー、太字、9 ピクセルのフォントにすべてのラベルを設定するには、次のように記述します。

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

リンクの上部に表示されるテキストコピーのサイズは、以下の CSS クラスセレクターを使用して制御します。

.s7video360viewer .s7linkdialog .s7dialoginputwide

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

width

テキストの幅。

パディング

内側のパディング。

— 幅が 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 プロパティ

width

共有リンクの幅。

— 共有リンクの幅を 450 ピクセルに設定するには、次のように記述します。

.s7video360viewer .s7linkdialog .s7dialoglink {
    width: 450px;
}

このページ