メール共有 email-share

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

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

.s7ecatalogviewer .s7emailshare

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

ボタンの幅。
高さ
ボタンの高さ。
background-image
特定のボタン状態に対して表示される画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

関連トピック CSS スプライト.

NOTE
このボタンは、 state 属性セレクター。異なるボタンの状態に異なるスキンを適用するために使用できます。

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

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

例 – 28 x 28 ピクセルのメール共有ボタンを設定し、4 つの異なるボタン状態のそれぞれに異なる画像を表示する場合

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

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

.s7ecatalogviewer .s7emaildialog .s7backoverlay

バックオーバーレイの CSS プロパティ

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

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialog

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

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

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogheader

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogheader .s7dialogline

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogheadericon

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

アイコンの幅。
高さ
アイコンの高さ。
background-image
アイコン画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

関連トピック CSS スプライト.

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

.s7ecatalogviewer .s7emaildialog .s7dialogheadertext

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

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

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

.s7ecatalogviewer .s7emaildialog .s7closebutton

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

上位
ヘッダーコンテナに対する垂直方向のボタンの位置。
ヘッダーコンテナに対する水平方向のボタンの位置。
ボタンの幅
高さ
ボタンの高さ。
パディング
ボタンの内側のパディング。
background-image
各状態のボタン画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

関連トピック CSS スプライト.

NOTE
このボタンは、 state 属性セレクター。異なるボタンの状態に異なるスキンを適用するために使用できます。

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

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogfooter

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogbuttoncontainer

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogcancelbutton

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

ボタンの幅
高さ
ボタンの高さ。
各状態のボタンのテキストの色。
背景色
各状態のボタンの背景色
NOTE
このボタンは、 state 属性セレクター。異なるボタンの状態に異なるスキンを適用するために使用できます。

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

.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton

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

ボタンの幅
高さ
ボタンの高さ。
各状態のボタンのテキストの色。
背景色
各状態のボタンの背景色
NOTE
このボタンは、 state 属性セレクター。異なるボタンの状態に異なるスキンを適用するために使用できます。

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

.s7ecatalogviewer .s7emaildialog .s7dialogfooter .s7button

ボタンの CSS プロパティ

font-weight
ボタンのフォントの線幅。
font-size
ボタンのフォントサイズ。
font-family
ボタンのフォントファミリー。
line-height
ボタン内のテキストの高さ。 垂直方向の位置揃えに影響します。
ボックス影
ドロップシャドウ。
マージン (右)
ボタンの右の余白。

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

例 – 64 x 34 の「キャンセル」ボタンと 82 x 34 の「メールを送信」ボタンを使用してダイアログボックスのフッターを設定する テキストの色と背景色は、ボタンの状態ごとに異なります。

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogviewarea

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

高さ
メイン ダイアログ ボックス領域の高さです。 このオプションは、ダイアログボックスがデスクトップモードで動作する場合にのみ指定してください。 ダイアログ ボックスのサイズがブラウザ ウィンドウ全体に表示される場合は、この設定は適用されません。
背景色
メインのダイアログボックス領域の背景色。
余白
外側余白。
NOTE
メインダイアログボックス領域は、オプションのをサポートしています state 属性セレクター。 設定済み sendsuccess メールフォームが送信され、ダイアログボックスに確認メッセージが表示される場合。 確認メッセージが小さい場合は、この属性セレクターを使用して、確認メッセージが表示されるときにダイアログボックスの高さを低くすることができます。

例 – 最初にメインダイアログボックス領域の高さを 300 ピクセル、確認メッセージが表示されたときに高さを 100 ピクセルに設定し、余白が 10 ピクセルにして背景が白くするには:

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogbody

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

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

パディング
内側のパディング

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

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

ダイアログボックスのフォームは、1 行ごとに入力されます。各行には、フォームコンテンツの一部(ラベルやテキスト入力フィールドなど)が含まれます。 単一のフォーム行は、次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogline

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

