-
5-6.HTMLメール編集（基本設定の確認）
このページでは、HTMLメール全体の横幅、背景色、フォントなどを設定します。文章や画像を配置したあとにメール全体の見た目を確認し、自社のウェブサイトやブランドに合うデザインへ整えましょう。
INDEX
基本設定を確認する
HTMLメールエディターの[設定]をクリックし基本設定を表示させます。基本設定では、個々の文章や画像ではなく、メール全体の基本設定を行えます。幅、背景色、フォントなどを変更して、自社のウェブサイトやブランドに準じたメールマガジンに仕上げることが出来ます。
1．メールの幅を変更する
「幅」では、メール本文を表示する範囲の横幅を設定します。
元の設定では、550pxから800pxまでの幅を選択でき、初期値は650pxです。
現在より大きい幅へ変更すると、すでに配置済みの画像が画像が左側に寄り、右側に不要な余白ができる場合があります。
その際は次の手順で調整します。- 対象の画像を選択します
- 拡大アイコン（）をクリックします
- 現在のメール幅に合わせて画像を調整します
メールの幅を狭くした場合
現在より小さな幅へ変更すると、メール内の画像は新しい横幅に合わせて縮小されます。
設定後は、画像や文章の位置が崩れていないか確認してください。ポイント
メールの幅を変更したあとは、PC表示とスマートフォン表示の両方をプレビューすることをおすすめします。
2．背景色を設定する
背景色
メール本文の外側に表示される色です。
主に、PCなど横幅の広い画面でメールを表示したときに見える部分です。背景色（コンテンツ）
テキストや画像などを配置する、メール本文の内側に表示される色です。
「背景色」または「コンテンツの背景色」の右側をクリックすると、カラーパレットが表示されます。
次のいずれかの方法で色を指定できます。- カラーパレットから選択する
- カラーコードを直接入力する
自社のウェブサイトやロゴに使用している色を参考にすると、ブランドイメージを統一しやすくなります。
よく使われる背景色の設定例
パターン1：外側の背景を薄い色にする
メール外側の背景を薄いグレーなどにし、コンテンツ部分を白くします。
本文の範囲が分かりやすくなり、コンテンツを目立たせられます。パターン2：背景色を同じ色で統一する
外側とコンテンツ部分を同じ色にします。
メール全体が一続きに見える、シンプルなデザインになります。初めて作成する場合は、外側を薄いグレー、コンテンツ部分を白にすると、文章や画像を見やすくまとめやすくなります。
1「背景画像」は、繰り返し画像を背景にする際に指定できます。
2「ボーダー」は、コンテンツの外側に罫線を設定できます。
3「スペース」は、コンテンツの上下にスペースを空けたい場合に値を1ピクセル単位で設定できます。
3．フォントのデフォルト設定をする
フォントの設定では、メール全体で使用する文字の種類、大きさ、色、行間を指定できます。
ここで設定した内容は、コンポーネント側で個別の文字設定を行っていない箇所に適用されます。手順1「フォント」は「明朝」か「ゴシック」のいずれかを選択できます。
※WiLL Mailの「ゴシック」は「メイリオ」です。「指定なし」や「明朝」よりも行間が空く場合がありますので、テストメール配信を行って見栄えをご確認ください。
手順2「フォントサイズ」は未選択、10px～36pxの中から選択できます。編集中のテキストのサイズもこの変更に依存します。コンポーネントで個別設定をしていないフォントが、このフォントサイズに変更されます。
手順3「フォントカラー」はカラーパレットもしくはカラーコードで指定できます。編集中のテキストカラーもこの変更に依存します。
手順4「行間」は1～2まで0.1行間単位で指定できます。デフォルトは1.2です。
ご質問はこちら
マニュアルで解決できなかったお客様は、お問い合わせフォームよりお問い合わせください。
※お問い合わせいただいたご質問内容は、担当者が確認の上、メールまたはお電話にてご返答させていただきます。ご質問内容や多数お問い合わせをいただいている場合は、返答にお時間をいただく場合がございます。
※お問い合わせいただいたご質問内容は、マニュアルコンテンツとしてWEBサイト上に掲載させていただく場合がございます。予めご了承ください。