サポートページ aero-right 基本

CSSを利用してBenchmark Emailでメール作成は可能ですか?

  通常CSSは外部ファイルとして保存されたデータを呼び起こしたり、メールのヘッダー部に記述され内部データを参照することでレイアウトを決定しています。 しかしメーラー側(Yahoo!Mail、Gmail、Hotmail等)でこの様なデータ参照が無効となっているためこの形式はHTMLメールでは利用出来ません。 メーラーにはそれぞれすでに独自のCSSが設定されており、干渉しあってうまく作動しない恐れがあるからです。 Benchmark EmailではBodyタグへ直接編集する方法ではなく、インライン形式の記述を推奨しております。 ヘッダーにCSSを記述するのではなく以下の例のように入力を行います: <div style=" font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666; background-color:#EEEEEE;">Your content here....</div> CSSをご利用の場合は、配信前に入念な確認を行なってください。フォントやサイズ、カラーの変更、通常通り反映されますが一部のタグ、Divタグやポジショニングタグといったものはほとんど機能しません。 CSS編集はもし受信に失敗しても購読者が読めるように、シンプルで単純なものにするように心がけてください。 HTMLメール配信において、ウェブページを編集するようにCSSを利用することは出来ません。 下記の注意点をご参照の上、ご利用頂くようお願いします。 CSSにおける注意点  外部参照 ( ) や内部参照は利用出来ません。(HTMLヘッダー部のStyleタグの編集も無効となります)多くのメーラーではCSSの外部参照、内部参照が非対応となりますのでご注意ください。これはCSSの編集において一番重要な点となります。  メール配信において、JavaScriptは絶対に使用しないでください。  JavaScriptを利用して配信したメールはスパム(迷惑メール)と認識されてしまいます。  タグ属性の変更 (色、幅等の変更) は行わないでください。  背景画像を設定しないでください。ほとんどのメーラーで、対応、推奨されない編集となっています。 ただし背景色の設定は可能です。(Bgcolor属性もしくはbackground-color:CSSで設定が行えます) CSSでの編集作業について  レイアウトではテーブルタグを利用してください。テーブルタグはどのメーラーでも利用が保証されています。  BenchmarkでのCSSの編集はインラインを推奨しております。 インラインの記述については以下のように行ってください: <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;">Your content here....</span>  Width、Cellpadding、Cellspacingの設定はテーブルタグもしくはテーブル内のセル毎で設定を行ってください。この設定によってテンプレートの幅が変更されます。  画像周辺にスペースを設定する場合はHspaceとVspaceタグをご利用ください。インライン形式で余白を設定するのはほとんどのメーラーで有効です。 ただしすべてのメーラーで動作が保障されているわけではないので、ご注意ください。   CSSを使わなければならない場合はインライン記述のみを利用してください。その上で編集した内容が適切に機能しているかを、大手フリーメール(Yahoo!,Gmail,Hotmailなど)のアドレスに向けてテストメールを送信し確認を行ってください。   >>「メール作成:編集操作」のまとめページに戻る  

テンプレート&メールエディタ 10月 12, 2020

基本となるHTMLコード一覧

