リンク共有 link-share
リンク共有ツールは、ソーシャル共有パネルに追加されたボタンと、ツールがアクティベートされたときに表示されるモーダルダイアログボックスで構成されます。 ボタンの位置は、ソーシャル共有ツールで完全に管理されます。
リンク共有ボタンの外観は、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7linkshare
リンク共有ツールの CSS プロパティ
state 属性セレクターをサポートしています。CSS クラスに CSS プロパティを設定することで、ソーシャル共有パネルからボタン display:none 削除することができます。
ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – 28 x 28 ピクセルのリンク共有ボタンを設定し、4 つの異なるボタン状態のそれぞれに異なる画像を表示するには、次のようにします。
.s7ecatalogsearchviewer .s7linkshare {
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}
ダイアログボックスがアクティブな場合に web ページを覆う背景のオーバーレイは、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7linkdialog .s7backoverlay
背景オーバーレイの CSS プロパティ
例 – 背景オーバーレイを 70% の不透明度でグレーに設定するには：
.s7ecatalogsearchviewer .s7linkdialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
デフォルトでは、モーダルダイアログボックスはデスクトップシステムでは画面の中央に表示され、タッチデバイスでは web ページ領域全体を取ります。 どの場合でも、ダイアログボックスの位置とサイズはコンポーネントで管理されます。 このダイアログボックスは、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7linkdialog .s7dialog
ダイアログボックスの CSS プロパティ
例 – ブラウザーウィンドウ全体を使用し、タッチデバイスの背景が白くなるようにダイアログボックスを設定するには：
.s7ecatalogsearchviewer .s7touchinput .s7linkdialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
ダイアログボックスヘッダーは、アイコン、タイトルテキスト、閉じるボタンから構成されます。 ヘッダーコンテナは、
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader
ダイアログボックスヘッダーの CSS プロパティ
アイコンとタイトルテキストは、で制御される追加のコンテナにラップされます
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader .s7dialogline
ダイアログラインの CSS プロパティ
ヘッダーアイコンは、次の CSS クラスセレクターで制御します
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadericon
ダイアログボックスのヘッダーアイコンの CSS プロパティ
ヘッダーのタイトルは、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadertext
ダイアログボックスのヘッダーテキストの CSS プロパティ
「閉じる」ボタンは、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton
閉じるボタンの の CSS プロパティ
state 属性セレクターをサポートしています。閉じるボタンのツールヒントとダイアログボックスのタイトルは、ローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – パディング、22 x 12 ピクセルのアイコン、太字の 16 ポイントのタイトルを含むダイアログボックスヘッダーを設定する 最後に、ダイアログボックスのコンテナの上から 2 ピクセル、右から 2 ピクセルの位置にある 28 x 28 ピクセルの「閉じる」ボタンを選択します。
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader {
padding: 10px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadericon {
background-image: url("images/sdk/dlglink_cap.png");
height: 12px;
width: 22px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7linkdialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
ダイアログボックスのフッターは、「キャンセル」ボタンで構成されます。 フッターコンテナは、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter
ダイアログボックスのフッター の CSS プロパティ
フッターには、ボタンを保持する内部コンテナがあります。 次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7linkdialog .s7dialogbuttoncontainer
ダイアログボックスのボタンコンテナの CSS プロパティ
「すべてを選択」ボタンは、次の CSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton
ボタンは、デスクトップシステムでのみ使用できます。
「すべてを選択」ボタンの CSS プロパティ
state 属性セレクターがサポートされており、異なるボタン状態に異なるスキンを適用するために使用できます。「キャンセル」ボタンは、次の CSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton
ダイアログボックスのキャンセルボタンの CSS プロパティ
state 属性セレクターをサポートしています。さらに、両方のボタンは共通の CSS クラスを共有します。このクラスには、他のダイアログボックスのボタンと同じ CSS 設定を含めることができます。
.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter .s7button
ボタンの CSS プロパティ
ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – 64 x 34 の「キャンセル」ボタンを持つダイアログボックスのフッターを設定し、ボタンの状態ごとにテキストカラーと背景色が異なるようにするには、次の手順に従います。
.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
メインダイアログ領域には、ヘッダーとフッターの間にダイアログコンテンツが含まれています。 いずれの場合も、コンポーネントによってこの領域の幅が管理されます。CSS で設定することはできません。 メインダイアログ領域は、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7linkdialog .s7dialogviewarea
ダイアログボックスの表示エリアの CSS プロパティ
例 – メインダイアログボックス領域の高さを 300 ピクセルに設定し、余白を 10 ピクセルにして背景を白くするには：
.s7ecatalogsearchviewer .s7linkdialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
すべてのフォームコンテンツ（ラベルや入力フィールドなど）は、次の CSS クラスセレクターで制御されるコンテナ内に存在します。
.s7ecatalogsearchviewer .s7linkdialog .s7dialogbody
ダイアログボックスの本文の CSS プロパティ
例 – フォームコンテンツの 10 ピクセルのパディングを設定するには：
.s7ecatalogsearchviewer .s7linkdialog .s7dialogbody {
padding: 10px;
}
ダイアログボックスのフォームのすべての静的ラベルは、次のコントロールで制御されます
.s7ecatalogsearchviewer .s7linkdialog .s7dialoglabel
このクラスは、フォームユーザーインターフェイスの様々な場所でテキストに適用できるので、ラベルのサイズや位置の制御には適していません。
ダイアログボックスのラベルの CSS プロパティ。
ダイアログ ボックスのラベルはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – すべてのラベルを 9 ピクセルのフォントを使用してグレー、太字に設定するには：
.s7ecatalogsearchviewer .s7linkdialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
リンクの上に表示されるテキストコピーのサイズは、次の CSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputwide
ダイアログボックス入力全体フィールドの CSS プロパティ
例 – テキストコピーの幅を 430 ピクセルに設定し、下部に 10 ピクセルのパディングを含める場合：
.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
共有リンクはコンテナにラップされ、次の CSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputcontainer
ダイアログボックス入力コンテナの CSS プロパティ
例 – 埋め込みコードテキストの周囲に 1 ピクセルのグレーの境界線を設定し、9 ピクセルのパディングを持つ
.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 9px;
}
共有リンク自体は、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7linkdialog .s7dialoglink
ダイアログボックスの CSS プロパティ共有リンク
例 – 共有リンクの幅を 450 ピクセルに設定する場合：
.s7ecatalogsearchviewer .s7linkdialog .s7dialoglink {
width: 450px;
}