リンク共有 | Adobe Experience Manager

最終更新日： 2024年7月22日

トピック：

作成対象：

開発者
ユーザー

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

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

.s7ecatalogviewer .s7linkshare

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

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

NOTE

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

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

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

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

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

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

.s7ecatalogviewer .s7linkdialog .s7backoverlay

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

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

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

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

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

.s7ecatalogviewer .s7linkdialog .s7dialog

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

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

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

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

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

.s7ecatalogviewer .s7linkdialog .s7dialogheader

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

padding

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

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

.s7ecatalogviewer .s7linkdialog .s7dialogheader .s7dialogline

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

padding

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

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

.s7ecatalogviewer .s7linkdialog .s7dialogheadericon

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

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

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

.s7ecatalogviewer .s7linkdialog .s7dialogheadertext

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

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

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

.s7ecatalogviewer .s7linkdialog .s7closebutton

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

天	ヘッダーコンテナに対する垂直方向のボタンの位置。
right	ヘッダーコンテナに対する水平方向のボタンの位置。
幅	ボタンの幅
高さ	ボタンの高さ。
padding	ボタンの内側のパディング。
background-image	各状態のボタン画像。
background-position	CSS スプライトを使用する場合、アートワークスプライト内に配置します。 CSS スプライトール参照してください。

NOTE

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

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

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

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

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

.s7ecatalogviewer .s7linkdialog .s7dialogfooter

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

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

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

.s7ecatalogviewer .s7linkdialog .s7dialogbuttoncontainer

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

padding

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

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

.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton

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

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

幅

ボタンの幅

高さ

ボタンの高さ。

color

各状態のボタンのテキストの色。

の背景色の

各状態のボタンの背景色

NOTE

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

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

.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton

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

幅

ボタンの幅

高さ

ボタンの高さ。

color

各状態のボタンのテキストの色。

の背景色の

各状態のボタンの背景色

NOTE

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

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

.s7ecatalogviewer .s7linkdialog .s7dialogfooter .s7button

ボタンの CSS プロパティ

フォントの太さの

ボタンのフォントの線幅。

font-size

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

フォントファミリーの

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

line-height

ボタン内のテキストの高さ。垂直方向の位置揃えに影響します。

ボックスの影の

ドロップシャドウ。

margin-right

ボタンの右の余白。

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

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

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

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

.s7ecatalogviewer .s7linkdialog .s7dialogviewarea

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

高さ

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

の背景色の

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

margin

外側余白。

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

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

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

.s7ecatalogviewer .s7linkdialog .s7dialogbody

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

padding

内側のパディング

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

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

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

.s7ecatalogviewer .s7linkdialog .s7dialoglabel

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

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

フォントの太さの

ラベルのフォントの線幅。

font-size

ラベルのフォントサイズ。

フォントファミリーの

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

color

ラベルのテキストの色。

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

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

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

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

.s7ecatalogviewer .s7linkdialog .s7dialoginputwide

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

幅

テキストの幅。

padding

内側のパディング

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

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

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

.s7ecatalogviewer .s7linkdialog .s7dialoginputcontainer

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

境界線

リンクを共有コンテナを囲むボーダー。

padding

内側のパディング

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

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

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

.s7ecatalogviewer .s7linkdialog .s7dialoglink

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

幅

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

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

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

recommendation-more-help