メール共有 | Adobe Experience Manager

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

開発者
ユーザー

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

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

.s7ecatalogsearchviewer .s7emailshare

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

幅

ボタンの幅。

高さ

ボタンの高さ。

background-image

特定のボタン状態に対して表示される画像。

background-position

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

CSS スプライトール参照してください。

NOTE

このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

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

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

例 – 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

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

の背景色の

背景のオーバーレイカラー。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialog

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

border-radius

ダイアログボックスの境界線の半径（ダイアログボックスがブラウザーウィンドウ全体を取らない場合）

の背景色の

ダイアログボックスの背景色

幅

未設定または 100% に設定する必要があります。この場合、ダイアログはブラウザーウィンドウ全体を取り込みます（このモードはタッチデバイスで推奨されます）。

高さ

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader

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

padding

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline

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

padding

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon

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

幅

アイコンの幅。

高さ

アイコンの高さ。

background-image

アイコン画像。

background-position

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

CSS スプライトール参照してください。

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext

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

フォントの太さの

フォントの線幅。

font-size

フォントの高さ。

フォントファミリーの

フォントファミリー。

padding

内部テキストのパディング。

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

.s7ecatalogsearchviewer .s7emaildialog .s7closebutton

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

天

ヘッダーコンテナに対する垂直方向のボタンの位置。

right

ヘッダーコンテナに対する水平方向のボタンの位置。

幅

ボタンの幅

高さ

ボタンの高さ。

padding

ボタンの内側のパディング。

background-image

各状態のボタン画像。

background-position

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

CSS スプライトール参照してください。

NOTE

このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

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

例 – パディング、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 プロパティ

padding

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton

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

幅

ボタンの幅

高さ

ボタンの高さ。

color

各状態のボタンのテキストの色。

の背景色の

各状態のボタンの背景色

NOTE

このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton

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

幅

ボタンの幅

高さ

ボタンの高さ。

color

各状態のボタンのテキストの色。

の背景色の

各状態のボタンの背景色

NOTE

このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button

ボタンの CSS プロパティ

フォントの太さの

ボタンのフォントの線幅。

font-size

ボタンのフォントサイズ。

フォントファミリーの

ボタンのフォントファミリー。

line-height

ボタン内のテキストの高さ。垂直方向の位置揃えに影響します。

ボックスの影の

ドロップシャドウ。

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

高さ

メインダイアログボックス領域の高さです。このオプションは、ダイアログボックスがデスクトップモードで動作する場合にのみ指定してください。ダイアログボックスのサイズがブラウザウィンドウ全体に表示される場合は、この設定は適用されません。

の背景色の

メインのダイアログボックス領域の背景色。

margin

外側余白。

NOTE

メインダイアログボックス領域では、オプションの state 属性セレクターをサポートしています。メールフォームが送信され、ダイアログボックスに確認メッセージが表示されると、sendsuccess に設定されます。確認メッセージが小さい場合は、この属性セレクターを使用して、確認メッセージが表示されるときにダイアログボックスの高さを低くすることができます。

例 – 最初にメインダイアログボックス領域の高さを 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 プロパティ

padding

内側のパディング

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

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

padding

内側の行のパディング。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel

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

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

フォントの太さの

ラベルのフォントの線幅。

font-size

ラベルのフォントサイズ。

フォントファミリーの

ラベルのフォントファミリー。

color

ラベルのテキストの色。

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

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

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

幅

静的ラベルの幅。

text-align

テキストの水平方向の配置。

margin

ラベルの静的な余白。

padding

ラベルの静的パディング。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer

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

境界線

入力フィールドコンテナの周囲の境界線。

padding

内側のパディング

NOTE

入力フィールドコンテナは、オプションの state 属性セレクターをサポートしています。ユーザーが入力データ形式を誤り、インライン検証に失敗した場合、verifyerror に設定されます。この属性セレクターを使用すると、フォーム内の誤ったユーザー入力をハイライト表示できます。

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide

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

幅

入力フィールドの幅。

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

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

幅

入力フィールドの幅。

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

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

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

高さ

メッセージの高さ。

ワードラップ

ワードラップのスタイル。

例 – メールメッセージの高さを 50 ピクセルに設定し、ワードラッピング break-word 使用するには：

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

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

高さ

ボタンの高さ。

color

各状態のボタンのテキストの色。

background-image

各状態のボタン画像。

background-position

ボタン領域内でのボタンの画像位置。

フォントの太さの

ボタンのフォントの線幅。

font-size

ボタンのフォントサイズ。

フォントファミリーの

ボタンのフォントファミリー。

line-height

ボタン内のテキストの高さ。垂直方向の整列に影響します。

text-align

テキストの水平方向の配置。

padding

内側のパディング

NOTE

このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

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

例 – 「別のメールアドレスを追加」ボタンの高さを 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 スプライトール参照してください。

NOTE

このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

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

例 – 「削除」ボタンを 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 プロパティ

境界線

コンテナの境界線。

padding

内側のパディング

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail

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

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

幅

サムネイルの幅。

高さ

サムネイルの高さ。

垂直方向の位置揃え

垂直方向揃えサムネール。

padding

内側のパディング

例 – サムネールを 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 プロパティ

margin

外側余白。

フォントの太さの

フォントの線幅。

font-size

フォントサイズ。

フォントファミリーの

フォントファミリー。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

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

margin

外側余白。

フォントの太さの

フォントの線幅。

font-size

フォントサイズ。

フォントファミリーの

フォントファミリー。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

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

margin

外側余白。

フォントの太さの

フォントの線幅。

font-size

フォントサイズ。

フォントファミリーの

フォントファミリー。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

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

background-image

エラーアイコン。デフォルトは感嘆符です。

background-position

メッセージ領域内のエラーアイコンの位置。

color

メッセージのテキストの色。

フォントの太さの

フォントの線幅。

font-size

フォントサイズ。

フォントファミリーの

フォントファミリー。

line-height

メッセージ内のテキストの高さ。垂直方向の位置揃えに影響します。

padding

内側のパディング

NOTE

このメッセージでは、verifyerror、senderror、sendsuccess の値を持つ state 属性セレクターがサポートされています。値 verifyerror は、インライン入力検証エラーが原因でメッセージが表示されたときに設定されます。バックエンドのメールサービスがエラーを報告する際に設定される値 senderror。メールが正常に送信されたときに設定される値 sendsuccess。これにより、ダイアログボックスの状態に応じて異なるスタイルをメッセージに設定できます。

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

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

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

幅

スクロールバーの幅。

天

スクロールパネルの上部からオフセットされた垂直スクロールバー。

下

スクロールパネルの下部からオフセットされた垂直スクロールバー。

right

水平スクロールバーをスクロールパネルの右端からオフセットします。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

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

幅

トラックの幅。

の背景色の

トラックの背景色。

例 – 幅 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 スプライトール参照してください。

NOTE

Thumb は、up、down、over、disabled などの異なるサムステートに異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。

例 – 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 スプライトール参照してください。

NOTE

これらのボタンは、state 属性セレクターをサポートしています。このセレクターを使用して、ボタンの状態（up、down、over、disabled）に応じて異なるスキンを適用できます。

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

例 – 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);
}

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8

メール共有 email-share