メール共有

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

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

.s7ecatalogsearchviewer .s7emailshare

電子メール共有ツールの CSS プロパティ

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

このボタンを Social 共有パネルから削除するには、 display:none CSS プロパティを CSS クラスに設定する。

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

例 — 28 x 28 ピクセルで、ボタンの 4 つの状態ごとに異なる画像を表示する電子メール共有ボタンを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emailshare {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}

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

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialog

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

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

例 — タッチデバイスでブラウザーウィンドウ全体を使用し、背景が白いダイアログを設定するには、次のように記述します。

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

ダイアログボックスのヘッダーは、アイコン、タイトルテキストおよび「閉じる」ボタンで構成されます。 ヘッダーコンテナは、以下の CSS クラスセレクターを使用して制御します

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader

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

パディング

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

アイコンとタイトルテキストは、

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline

ダイアログの行の CSS プロパティ

パディング

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7closebutton

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

トップ	ヘッダーコンテナを基準とした垂直方向のボタン位置。
右	ヘッダーコンテナを基準とした水平方向のボタン位置。
幅	ボタンの幅。
高さ	ボタンの高さ。
パディング	ボタンの内側のパディング。
background-image	各状態のボタン画像。
background-position	CSS スプライトを使用する場合は、アートワークスプライト内に配置します。 関連トピック CSS スプライト .

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

例 — パディング、24 x 17 ピクセルのアイコン、太字の 16 ポイントのタイトルを含むダイアログヘッダーを設定するには、次のように記述します。 最後に、28 x 28 ピクセルの「閉じる」ボタンを使用して、ダイアログボックスコンテナの上から 2 ピクセル、右から 2 ピクセルの位置に配置します。

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

ダイアログフッターは、「キャンセル」ボタンと「電子メールを送信」ボタンで構成されます。 フッターコンテナは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter

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

枠線	フッターとダイアログボックスの残りの部分を視覚的に区切るために使用できる境界線。

フッターには、両方のボタンを保持する内部コンテナがあります。 これは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer

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

パディング

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton

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

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

電子メールを送信ボタンは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button

ボタンの CSS プロパティ

font-weight	ボタンのフォントの太さ。
font-size	ボタンのフォントサイズ。
font-family	ボタンのフォントファミリ。
行の高さ	ボタン内のテキストの高さ。 垂直方向の位置揃えに影響します。
box-shadow	ドロップシャドウ。
margin-right	ボタンの右余白。

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

例 — 64 x 34 の「キャンセル」ボタンと 82 x 34 の「電子メールを送信」ボタンを含むダイアログボックスフッターを設定し、ボタンの状態ごとにテキストの色と背景色が異なるようにするには、次のように記述します。

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

メインダイアログ領域（ヘッダーとフッターの間）には、スクロール可能なダイアログコンテンツと、右側のスクロールパネルが含まれています。 どのような場合でも、コンポーネントがこの領域の幅を管理するので、CSS で設定することはできません。 ダイアログのメイン領域は、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea

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

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

例 — 最初は高さが 300 ピクセル、確認メッセージが表示されたときは高さが 100 ピクセルで、マージンが 10 ピクセルで、白の背景を使用するダイアログボックスのメイン領域を設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
 height:100px;
}

すべてのフォームコンテンツ（ラベルや入力フィールドなど）は、コンテナ内に配置され、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody

このコンテナの高さがメインのダイアログボックス領域より大きい場合は、コンポーネントによって垂直スクロールが自動的に有効になります。

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

パディング

内側のパディング。

例 — 10 ピクセルのパディングを持つフォームコンテンツを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody {
    padding: 10px;
}

ダイアログボックスのフォームは 1 行ごとに入力され、各行はフォームコンテンツの一部（ラベルやテキスト入力フィールドなど）を保持します。 単一のフォーム行は、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

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

パディング

内側の行のパディング。

例 — 各行に 10 ピクセルのパディングを持つダイアログボックスフォームを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
    padding: 10px;
}

ダイアログボックスフォーム内のすべての静的ラベルは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel

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

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

font-weight	ラベルのフォントの太さ。
font-size	ラベルのフォントサイズ。
font-family	ラベルのフォントファミリ。
カラー	ラベルのテキストの色。

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

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

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

フォーム入力フィールドの左側に表示されるすべての静的ラベルは、以下を使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

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

幅	静的ラベルの幅。
text-align	テキストの水平方向揃え。
余白	静的ラベルの余白。
パディング	静的ラベルのパディング。

例 — 幅が 50 ピクセル、右揃え、パディングが 10 ピクセル、右側に 10 ピクセルのマージンがある入力フィールドラベルを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel {
    margin-right: 10px;
    padding: 10px;
    text-align: right;
    width: 50px;
}

