電子メール共有

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

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

.s7ecatalogviewer .s7emailshare

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

width

ボタンの幅。

height

ボタンの高さ。

background-image

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

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

メモ

このボタンでは、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プロパティ

opacity

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

background-color

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

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialog

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

border-radius

ダイアログボックスの境界線の半径(ダイアログボックスがブラウザーウィンドウ全体に表示されない場合)

background-color

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

width

ダイアログがブラウザーウィンドウ全体に表示される場合は、設定しないか、100 %に設定する必要があります(タッチデバイスではこのモードを推奨)。

height

ダイアログがブラウザーウィンドウ全体に表示される場合は、設定しないか、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プロパティ

width

アイコンの幅。

height

アイコンの高さ。

background-image

アイコン画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogheadertext

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

font-重み付け

フォント重み付け

font-size

フォントの高さ。

font-family

フォントファミリ。

パディング

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

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

.s7ecatalogviewer .s7emaildialog .s7closebutton

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

トップ

ヘッダーのコンテナを基準とした垂直方向のボタン位置。

ヘッダーのコンテナを基準とした水平方向のボタン位置。

width

ボタンの幅。

height

ボタンの高さ。

パディング

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

background-image

状態ごとのボタン画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

メモ

このボタンでは、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プロパティ

width

ボタンの幅。

height

ボタンの高さ。

color

状態ごとのボタンのテキストカラー。

background-color

状態ごとのボタンの背景色。

メモ

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogactionbutton

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

width

ボタンの幅。

height

ボタンの高さ。

color

状態ごとのボタンのテキストカラー。

background-color

状態ごとのボタンの背景色。

メモ

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogfooter .s7button

ボタンのCSSプロパティ

font-重み付け

ボタンのフォント重み付け。

font-size

ボタンのフォントサイズ

font-family

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

line-height

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

box-shadow

ドロップシャドウ。

margin-right

ボタンの右マージン。

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

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

height

ダイアログボックスのメイン領域の高さ。 ダイアログボックスがデスクトップモードで動作する場合にのみ指定します。 ダイアログボックスがブラウザーウィンドウ全体を占めるようにサイズ設定される場合は適用されません。

background-color

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

margin

外側のマージン。

メモ

ダイアログボックスのメイン領域では、オプションの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行ずつ入力されます。各行は、フォームコンテンツの一部(ラベルやテキスト入力フィールドなど)を担います。 フォームの1行は、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7emaildialog .s7dialogbody .s7dialogline

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

パディング

行の内側のパディング。

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialoglabel

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

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

font-重み付け

ラベルのフォント重み付け

font-size

ラベルのフォントサイズ

font-family

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

color

ラベルのテキストカラー

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

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialoginputlabel

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

width

静的ラベルの幅。

text-align

テキストの水平方向揃え。

margin

静的ラベルのマージン。

パディング

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

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialoginputcontainer

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

枠線

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

パディング

内側のパディング。

メモ

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

左側のラベルからダイアログボックスの本体(「送信者」フィールドと「メッセージ」フィールドを含む)の右端にまで及ぶ入力フィールドのほとんどは、以下のCSSクラスセレクターを使用して制御します。

.s7ecatalogviewer .s7emaildialog .s7dialoginputwide

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

width

入力フィールドの幅。

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

.s7ecatalogviewer .s7emaildialog .s7dialoginputshort

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

width

入力フィールドの幅。

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

height

メッセージの高さ。

word-wrap

折り返しのスタイル。

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogaddemailbutton

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

height

ボタンの高さ。

color

状態ごとのボタンのテキストカラー。

background-image

状態ごとのボタン画像。

background-position

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

font-重み付け

ボタンのフォント重み付け。

font-size

ボタンのフォントサイズ

font-family

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

line-height

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

text-align

テキストの水平方向揃え。

パディング

内側のパディング。

メモ

このボタンでは、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プロパティ

width

ボタンの幅。

height

ボタンの高さ。

background-image

状態ごとのボタン画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

メモ

このボタンでは、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プロパティ

width

サムネールの幅

height

サムネールの高さ

vertical-align

垂直方向の位置を示すサムネール。

パディング

内側のパディング。

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialoginfopanel

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

width

パネルの幅。

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogtitle

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

margin

外側のマージン。

font-重み付け

フォント重み付け

font-size

フォントサイズ

font-family

フォントファミリ。

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogorigin

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

margin

外側のマージン。

font-重み付け

フォント重み付け

font-size

フォントサイズ

font-family

フォントファミリ。

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogdescription

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

margin

外側のマージン。

font-重み付け

フォント重み付け

font-size

フォントサイズ

font-family

フォントファミリ。

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

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

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

.s7ecatalogviewer .s7emaildialog .s7dialogerrormessage

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

background-image

エラーアイコン 初期設定は、感嘆符です。

background-position

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

color

メッセージのテキストカラー

font-重み付け

フォント重み付け

font-size

フォントサイズ

font-family

フォントファミリ。

line-height

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

パディング

内側のパディング。

メモ

このメッセージでは、state属性セレクターがサポートされ、次の値を指定できます。verifyerrorsenderror、およびsendsuccessverifyerror は、インライン入力の検証エラーが原因でメッセージが表示された場合に設定されます。 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プロパティ

width

スクロールパネルの幅。

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

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

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

.s7ecatalogviewer .s7emaildialog .s7scrollbar

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

width

スクロールバーの幅。

トップ

スクロールパネルの上端からのスクロールバーの垂直方向のオフセット。

スクロールパネルの下端からのスクロールバーの垂直方向のオフセット。

スクロールパネルの右端からのスクロールバーの水平方向のオフセット。

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

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

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

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrolltrack

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

width

トラックの幅。

background-color

トラックの背景色。

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

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

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

.s7ecatalogviewer .s7emaildialog .s7scrollbar .s7scrollthumb

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

width

サムの幅。

height

サムの高さ。

padding-top

トラックの上端との間の垂直方向のパディング。

padding-bottom

トラックの下端との間の垂直方向のパディング。

background-image

サムの特定の状態に対して表示する画像。

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

メモ

サムでは、state属性セレクターがサポートされます。このセレクターは、サムの状態ごとに異なるスキンを適用するのに使用できます。updownover、および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 topleftbottomおよびrightプロパティを使用してスクロールボタンを配置することはできません。 ビューアのロジックによって自動的に配置が決まります。

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

width

ボタンの幅。

height

ボタンの高さ。

background-image

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

background-position

CSSスプライトを使用する場合、アートワークスプライト内の位置。

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

メモ

次のボタンでは、state属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。updownover、および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); 
}

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now