テンプレートのコードを編集にする際に、よく見るコードを以下にまとめました。 基本設定 範囲設定・レイアウト  文字、フォントの装飾 リンク、画像挿入 配置・掛け線設定  リスト、番号振り分け  背景、色の変更 テーブル 基本設定 HTML宣言 <HTML></HTML> (ファイルの始まりと最後に挿入) ページタイトル <TITLE></TITLE> (ページタイトルとして表示されます) 文書のヘッダ情報 <HEAD></HEAD> (ページタイトルなどの、概要を入力してください) 文書本体の情報 <BODY></BODY> (ページのメイン情報となります) 範囲設定・レイアウト 見出し <H?></H?> (合計で6レベルまで設定できます) 見出し表示配置指定 <H? ALIGN=LEFT|CENTER|RIGHT></H?> ブロックとして設定 <DIV></DIV> ブロック表示配置指定 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV> インライン要素設定 <SPAN></SPAN> 引用・転載であることを明記 <BLOCKQUOTE></BLOCKQUOTE> 字下げ機能) テキストを強調 <EM></EM> (斜体として表示されます) テキストをより強調 <STRONG></STRONG> (太字として表示されます) 出典・参照先を表す <CITE></CITE> (斜体として表示されます) コードソース <CODE></CODE> (こちらで囲んだテキストがプログラムコード であることを示します) 変数、引数であることを示す <VAR></VAR> 用語を定義 <DFN></DFN> (用語が使用されていることを示します) 連絡・問い合わせ先の明記 <ADDRESS></ADDRESS> テキストを一回り大きく表示 <BIG></BIG> テキストを一回り小さく表示 <SMALL></SMALL>   文字・フォントの装飾 太字 <B></B> 斜体 <I></I> 下線 <U></U> (下線を表示させます) 打消し線 <STRIKE></STRIKE> (テキストに打消し線を表示させます) 打消し線 <S></S> (テキストに打消し線を表示させます) 下付き文字を表示 <SUB></SUB> 上付き文字を表示 <SUP></SUP> 範囲内を整形済みテキストとして表示 <PRE></PRE> (要素内に入力されたソース、テキストをそのままの形で表示します) センタリング <CENTER></CENTER> (画像、テキストを中央に表示します) フォントサイズ <FONT SIZE=?></FONT> (1~7の範囲で文字の大きさを指定します) フォントカラー <FONT COLOR="#$$$$$$"></FONT> フォント選択 <FONT FACE="***"></FONT> フォントの太さ <FONT WEIGHT=?></FONT> 画像、テキストスクロール <MARQUEE></MARQUEE>   リンク・画像挿入 リンク <A HREF="URL"></A> リンク先の表示指定 <A HREF="URL#***"></A> (移動先URL内の表示する箇所を指定します) <A HREF="#***"></A> (現在のURL内の表示する箇所を指定します) フレーム名指定 <A HREF="URL" TARGET="***"></A> (表示するURLを表示するフレーム・ウィンドウを指定します) 宛先を指定してメールを起動 <A HREF="mailto:@"></A> 宛先、件名、内容を指定してメールを起動 <A HREF="mailto:@?SUBJECT=***"></A> ページ内の名前を設定 <A NAME="***"></A> 画像表示 <IMG SRC="URL"> 配置指定 <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT> <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM> 画像代替表示 <IMG SRC="URL" ALT="***"> (画像が表示されないユーザーのために代替テキストを挿入します) 表示サイズ指定 <IMG SRC="URL" WIDTH=? HEIGHT=?> (数値はpxで指定) <IMG SRC="URL" WIDTH=% HEIGHT=%> (数値は%で指定) 画像のボーダー設定 <IMG SRC="URL" BORDER=?> (数値はpxで指定) 画像のスペース設定 <IMG SRC="URL" HSPACE=? VSPACE=?> (数値はpxで指定) イメージマップ <IMG SRC="URL" USEMAP="URL"> マップの名前 <MAP NAME="***"></MAP> (マップを指定) 領域、選択範囲を指定 <AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY" COORDS=",,," HREF="URL"|NOHREF>   配置・罫線設定 パラグラフ <P></P> (クロージングタグは必要でない場合もあります) テキスト配置 <P ALIGN=LEFT|CENTER|RIGHT></P> 両端揃え <P ALIGN=JUSTIFY></P> 改行 <BR> (一段落、改行します) テキストの回り込みを解除 <BR CLEAR=LEFT|RIGHT|ALL> 罫線 <HR> 罫線配置 <HR ALIGN=LEFT|RIGHT|CENTER> 罫線の太さ <HR SIZE=?> (数値はpxで指定) 罫線の長さ <HR WIDTH=?> (数値はpxで指定) <HR WIDTH="%"> (数値は%で指定)   リスト 箇条書きリスト <UL><LI></UL> (リスト要素を囲んでください) リストを狭い範囲で展開 <UL COMPACT></UL> 文頭マーカー指定 <UL TYPE=DISC|CIRCLE|SQUARE> (リスト内すべてに反映されます) <LI TYPE=DISC|CIRCLE|SQUARE> (これ以下の改装に反映されます) 番号順リスト <OL><LI></OL> (リスト要素を囲んでください) 文頭マーカー指定 <OL TYPE=A|a|I|i|1> (リスト内すべてに反映されます) <LI TYPE=A|a|I|i|1> (これ以下の改装に反映されます) マーカーの開始数値指定 <OL START=?> (リスト内すべてに反映されます) <LI VALUE=?> (これ以下の改装に反映されます) 定義型リスト <DL><DT><DD></DL> <DT>=用語, <DD>=説明・定義   背景・色の指定 背景画像の指定 <BODY BACKGROUND="URL"> 背景色の指定 <BODY BGCOLOR="#$$$$$$"> (red/green/blueであれば名前で指定できます) テキストのカラー指定 <BODY TEXT="#$$$$$$"> リンク訪問前のカラー指定 <BODY LINK="#$$$$$$"> リンク訪問後のカラー指定 <BODY VLINK="#$$$$$$""> リンク選択中のカラー指定 <BODY ALINK="#$$$$$$"> (クリック中のテキストのカラーを設定できます)   表(テーブル) 表(テーブル) <TABLE></TABLE> 表の配置 <TABLE ALIGN=LEFT|RIGHT|CENTER> 表の枠にボーダーの挿入 <TABLE BORDER></TABLE> (この要素を入力すると、線が挿入されますが数値は指定できません) ボーダーの値を指定 <TABLE BORDER=?></TABLE> (ボーダーの太さを指定できます) セル同士の間隔を指定 <TABLE CELLSPACING=?> 表の掛け線とセルの間隔を指定 <TABLE CELLPADDING=?> 表の横幅の指定 <TABLE WIDTH=?> (値はpxで指定してください) <TABLE WIDTH=%> (値は%で指定してください) 表の色指定 <TABLE BGCOLOR="$$$$$$"></TABLE> 表の行指定 <TR></TR> 行の配置 <TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM> セル指定 <TD></TD> (指定するセルの番号を入力する必要があります) セルの配置 <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> 改行を抑制 <TD NOWRAP> セル同士を横に連結 <TD COLSPAN=?> セル同士を縦に連結 <TD ROWSPAN=?> セルの横幅の指定 <TD WIDTH=?> (値はpxで指定してください) <TD WIDTH="%"> (値は%で指定してください) セルの色指定 <TD BGCOLOR="#$$$$$$"> 見出しとなるセル <TH></TH> 見出しの配置 <TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM> 改行を抑制 <TH NOWRAP> 見出しと他のセルを横に連結 <TH COLSPAN=?> 見出しと他のセルを縦に連結 <TH

テンプレート&メールエディタ 9月 27, 2019