各フォーム入力フィールドは、コンテナにまとめられます。このコンテナを使用して、入力フィールドの周囲にカスタムの境界線を設定できます。 これは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer

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

枠線	入力フィールドコンテナの周囲の境界線。
パディング	内側のパディング。

左側のラベルからダイアログボックスの本文の右端まで拡大する入力フィールド（「開始」フィールドと「メッセージ」フィールドを含む）のほとんどは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide

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

幅	入力フィールドの幅。

「宛先」フィールドは、右側に「電子メールを削除」ボタン用の領域が割り当てられるので、狭くなります。 これは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

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

幅	入力フィールドの幅。

例 — 1 ピクセルのグレーの境界線を持つフォームを設定し、すべての入力フィールドの周囲に 9 ピクセルのパディングを含めるには、次のように記述します。 検証に失敗したフィールドに対して、同じ境界線を赤で表示する。 最後に、幅が 250 ピクセルの To フィールド、残りの入力フィールドの幅が 300 ピクセルになるようにします。

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
    border: 1px solid #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort {
    width: 250px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide {
    width: 300px;
}

E メールメッセージの入力フィールドは、次のアイテムも使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

このクラスを使用すると、基になる TEXTAREA 要素。

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

高さ	メッセージの高さ。
word-wrap	ワードラッピングのスタイル。

例 — 高さが 50 ピクセルの電子メールメッセージを設定し、 break-word ワードラッピング：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage {
    height: 50px;
    word-wrap: break-word;
}

「別の電子メールアドレスを追加」ボタンを使用すると、ユーザーは電子メールフォームに複数のアドレスを追加できます。 これは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

ダイアログボックスの「電子メールアドレスを追加」ボタンの CSS プロパティ

高さ	ボタンの高さ。
カラー	各状態のボタンのテキストカラー。
background-image	各状態のボタン画像。
background-position	ボタン領域内のボタン画像の位置。
font-weight	ボタンのフォントの太さ。
font-size	ボタンのフォントサイズ。
font-family	ボタンのフォントファミリ。
行の高さ	ボタン内のテキストの高さ。 垂直方向の位置揃えに影響します。
text-align	水平方向のテキスト揃え。
パディング	内側のパディング。

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

例 — 高さが 25 ピクセルの「別の電子メールアドレスを追加」ボタンを設定するには、12 ポイントの太字フォントを右揃えで使用し、状態ごとに異なるテキスト色と画像を使用します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton {
 text-align:right;
 font-size:12pt;
 font-weight:bold;
 background-position:left center;
 line-height:25px;
 padding-left:30px;
 height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
 color:#000000;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
 color:#000000;
 text-decoration:underline;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}

「削除」ボタンを使用すると、電子メールフォームから余分なアドレスを削除できます。 これは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton

ダイアログボックスの「電子メールを削除」ボタンの CSS プロパティ

幅	ボタンの幅。
高さ	ボタンの高さ。
background-image	各状態のボタン画像。
background-position	CSS スプライトを使用する場合は、アートワークスプライト内に配置します。 関連トピック CSS スプライト .

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

例 — 25 x 25 ピクセルで、状態ごとに異なる画像を使用する「削除」ボタンを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton {
 width:25px;
 height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
 background-image:url(images/sdk/dlgremove_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
 background-image:url(images/sdk/dlgremove_up.png);
}

共有されるコンテンツは、ダイアログボックスの本文の下部に表示され、サムネール、タイトル、接触チャネル URL および説明が含まれます。 これはコンテナにまとめられます。このコンテナは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent

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

枠線	コンテナの境界線。
パディング	内側のパディング。

例 — 境界線が 1 ピクセル、パディングがない下部コンテナを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
    border: 1px dotted #A0A0A0;
    padding: 0;
}

サムネール画像は、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail

この background-image プロパティはコンポーネントロジックによって設定されます。

ダイアログボックスのサムネール画像の CSS プロパティ

幅	サムネールの幅。
高さ	サムネールの高さ
vertical-align	垂直方向揃えのサムネール。
パディング	内側のパディング。

例 — 90 x 60 ピクセルで、上揃えで 10 ピクセルのパディングを使用するサムネールを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail {
    height: 60px;
    padding: 10px;
    vertical-align: top;
    width: 90px;
}

コンテンツのタイトル、起源および説明は、コンテンツのサムネールの右側のパネルにさらにグループ化されます。 これは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel

ダイアログボックスの情報パネルの CSS プロパティ

幅

パネルの幅。

例 — 幅が 300 ピクセルのコンテンツ情報パネルを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel {
    width: 300px;
}

コンテンツのタイトルは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle

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

