Mail-High(メルハイ)でHTMLメールを制作する際の基本操作をご紹介します

Mail-High(メルハイ)では、HTMLメール及びマルチパートメールの配信機能をご提供しております。

メルハイで配信するメール本文の、文字サイズや文字色を変えるには、『HTMLメール』を作成していただく必要があります。残念ながら、文字のタイピングだけで作成できる、テキストメールでは、文字サイズやカラーの変更をすることはできません。

その『HTMLメール』を制作いただくには、ホームページを構成する言語である、HTML(エイチ・ティー・エム・エル)の知識が少なからず必要となります。

ここでは、メルハイで簡単なHTMLメールを作成するために必要な基本的な操作方法をご紹介してまいります。

ご注意事項

本サイトでご説明する、HTMLメールの制作方法については、メルハイサービスを利用する場合にご利用いただける操作方法となります。メルハイ以外のサービスにおけるHTMLメールの作成とは異なる場合もございますのでご了承下さい。

本サイトでご案内するHTMLタグについて

本サイト(Mail-High Tips BLOG)内でご案内するHTMLタグにつきましては、お客様の利便性、HTMLメール制作という受信者側の環境に表示形式が大きく影響される特殊性を考慮して、一部非推奨となっている記述方式もご紹介しておりますことを、ご了承下さい。

HTMLメール制作に必ず必要な記述

Mail-High(メルハイ)でのHTML制作には、必ず必要な記述があります。

それは、<html> と </html> というタグです。HTMLメール本文入力欄には、必ず一番最初に <html> と記述してください。そして一番最後に、必ず </html> と記述してください。

HTMLメールの作成にはHTMLタグの記述が必須となります

従って、HTMLメールの本文は、<html>  〜 </html> の記述の間に全て記述されることになります。

HTMLメールの作成における改行

Mail-High(メルハイ)でのHTML制作において、通常の改行(Enterキーでの改行挿入)は、改行として認識されません。

文章を改行する際には、 <br> という記述を行う必要があります。

<br><br> というように続けて入力することで、1行あけての改行を行うことが可能です。

文字のサイズを変更する

Mail-High(メルハイ)でのHTMLメール制作において、文字サイズを変更する場合には、以下のように記述する必要があります。

(1)文字サイズを大きくする場合→<font size="120%">大きくする文字</font> 

(2)文字サイズを小さくする場合→<font size="80%">小さくする文字</font>

または、以下のような記述でも文字サイズの変更が可能です。

(3)文字サイズを大きくする場合→<span style="font-size=120%">大きくする文字</span> 

(4)文字サイズを小さくする場合→<span style="font-size=80%">小さくする文字</span>

実際に入力してみると、以下のように表示されます。

●HTMLメール本文欄への入力内容
標準の文字サイズ<span style="font-size=130%">大きい文字サイズ</span>標準の文字サイズ 

●HTMLメール上での表示内容
標準の文字サイズ大きい文字サイズ標準の文字サイズ  

文字の色(カラー)を変える

Mail-High(メルハイ)でのHTMLメール制作において、文字の色(カラー)を変更する場合には、以下のように記述する必要があります。

(1)赤い文字にする→<font color="red">赤い文字</font>

(2)青い文字にする→<font color="blue">青い文字</font>

または、以下のような記述も可能です。

(3)赤い文字にする→<span style="color:red">赤い文字</span>

(4)青い文字にする→<span style="color:blue">青い文字</span>

実際に入力してみると、以下のように表示されます。

●HTMLメール本文入力欄への記述
文字色設定なし<span style="color:red">赤い文字</span>文字色設定なし<span style="color:blue">青い文字</span>

●HTMLメール上での表示内容
文字色設定なし赤い文字文字色設定なし青い文字

上記の他にも、"black","white","yellow","green","pink","orange","gold"他、多数の色指定が可能です。色設定に関する詳細は、以下のサイトをご参照下さい。

文字を強調する(太文字・斜体文字)

Mail-High(メルハイ)でのHTML制作において、文字を強調する場合、以下のような記述をしていただく必要があります。

(1)太文字で、文字を強調する→<strong>太文字</strong>

(2)斜体文字で、文字を強調する→<em>斜体文字</em>

以下のような記述でも文字を強調することができます。

(3)太文字で、文字を強調する→<b>太文字</b>

(4)斜体文字で、文字を強調する→<i>斜体文字</i>

実際に入力してみると、以下のように表示されます。

●HTMLメール本文入力欄への入力内容
普通の文字<strong>強調文字(太文字)</strong>普通の文字<em>強調文字(斜体文字)</em>普通の文字

●HTMLメール上での表示
普通の文字強調文字(太文字)普通の文字強調文字(斜体文字)普通の文字

全体の横幅を設定する

Mail-High(メルハイ)のHTMLメールでは、 <br>と記述することにより、改行を行わない限り、文章は横方向へ続いてしまいます。

HTMLメール全体の横幅を設定することにより、1行ごとに<br>の記述を入れることなく、設定された横幅で自動的に改行することができるようになります。

HTMLメール全体の横幅を設定するには、以下のように記載します。

<table width="500">
<tr>
<td>

  (HTMLメール本文が入ります)
</td>
</tr>
</table>

上記『width="500"』の部分の数値により、HTMLメール全体の横幅を設定することができます。

実際に記載してみると以下のようになります。

●横幅を150px(ピクセル)で記述した場合

<table width="150">
<tr>
<td>

  あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん1234567890

</td>
</tr>
</table>

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん1234567890


●横幅を300px(ピクセル)で設定した場合

<table width="300">
<tr>
<td>

  あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん1234567890

</td>
</tr>
</table>

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん1234567890

※横幅の設定を分かりやすくするため、背景色(グレー)を設定しています

このページの一番最初へ戻る