HOME TOP BACK NEXT

■全面に背景画像を使う方法
まず、背景に使いたい画像ファイルを用意してください。
画像ファイルは、○○.gifでも○○.jpgでもどちらでもかまいません。
ここで、準備編で作ったひな形用フォルダの出番です。
使いたい画像ファイルと、HTMLファイルをひな形用のフォルダに入れて、 フォルダを右クリックして開いてください。今後は、このフォルダの中で作業をします。
最初に、HTMLファイルを開き、HTMLファイルのソースにつぎのソースをコピペしてください。 背景色を白にしてあります。 本当は背景に使う画像ファイルと近い色を背景色にするのが理想的ですが、白っぽい画像ファイルを使う場合は白#FFFFFF、黒っぽい画像ファイルを使う場合は黒#000000でもかまいません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>ひな形</title>
</head>
<body bgcolor="#FFFFFF">
</body>
</html>



例として、この画像 w-momijiwsk.gif を使って説明します。
画像ファイル名は、大文字小文字を正確に書いてください。
gifのまえにドットがあることを忘れないように。
背景画像の書き方は、
<body bgcolor="#FFFFFF" background="w-momijiwsk.gif">
<body bgcolor="#FFFFFF">の中にbackground="w-momijiwsk.gif"を書き加えるだけです。 どんな風に表示されているか、できあがったHTMLファイルを見てみましょう。サンプル
淡い色の背景画像ですから、この画像ファイルとHTMLファイルが入ったフォルダをStationeryに入れておけば、十分メール用のひな形として使えます。

※ひな形の使い方は当サイトのひな形ページの「利用の手引き」を参照してください。だだし、この場合はStationeryの中にあるひな形用フォルダを開いて、その中にあるHTMLファイル(ひな形)をクリックして選択してください。

ところが背景に使いたい画像がこんな画像だったらどうでしょう。
これは、壁紙ではなくカットです。
同じように、背景画像に指定すると、こんなふうに(サンプル)なって、いくら白背景でも、文字が書きにくいひな形になってしまいます。
そこで、こんな場合はスタイルシートを使って、背景画像を全面表示ではなく、部分表示にします。
つぎはスタイルシートを使った背景画像の使い方です。

■背景画像を横一列に並べて使う方法
背景画像を]軸(横軸)だけ繰り返すスタイルシートは、つぎのとおりです。

<style type="text/css">
<!--
body {
background-repeat:repeat-x;
}
-->
</style>