余白	外側の余白。
font-weight	フォントの太さ。
font-size	フォントサイズ。
font-family	フォントファミリー。

例 — 太字フォントを使用し、10 ピクセルのマージンを持つコンテンツタイトルを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle {
    font-weight: bold;
    margin: 10px;
}

コンテンツの起源は、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

ダイアログボックスのコンテンツの接触チャネルの CSS プロパティ

余白	外側の余白。
font-weight	フォントの太さ。
font-size	フォントサイズ。
font-family	フォントファミリー。

例 — 10 ピクセルのマージンを持つコンテンツのオリジンを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin {
    margin: 10px;
}

コンテンツの説明は、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

ダイアログボックスのコンテンツの説明の CSS プロパティ

余白	外側の余白。
font-weight	フォントの太さ。
font-size	フォントサイズ。
font-family	フォントファミリー。

例 — 10 ピクセルのマージンがあり、9 ポイントのフォントを使用するコンテンツの説明を設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription {
    font-size: 9pt;
    margin: 10px;
}

ユーザーが正しくない入力データを入力し、インライン検証が失敗した場合、ダイアログボックスの本文の上部にメッセージが表示されます。 このメッセージは、フォームの送信時にダイアログボックスでエラーまたは確認メッセージをレンダリングする必要がある場合にも表示されます。 これは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

ダイアログボックスのエラーメッセージの CSS プロパティ

background-image	エラーアイコン。 デフォルトは感嘆符です。
background-position	メッセージ領域内のエラーアイコンの位置。
カラー	メッセージのテキストの色。
font-weight	フォントの太さ。
font-size	フォントサイズ。
font-family	フォントファミリー。
行の高さ	メッセージ内のテキストの高さ。 垂直方向の位置揃えに影響します。
パディング	内側のパディング。

ボタンのツールチップはローカライズできます。

詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。

例 — 10 ポイントの太字フォントを使用し、行の高さが 25 ピクセル、左に 20 ピクセルのパディングを使用するメッセージを設定するには、次のように記述します。 最後に、感嘆符アイコンを使用し、エラーが発生した場合は赤いテキストを使用し、成功した場合はアイコンと緑のテキストを使用しません。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
    background-image: none;
    color: #00B200;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage {
    background-position: left center;
    font-size: 10pt;
    font-weight: bold;
    line-height: 25px;
    padding-left: 20px;
}

垂直方向のスクロールが必要な場合、スクロールバーがダイアログの右端近くのパネル内にレンダリングされます。このパネルは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel

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

幅	スクロールパネルの幅。

例 — 幅が 44 ピクセルのスクロールパネルを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel {
    width: 44px;
}

スクロールバー領域の外観は、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar

スクロールバーの CSS プロパティ

幅	スクロールバーの幅。
トップ	スクロールパネルの上部からの垂直方向のスクロールバーのオフセット。
下	スクロールパネルの下端からの垂直方向のスクロールバーのオフセット。
右	スクロールパネルの右端からの水平方向のスクロールバーのオフセット。

例 — 幅が 28 ピクセルで、スクロールパネルの上、右、下から 8 ピクセルのマージンがあるスクロールバーを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

スクロールバートラックは、上下のスクロールボタンの間の領域です。 このコンポーネントは、トラックの位置と高さを自動的に設定します。 トラックは、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

スクロールトラックの CSS プロパティ

幅	トラックの幅。
background-color	トラックの背景色。

例 — 幅が 28 ピクセルで、背景がグレーのスクロールバートラックを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

スクロールバーサムは、スクロールトラック領域内で垂直に移動します。 サムネールの垂直方向の位置は、コンポーネントのロジックによって完全に制御されますが、サムの高さはコンテンツの量に応じて動的に変化するわけではありません。 サムの高さやその他の要素は、以下の CSS クラスセレクターを使用して設定できます。

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb

スクロールバーサムの CSS プロパティ

幅	サムの幅。
高さ	サムの高さ。
padding-top	トラックの上部との間の垂直方向のパディング。
padding-bottom	トラックの下端との間の垂直方向のパディング。
background-image	サムの特定の状態に対して表示される画像。
background-position	CSS スプライトを使用する場合は、アートワークスプライト内に配置します。 関連トピック CSS スプライト .

例 — 28 x 45 ピクセルで、上と下に 10 ピクセルのマージンがあり、状態ごとに異なるアートワークを持つスクロールバーサムを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

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

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

CSS を使用してスクロールボタンを配置することはできません top, left, bottom、および right プロパティ。 代わりに、ビューアのロジックによって自動的に配置が決まります。

上下のスクロールボタンの CSS プロパティ

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

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

例 — 28 x 32 ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定するには、次のように記述します。

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}