パディング
内側の行のパディング。

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

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

ダイアログボックスのフォーム内のすべての静的ラベルは、次の CSS クラスセレクターで制御されます。

.s7ecatalogviewer .s7emaildialog .s7dialoglabel

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

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

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

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

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

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

フォーム入力フィールドの左側に表示されるすべての静的ラベルは、次のように制御されます。

.s7ecatalogviewer .s7emaildialog .s7dialoginputlabel

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

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

例 – 入力フィールドラベルの幅を 50 ピクセル、右揃え、10 ピクセルのパディングを持ち、右側に 10 ピクセルの余白を持つように設定するには:

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

各フォーム入力フィールドは、入力フィールドの周囲にカスタムの境界線を適用できるコンテナにラップされます。 次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7emaildialog .s7dialoginputcontainer

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

境界線
入力フィールドコンテナの周囲の境界線。
パディング
内側のパディング
NOTE
オプションの入力フィールドコンテナ state 属性セレクター。 設定済み verifyerror ユーザーが入力データ形式を間違え、インライン検証が失敗した場合。 この属性セレクターを使用すると、フォーム内の誤ったユーザー入力をハイライト表示できます。

ダイアログボックスの本文の左側のラベルから右端に広がるほとんどの入力フィールド(「送信元」フィールドと「メッセージ」フィールドを含む)は、次の CSS クラスセレクターで制御されます。

.s7ecatalogviewer .s7emaildialog .s7dialoginputwide

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

入力フィールドの幅。

「宛先」フィールドは、右側の「メールを削除」ボタン用のスペースを割り当てるので、狭くなっています。 次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7emaildialog .s7dialoginputshort

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

入力フィールドの幅。

例 – すべての入力フィールドの周囲に 9 ピクセルのパディングを行う 1 ピクセルグレーの境界線を持つフォームを設定する 検証に失敗したフィールドに同じボーダーを赤で表示すること。 幅 250 ピクセルの To フィールドを持つ。 最後に、残りの入力フィールドは 300 ピクセル幅です。

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

メールメッセージの入力フィールドも、次のように制御されます。

.s7ecatalogviewer .s7emaildialog .s7dialogmessage

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

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

高さ
メッセージの高さ。
ワードラップ
ワードラップのスタイル。

例 – メールメッセージの高さを 50 ピクセルに設定し、を使用するには break-word 折り返し:

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton

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

高さ
ボタンの高さ。
各状態のボタンのテキストの色。
background-image
各状態のボタン画像。
background-position
ボタン領域内でのボタンの画像位置。
font-weight
ボタンのフォントの線幅。
font-size
ボタンのフォントサイズ。
font-family
ボタンのフォントファミリー。
line-height
ボタン内のテキストの高さ。 垂直方向の整列に影響します。
text-align
テキストの水平方向の配置。
パディング
内側のパディング
NOTE
このボタンは、 state 属性セレクター。異なるボタンの状態に異なるスキンを適用するために使用できます。

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

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

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

「削除」ボタンを使用すると、ユーザーがメールフォームから追加のアドレスを削除できます。 次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7emaildialog .s7dialogremoveemailbutton

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

ボタンの幅
高さ
ボタンの高さ。
background-image
各状態のボタン画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

関連トピック CSS スプライト.

NOTE
このボタンは、 state 属性セレクター。異なるボタンの状態に異なるスキンを適用するために使用できます。

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

例 – 「削除」ボタンを 25 x 25 ピクセルに設定し、状態ごとに異なる画像を使用するには:

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

共有されるコンテンツは、ダイアログボックスの本文の下部に表示され、サムネール、タイトル、接触チャネル URL、説明が含まれます。 次の CSS クラスセレクターで制御されるコンテナにラップされます。

.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogcontent

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

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

