リンク共有 link-share
リンク共有ツールは、ソーシャル共有パネルに追加されたボタンと、ツールがアクティブ化されたときに表示されるモーダルダイアログボックスで構成されます。 ボタンの位置は、ソーシャル共有ツールで完全に管理されます。
リンク共有ボタンの外観は、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7linkshare
リンク共有ツールのCSS プロパティ
state属性セレクターをサポートしています。このセレクターを使用すると、異なるスキンを異なるボタンの状態に適用できます。ソーシャル共有パネルからボタンを削除するには、CSS クラスにdisplay:none CSS プロパティを設定します。
ボタンツールのヒントはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 – 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;
}