Visualforce 開発者ガイド
jVisualforce メールテンプレートでのカスタムスタイルシートの使用
デフォルトでは、Visualforce メールテンプレートは、他の Salesforce コンポーネントの標準のデザインを必ず使用します。ただし、自分のスタイルシートを定義してこれらのスタイルを拡張したり、上書きしたりすることができます。
他の Visualforce ページとは異なり、Visualforce メールテンプレートでは、参照されているページスタイルまたは静的リソースを使用することはできません。CSS はメールテンプレートのプレビューペインでは表示されるように見えますが、メール受信者にはプレビューペインと同じようには表示されません。<style> タグ内の CSS を使用してスタイルを定義する必要があります。
次の例では、メールのフォントを Courier に変更し、テーブルに境界線を追加し、テーブルの行の色を変更します。
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<messaging:emailTemplate recipientType="Contact"
18 relatedToType="Account"
19 subject="Case report for Account: {!relatedTo.name}"
20 replyTo="support@acme.com">
21
22 <messaging:htmlEmailBody>
23 <html>
24 <style type="text/css">
25 body {font-family: Courier; size: 12pt;}
26
27 table {
28 border-width: 5px;
29 border-spacing: 5px;
30 border-style: dashed;
31 border-color: #FF0000;
32 background-color: #FFFFFF;
33 }
34
35 td {
36 border-width: 1px;
37 padding: 4px;
38 border-style: solid;
39 border-color: #000000;
40 background-color: #FFEECC;
41 }
42
43 th {
44 color: #000000;
45 border-width: 1px ;
46 padding: 4px ;
47 border-style: solid ;
48 border-color: #000000;
49 background-color: #FFFFF0;
50 }
51 </style>
52 <body>
53 <p>Dear {!recipient.name},</p>
54 <table border="0" >
55 <tr>
56 <th>Case Number</th><th>Origin</th>
57 <th>Creator Email</th><th>Status</th>
58 </tr>
59 <apex:repeat var="cx" value="{!relatedTo.Cases}">
60 <tr>
61 <td><a href =
62 "https://na1.salesforce.com/{!cx.id}">{!cx.CaseNumber}
63 </a></td>
64 <td>{!cx.Origin}</td>
65 <td>{!cx.Contact.email}</td>
66 <td>{!cx.Status}</td>
67 </tr>
68 </apex:repeat>
69 </table>
70 </body>
71 </html>
72 </messaging:htmlEmailBody>
73</messaging:emailTemplate>
表示されている Visualforce メールテンプレートの例
カスタムコンポーネントの Visualforce スタイルシートの定義
Visualforce メールテンプレートの外部スタイルシートを参照することはできませんが、他の場所で参照できるカスタムコンポーネント内にスタイル定義を配置できます。たとえば、前の例を変更して、EmailStyle という名前のコンポーネントにスタイル情報を配置できます。
1<apex:component access="global">
2 <style type="text/css">
3 body {font-family: Courier; size: 12pt;}
4
5 table {
6 border-width: 5px;
7 border-spacing: 5px;
8 border-style: dashed;
9 border-color: #FF0000;
10 background-color: #FFFFFF;
11 }
12
13 td {
14 border-width: 1px;
15 padding: 4px;
16 border-style: solid;
17 border-color: #000000;
18 background-color: #FFEECC;
19 }
20
21 th {
22 color: #000000;
23 border-width: 1px ;
24 padding: 4px ;
25 border-style: solid ;
26 border-color: #000000;
27 background-color: #FFFFF0;
28 }
29 </style>
30</apex:component>その結果、Visualforce メールテンプレートで、そのコンポーネントのみを参照できます。
1<messaging:htmlEmailBody>
2 <html>
3 <c:EmailStyle />
4 <body>
5 <p>Dear {!recipient.name},</p>
6 ...
7 </body>
8 </html>
9</messaging:htmlEmailBody>