background-repeat:repeat-x;と書いてあるところが、背景を]軸だけ繰り返すという意味です。
スタイルシートを加えた全体のソースはつぎのとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>ひな形</title>
<style type="text/css">
<!--
body {
background-repeat:repeat-x;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" background="tulipred.gif">
</body>
</html>


こちらができあがったHTMLファイルです。サンプル
チューリップの代わりにこんなラインを使って、bgcolorを白ではなく、bgcolor"#E0FFFF"と指定すれば、こんなHTMLファイルもできます。サンプル これなら、OutlookExpress用のひな形として十分使えるのではないでしょうか。

■背景画像を縦一列に並べて使う方法
つぎは背景画像を縦一列に並べて使うスタイルシートですが、これは、横一列に並べるときのスタイルシートのbackground-repeat:repeat-x;をbackground-repeat:repeat-y;と変えるだけです。これで、Y軸(縦軸)だけ背景画像が繰り返すという意味になります。HTMLファイルのソースはつぎのとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>ひな形</title>
<style type="text/css">
<!--
body {
background-repeat:repeat-y;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" background="tulipred.gif">
</body>
</html>


できあがりはこれです。サンプル

■背景画像を1枚だけ使う方法
例えば大き目の写真やクリップアートを背景画像にする場合は、背景画像を繰り返さず、指定した場所に1枚だけ表示するスタイルシートを使います。
例えば、こんな画像を背景に使うときです。画像参照
1枚の画像を貼るだけなら背景にせずに、HTMLファイルのソースの<body>と</body>の間に
<img src="aliceb.jpg">と書いても見た目は同じですが、メールで使うときにぜんぜん違ってきます。 貼り付けただけの画像は、OEのメッセージ編集画面で、BackSpaceキーで削除できるからです。背景に指定した画像はBackSpaceキーでは削除できませんから、文章を書いているとき、うっかり画像を削除してしまうということもありません。
背景画像を繰り返さないスタイルシートはつぎのとおりです。

<style type="text/css">
<!--
body{
background-image : src="aliceb.jpg";
background-repeat : no-repeat;
background-attachment : fixed;
background-position : 90% 50%;
}
-->
</style>


background-image : src="aliceb.jpg";は背景にaliceb.jpgという画像を使うという意味です。
background-repeat : no-repeat;は背景画像を繰り返さないという意味です。
background-attachment : fixed;は背景画像を固定するという意味です。
background-position : 90% 50%;は背景画像を置く位置を示しており、この場合はX軸が左から90%の位置で、Y軸が上から50%の位置と指定しています。
X軸とY軸の位置は、使う画像に合わせて、調節してみてください。
ソース全体を書くと、つぎのとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset="Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>ひな形</title>
<style type="text/css">
<!--
body{
background-image : src="aliceb.jpg";
background-repeat : no-repeat;
background-attachment : fixed;
background-position : 90% 50%;
}
-->
</style>
</head>
<body bgcolor="#000000" background="aliceb.jpg">
</body>
</html>


この場合は、bodyのところにもbackground="aliceb.jpg"と書いてください。
背景色は、画像に合わせて、黒にしてみました。仕上がりはサンプルを見てください。
だんだん、電子メール用ひな形らしい形になってきましたね。

■コピペで使える背景固定スタイルシート(CSS)一覧
縦長の風景壁紙など背景が繰り返し画面になったら困るときは、背景固定タグを使うと便利です。
背景を横だけ繰り返すようにしたり、縦だけ繰り返すようにすれば、イラストも背景に使えます。
背景を固定したい場合は、次の背景固定タグを<HEAD>と</HEAD>の間にコピーして貼り付けてご利用ください。

背景を固定する
<style type="text/css">
body { background-attachment:fixed;}
</style>

背景を横方向だけ繰り返す
<style type="text/css">
body { background-repeat:repeat-x;}
</style>

背景を縦方向だけ繰り返す
<style type="text/css">
body { background-repeat:repeat-y;}
</style>

背景を固定して横方向だけ繰り返す
<style type="text/css">
body { background-attachment:fixed;
background-repeat:repeat-x;}
</style>

背景を固定して縦方向だけ繰り返す
<style type="text/css">
body { background-attachment:fixed;
background-repeat:repeat-y;}
</style>

背景を左上に固定して繰り返さない
<style type="text/css">
body { background-attachment:fixed;
background-repeat : no-repeat;
background-position : 0% 0%;}
</style>

背景を右上に固定して繰り返さない
<style type="text/css">
body { background-attachment:fixed;
background-repeat : no-repeat;
background-position : 100% 0%;}
</style>

背景を左下に固定して繰り返さない
<style type="text/css">
body { background-attachment:fixed;
background-repeat : no-repeat;
background-position : 0% 100%;}
</style>

背景を右下に固定して繰り返さない
<style type="text/css">
body { background-attachment:fixed;
background-repeat : no-repeat;
background-position : 100% 100%;}
</style>

自分で作ったひな形を、画像ファイルとHTMLファイルを1つのフォルダに入れて、ひな形作りの準備で作ったStationeryのショートカットからStationeryに入れて、OutlookExpressで、ひな形として使ってみましょう。
Stationeryに元から入っているWindows付属のひな形はフォルダに入っていませんが、自分で作ったひな形はフォルダに入れてしまってください。ひな形を使うとき、そのフォルダを開いて中にあるHTMLファイル(ひな形)を使えばいいだけです。 フォルダに入れておかないと、後になって、ひな形がたくさん増えてきたときに、どの画像がどのひな形で使う画像なのかわからなくなったり、同じ画像名の画像が上書きされるなどの不都合が起こりがちです。 できれば、1つのひな形ごとにフォルダを作って整理しておきましょう。

Copyright(C) 2001〜PurpleEyes All Rights Reserved.