リンク共有 | Adobe Experience Manager

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

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

.s7videoviewer .s7linkshare

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

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

メモ

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

このボタンを Social 共有パネルから削除するには、 display:none CSS プロパティを 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 プロパティ

不透明度	背景オーバーレイの不透明度。
background-color	背景オーバーレイの色。

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

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

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

.s7videoviewer .s7linkdialog .s7dialog

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

border-radius	ダイアログボックスの境界線の半径（ダイアログボックスがブラウザ全体に表示されない場合）。
background-color	ダイアログボックスの背景色。
幅	ダイアログボックスがブラウザーウィンドウ全体に表示される場合は、未設定にするか、100%に設定する必要があります（このモードはタッチデバイスで推奨されます）。
高さ	ダイアログボックスがブラウザーウィンドウ全体に表示される場合は、未設定にするか、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 プロパティ

幅	アイコンの幅。
高さ	アイコンの高さ。
background-image	アイコン画像。
background-position	CSS スプライトを使用する場合は、アートワークスプライト内に配置します。詳しくは、 CSS スプライト .

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

.s7videoviewer .s7linkdialog .s7dialogheadertext

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

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

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

.s7videoviewer .s7linkdialog .s7closebutton

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

トップ	ヘッダーコンテナを基準とした垂直方向のボタン位置。
右	ヘッダーコンテナを基準とした水平方向のボタン位置。
幅	ボタンの幅。
高さ	ボタンの高さ。
パディング	ボタンの内側のパディング。
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 プロパティ

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

メモ

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

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

.s7videoviewer .s7linkdialog .s7dialogcancelbutton

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

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

メモ

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

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

.s7videoviewer .s7linkdialog .s7dialogfooter .s7button

ボタンの CSS プロパティ

font-weight	ボタンのフォントの太さ。
font-size	ボタンのフォントサイズ。
font-family	ボタンのフォントファミリ。
行の高さ	ボタン内のテキストの高さ。垂直方向の位置揃えに影響します。
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 プロパティ

高さ	ダイアログボックスのメイン領域の高さです。この値は、ダイアログボックスがデスクトップモードで動作する場合にのみ指定する必要があります。ダイアログボックスのサイズがブラウザーウィンドウ全体を占めるように設定されている場合は、この機能は適用されません。
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-weight	ラベルのフォントの太さ。
font-size	ラベルのフォントサイズ。
font-family	ラベルのフォントファミリ。
カラー	ラベルのテキストの色。

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

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

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

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

.s7videoviewer .s7linkdialog .s7dialoginputwide

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

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

例 — 幅が 430 ピクセルで、下部に 10 ピクセルのパディングがあるテキストコピーを設定するには、次のように記述します。

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

共有リンクはコンテナにラップされ、以下の CSS クラスセレクターを使用して制御します。

.s7videoviewer .s7linkdialog .s7dialoginputcontainer

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

枠線	共有リンクコンテナの周囲の境界線。
パディング	内側のパディング。

例 — 埋め込みコードテキストの周囲に 1 ピクセルのグレーの境界線を設定し、9 ピクセルのパディングを持つには、次のように記述します。

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

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

.s7videoviewer .s7linkdialog .s7dialoglink

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

幅

共有リンクの幅。

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

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

Business.Adobe.com リソース

Multichannel Communication Responsive Forms Managed Cloud Version History Web Content Management Digital Asset Management

向上した新しい検索

Business.Adobe.com リソース

このページ

次を表示：

学習

ドキュメント

コミュニティー

サポート

リソース

アドビアカウント

Adobe