例 – 下のコンテナを 1 ピクセルの点線の境界線を持ち、パディングを含まないように設定するには:

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

サムネール画像は、次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7emaildialog .s7dialogthumbnail

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

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

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

例 – サムネールを 90 x 60 ピクセルに設定し、10 ピクセルのパディングで上揃えにする

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

コンテンツのタイトル、接触チャネル、説明は、さらにコンテンツサムネールの右側のパネルにグループ化されます。 次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7emaildialog .s7dialoginfopanel

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

パネル幅。

例 – コンテンツ情報パネルの幅を 300 ピクセルに設定するには:

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

コンテンツのタイトルは、次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7emaildialog .s7dialogtitle

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

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

例 – コンテンツタイトルで太字フォントを使用し、10 ピクセルの余白を設定するには:

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

コンテンツの接触チャネルは、次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7emaildialog .s7dialogorigin

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

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

例 – コンテンツオリジンに 10 ピクセルの余白を設定するには:

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

コンテンツの説明は、次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7emaildialog .s7dialogdescription

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

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

例 – 10 ピクセルの余白を持ち、9 ポイントのフォントを使用するコンテンツの説明を設定するには:

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage

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

background-image
エラーアイコン。 デフォルトは感嘆符です。
background-position
メッセージ領域内のエラーアイコンの位置。
メッセージのテキストの色。
font-weight
フォントの線幅。
font-size
フォントサイズ。
font-family
フォントファミリー。
line-height
メッセージ内のテキストの高さ。 垂直方向の位置揃えに影響します。
パディング
内側のパディング
NOTE
このメッセージは、 state 次の値を持つ属性セレクター: verifyerror, senderror、および sendsuccess. 値 verifyerror インライン入力検証エラーが原因でメッセージが表示されたときに設定されます。 値 senderror バックエンドのメールサービスがエラーを報告すると、が設定されます。 値 sendsuccess は、メールが正常に送信されたときに設定されます。 これにより、ダイアログボックスの状態に応じて異なるスタイルをメッセージに設定できます。

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

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogscrollpanel

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

パネル幅をスクロールします。

例 – スクロールパネルの幅を 44 ピクセルに設定するには:

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

スクロールバー領域の外観は、次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7emaildialog .s7scrollbar

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

スクロールバーの幅。
上位
スクロールパネルの上部からオフセットされた垂直スクロールバー。
スクロールパネルの下部からオフセットされた垂直スクロールバー。
水平スクロールバーをスクロールパネルの右端からオフセットします。

例 – 幅 28 ピクセル、スクロールパネルの上部、右側、下部から 8 ピクセルの余白にあるスクロールバーを設定するには、次のようにします。

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

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

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolltrack

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

トラックの幅。
背景色
トラックの背景色。

例 – 幅 28 ピクセルで背景がグレーのスクロールバーのトラックを設定するには:

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

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

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb

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

親指の幅。
高さ
親指の高さ。
padding-top
トラックの上部の間の垂直方向のパディング。
padding-bottom
トラックの下部の間の垂直方向のパディング。
background-image
特定のサムネール状態に対して表示される画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

関連トピック CSS スプライト.

NOTE
親指はをサポート state 属性セレクター。様々なスキンを様々なサムステートに適用するために使用できます。 up, down, over、および disabled.

例 – 28 x 45 ピクセルのスクロールバーの親指を設定し、上部と下部に 10 ピクセルのマージンがあり、状態ごとに異なるアートワークを持つ場合:

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

上部と下部のスクロールボタンの外観は、次の CSS クラスセレクターで制御します。

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

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

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

ボタンの幅。
高さ
ボタンの高さ。
background-image
特定のボタン状態に対して表示される画像。
background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

関連トピック CSS スプライト.

NOTE
これらのボタンは、 state ボタンの状態に応じて異なるスキンを適用するために使用できる属性セレクター: up, down, over、および disabled.

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

例 – 28 x 32 ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定するには:

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8