　背景の入れ方　

ＨＴＭＬ形式のメールには簡単に
背景を入れる事が出来ます。

メール作成のウィンドウのメニューバーには画像を入れる
２つの方法があります。
「挿入」－「画像」　と　「書式」－「背景」－「画像」　ですが、

Ａ．　「挿入」－「画像」は文章などの中に
　　　画像を置きたい時です。
　　　写真や絵画の類いは一般的に画面いっぱいに
　　　挿入すると、データ容量が大きくなりますし、
　　　また、同じ画像を何枚も並べても意味がありません。
　　　さらに、折角挿入した画像の上には文字は書きたくありません。

　　　この「挿入」－「画像」は基本的には画像と文字が
　　　重ならない様にしたい時の方法です。
　　　これについては、基本的な解説としては
　　　「メールについて」の「背景、画像の挿入」やソースで加工する
　　　次項を参照してください。

Ｂ．　「書式」－「背景」－「画像」は基本的にはテーブルクロスの
　　　様に、下地でその上に文字や画像を乗せてしまいます。
　　　あるいはカラー便箋の様に文字が見づらくならない程度
　　　にメールを引き立てるのがそもそもの考え方です。
　　　ただ、背景に絵画などを入れてその上でさらに画像を重ねる事で
　　　複雑な、あるいは動画の様な表現もできます。

　　　ここで解説したいのはまさにその様な「画像と画像」、「画像と文字」
　　　の重ね合わせの基本に付いてです。

１．画像を初期設定のまま、縦横に並べて表示します。

こんな具合になりますね。

さてと、ではソースを
見て確認しましょう。

メールのソースを開きます。
メールでは画像やＭＩＤＩ
のデータがコード化されて
しまいちょっと見ずらいですが
これもなれれば
それ程は気にならなくなります。

下のソースは長すぎるので
便宜的に改行しました。
本当は改行してはいけないのです。

　　<BODY background=
　　C:\$BJ]B8#F#1(B\$B%a!<%kMQ(B\$B%a!<%kMQ%"%K%a(B
　　\bg_m_b12_thumb.gif>

　　上のソースはフォルダーなどに日本語などを使用している場合です。
　　文字化けしてしまいます。
　　これでは分かり辛いので直して見ましょう。

　　<BODY background="bg_m_b12_thumb.gif">

この画像ファイルはファイル名だけしか書きませんでした。
　　ＨＴＭＬメールに<BASE>タグがありそれと同じフォルダーに
　　画像ファイルが入れてあれば、この書き方でＯＫなのです｡

　　もし、<BASE>タグがなかったり、画像が別のフォルダーに
　　ある時は、絶対ＵＲＬか相対ＵＲＬで書いて上げます。

　　この事は別掲載の「ファイル名について」を参照して下さい。

２．背景を固定する。

　　本文が長くなって、スクロールバーで下に移動しても
　　背景を動かないように固定します。

　　<BODY background="bg_m_b12_thumb.gif" BGPROPERTIES=FIXED>

３．背景の上一列と左一列だけ

　　<BODY STYLE="BACKGROUND:#000000 URL(bg_m_b12_thumb.gif) repeat-x">

　　<BODY STYLE="BACKGROUND:#000000 URL(bg_m_b12_thumb.gif) repeat-y">

４．背景を１つだけ出す時の色々

　　基本形

　　<BODY STYLE="BACKGROUND:#000000 URL(bg_m_b12_thumb.gif) no-repeat">

　　背景を１つ、指定した位置（横１００、縦１００の位置から）に表示します。

　　<STYLE type=text/css>BODY{
    BACKGROUND-POSITION: 100px 100px; BACKGROUND-REPEAT: no-repeat
    }
    </STYLE>

　　今度は％で画面全体に対する割合で指定します。

　　<STYLE type=text/css>BODY{
    BACKGROUND-POSITION: 50% 20%; BACKGROUND-REPEAT: no-repeat
    }
    </STYLE>

　　100px 100px;　や　50% 20%;　の数字は適当に変えます。
　　これを　0px 0px;　や　0% 0%;　にすると基本形と同じとなります。

５．文字の入力禁止

　　指定した範囲に文字が入力できなくなります。

　　<STYLE>BODY {
　　MARGIN-TOP: 30px; FONT-SIZE: 16px; MARGIN-LEFT: 100px; COLOR: #000000; 　　　MARGIN-RIGHT: 15px;FONT-FAMILY: Arial, Times New Roman, Times, serif
　　}
　　</STYLE>

６．最後は背景を上下左右、斜めに動かして見ましょう。

　　ＢＯＤＹの中に以下のソースをコピーします。

<SCRIPT id=code>
var timerID

function StopBackground() {
clearTimeout(timerID)
}

function AnimateBackground(hPos,vPos,hInc,vInc,delay) {

if (arguments[5])
document.body.style.backgroundImage = "url(\"" + arguments[5] + "\")"

if (arguments[6])
document.body.style.backgroundRepeat = arguments[6]

if (!isNaN(hPos)) {
if ((hInc!=0) && (hPos>0)) hPos=-100000
hPos+=hInc
}
if (!isNaN(vPos)) {
if ((vInc!=0) && (vPos>0)) vPos=-100000
vPos+= vInc
}

document.body.style.backgroundPosition= hPos + " " + vPos
if (isNaN(hPos)) hPos = "\"" + hPos + "\""
if (isNaN(vPos)) vPos = "\"" + vPos + "\""
timerID = setTimeout("AnimateBackground("+hPos+","+vPos+","+hInc+","+vInc+","+delay+")",delay)
}

AnimateBackground(0,0,0,1,10)

</SCRIPT>
</BODY></HTML>

　　赤い部分の６種類の数字（　０、　０、　０、　１、　１０、）の中の
　　３番目と４番目の数字を変更すれば背景の動く方向を変える事ができます。
　　他の３ヶ所は変更しないでＯＫです。

　　　　３番目の数字・・・・　１　ｏｒ　０　ｏｒ　－１　（＋－で右と左）
　　　　４番目の数字・・・・　１　ｏｒ　０　ｏｒ　－１　（＋－で下と上）

　　　　　　　　　　　　　　　　　数字は１以外でも可（例えば、　　０．５　とか）

　　　　この組み合わせでどんな方向へでも動かせます。

参考メールを掲載しておきます。

　　　　　　

　　