ドキュメントAEMDynamic Media ビューアリファレンスガイド

メール共有 email-share

最終更新日： 2025年10月14日

作成対象：

  • Developer
  • User

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

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

.s7ecatalogviewer .s7emailshare

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

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

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

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

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

ソーシャル共有パネルからボタンを削除するには、CSS クラスにdisplay:none 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-position

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogheadertext

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

フォントの重み
フォントの太さ：
フォントサイズ
フォントの高さ：
フォントファミリー
フォントファミリー：
パディング
内部テキストパディング：

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

.s7ecatalogviewer .s7emaildialog .s7closebutton

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

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

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

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

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

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

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

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

フォントの重み
ボタンのフォントの太さ：
フォントサイズ
ボタンのフォントサイズ。
フォントファミリー
ボタンフォントファミリー。
行の高さ
ボタン内のテキスト高さ。 垂直方向の整列に影響します。
ボックス シャドウ
ドロップシャドウ：
右余白
右ボタンのマージン。

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogline

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

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

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialoglabel

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

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

フォントの重み
ラベルのフォントの重さ：
フォントサイズ
ラベルのフォントサイズ：
フォントファミリー
ラベルフォントファミリー。
カラー
ラベルのテキストの色：

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

例 – すべてのラベルを9つのピクセルフォントを含むグレー、太字に設定するには：

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

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

.s7ecatalogviewer .s7emaildialog .s7dialoginputlabel

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

幅
静的ラベルの幅。
テキスト整列
横組みテキストの整列。
マージン
静的ラベルマージン：
パディング
静的なラベルのパディング：

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialoginputcontainer

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialoginputwide

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

幅
入力フィールドの幅。

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

.s7ecatalogviewer .s7emaildialog .s7dialoginputshort

ダイアログボックス入力ショートフィールドの​CSS プロパティ

幅
入力フィールドの幅。

例 – すべての入力フィールドの周囲に9 ピクセルのパディングを持つ1 ピクセルのグレーの境界線を持つフォームを設定する。 検証に失敗したフィールドの境界線を赤で表示するには、次の手順を実行します。 フィールドの幅を250 ピクセルにするには、 最後に、残りの入力フィールドは幅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-position
ボタン領域内のボタン画像の位置。
フォントの重み
ボタンのフォントの太さ：
フォントサイズ
ボタンのフォントサイズ。
フォントファミリー
ボタンフォントファミリー。
行の高さ
ボタン内のテキスト高さ。 垂直方向の整列に影響します。
テキスト整列
横組みテキストの整列：
パディング
インナーパディング：
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-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 プロパティ

幅
サムネールの幅：
の高さ
サムネールの高さ：
垂直整列
垂直方向の整列サムネール。
パディング
インナーパディング：

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

マージン
外側のマージン：
フォントの重み
フォントの太さ：
フォントサイズ
フォントサイズ：
フォントファミリー
フォントファミリー：

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

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

コンテンツのオリジンは、次のCSS クラスセレクターで制御されます。

.s7ecatalogviewer .s7emaildialog .s7dialogorigin

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

マージン
外側のマージン：
フォントの重み
フォントの太さ：
フォントサイズ
フォントサイズ：
フォントファミリー
フォントファミリー：

例 – コンテンツの原点を10 ピクセルのマージンに設定するには：

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogdescription

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

マージン
外側のマージン：
フォントの重み
フォントの太さ：
フォントサイズ
フォントサイズ：
フォントファミリー
フォントファミリー：

例 – コンテンツの説明を10 ピクセルのマージンで設定し、9 ポイントのフォントを使用するには、次の手順を実行します。

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage

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

背景画像
エラーアイコン。 デフォルトは感嘆符です。
background-position
メッセージ領域内のエラーアイコンの位置。
カラー
メッセージのテキストカラー：
フォントの重み
フォントの太さ：
フォントサイズ
フォントサイズ：
フォントファミリー
フォントファミリー：
行の高さ
メッセージ内のテキスト高さ。 垂直方向の整列に影響します。
パディング
インナーパディング：
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 プロパティ

幅
親指の幅。
の高さ
親指の高さ。
パディングトップ
トラックの上部の間の垂直方向のパディング。
パディング – 下
トラックの下部の間の垂直方向のパディング。
背景画像
特定のサムステートに対して表示される画像。
background-position

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

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

NOTE
Thumbは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-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
dynamic-media-developer-resources-help-aem-viewers-ref