電子メール共有

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

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

.s7ecatalogsearchviewer .s7emailshare

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

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

CSSクラスにdisplay:none 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プロパティ

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

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialog

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

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext

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

font-重み付け	フォント重み付け
font-size	フォントの高さ。
font-family	フォントファミリ。
パディング	テキストの内部のパディング。

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

.s7ecatalogsearchviewer .s7emaildialog .s7closebutton

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

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button

ボタンのCSSプロパティ

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

height	ダイアログボックスのメイン領域の高さ。 ダイアログボックスがデスクトップモードで動作する場合にのみ指定します。 ダイアログボックスがブラウザーウィンドウ全体を占めるようにサイズ設定される場合は適用されません。
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行ずつ入力されます。各行は、フォームコンテンツの一部（ラベルやテキスト入力フィールドなど）を担います。 フォームの1行は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

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

パディング

行の内側のパディング。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel

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

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

font-重み付け	ラベルのフォント重み付け
font-size	ラベルのフォントサイズ
font-family	ラベルのフォントファミリ。
color	ラベルのテキストカラー

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

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

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

width	静的ラベルの幅。
text-align	テキストの水平方向揃え。
margin	静的ラベルのマージン。
パディング	静的ラベルのパディング。

例 — 幅が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プロパティ

width

入力フィールドの幅。

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

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

width

入力フィールドの幅。

例 — 1ピクセルのグレーの境界線を持つフォームを設定し、すべての入力フィールドの周囲に9ピクセルのパディングを持つようにします。検証に失敗したフィールドと同じ境界線を赤で表示し、幅を250ピクセルにし、残りの入力フィールドの幅を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; 
}

電子メールメッセージ入力フィールドは、さらに以下を使用して制御します。

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

このクラスを使用すると、基になるTEXTAREA要素に特定のプロパティを設定できます。

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

height	メッセージの高さ。
word-wrap	折り返しのスタイル。

例 — 高さが50ピクセルで、break-wordワードラップを使用する電子メールメッセージを設定するには、次のように記述します。

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

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

height	ボタンの高さ。
color	状態ごとのボタンのテキストカラー。
background-image	状態ごとのボタン画像。
background-position	ボタン領域内のボタン画像の位置。
font-重み付け	ボタンのフォント重み付け。
font-size	ボタンのフォントサイズ
font-family	ボタンのフォントファミリ。
line-height	ボタン内のテキストの高さ。 垂直方向揃えに影響します。
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プロパティ

width	ボタンの幅。
height	ボタンの高さ。
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プロパティ

width	サムネールの幅
height	サムネールの高さ
vertical-align	垂直方向の位置を示すサムネール。
パディング	内側のパディング。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel

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

width

パネルの幅。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle

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

margin	外側のマージン。
font-重み付け	フォント重み付け
font-size	フォントサイズ
font-family	フォントファミリ。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

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

margin	外側のマージン。
font-重み付け	フォント重み付け
font-size	フォントサイズ
font-family	フォントファミリ。

例 — 10ピクセルのマージンがあるコンテンツ接触チャネルを設定するには、次のように記述します。

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

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

margin	外側のマージン。
font-重み付け	フォント重み付け
font-size	フォントサイズ
font-family	フォントファミリ。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

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

background-image	エラーアイコン 初期設定は、感嘆符です。
background-position	メッセージ領域内のエラーアイコンの位置。
color	メッセージのテキストカラー
font-重み付け	フォント重み付け
font-size	フォントサイズ
font-family	フォントファミリ。
line-height	メッセージ内のテキストの高さ。 垂直方向揃えに影響します。
パディング	内側のパディング。

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

例 — 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プロパティ

width

スクロールパネルの幅。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar

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

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

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

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

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

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb

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

width	サムの幅。
height	サムの高さ。
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プロパティ

width	ボタンの幅。
height	ボタンの高さ。
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); 
}