重ね合わせ

ここではOutlookExpressのHTMLメッセージ作成画面で、画像や文字を重ねて表示する方法を解説します。
この方法がベストだということではありません。
他にも方法があるからです。
しかし初心者にもわかる方法だとは思います。
ここではひな形は使っていませんが、ひな形を選択してソースを編集しても出来ますので、
使い方に慣れたらやってみて下さい。

[1]ではまずOutlookExpressの[メールの作成]ボタンを押してください。
テキスト形式になっている方は、メッセージの作成画面の[書式]メニューにあるリッチテキスト(HTML)(R)を
クリックして、HTML形式にして下さい。

[2]ソースを表示させて下さい。
[編集][ソース][プレビュー]が表示されていない方は、[表示]メニューにあるソースの編集をクリックしておきましょう。
この時のソース表示では下の画像のようになっているはずです。
※バージョンの違いにより、一部に異なる部分がありますが、問題はありません。

[3]では、下のHTMLタグをコピーしてソースの最後の方にある</BODY>タグ前に2回貼り付けます。

<SPAN

style="LEFT: 100px; POSITION: absolute; TOP: 50px">

<DIV> この中に文字や画像を入れて下さい。 </DIV>

赤い文字の部分だけを範囲選択してから、[Ctrl]+[C]を押すとコピーななります。
その後OutlookExpressの</BODY>タグの前をクリックしてから[Ctrl}+[V}を２回繰り返すと
２回貼り付けたことになります。
上手くショートカットキーが出来ない？？先に[Ctrl]キーを押し、そのまま[C]や[V]を押せばいいですよ。

[4]下の画像ようになったでしょうか？

[4]ここでプレビューしてみましょう。
まだ編集にしないで下さいね。ソースにある日本語が文字化けしますので。

参考：文字化けしてわからなくなるのを防ぐには、[編集]画面で日本語部分を全て英数字に変えるといいですよ。
最終的に[編集]で日本語に戻せば済むことですから。

先ほど貼り付けたタグにstyle="LEFT: 100px; POSITION: absolute; TOP: 50px"とありますね。
LEFTが左から100ピクセルから、TOPが上から50ピクセルのところから表示するという意味です。

今は２つとも同じ位置に表示して重なっているいるので、２つ目をずらすことにしましょう。

[5]では、ソースに戻り、２つ目の方の数値を変更してずらしましょう。
とりあえず左から130ピクセル・上から70ピクセルにしてみます。
下図の部分を変更して下さい。

ではプレビューしてみましょう。

今度は２つが少しずれて表示されていますね。
ここで注意しなければならないのは、ソースの下に書かれている方が後から表示されるので、
表示上では必ず上に来るということを覚えておいてください。
画像の上に文字を入れたい場合など、文字が画像の下に来ると読めなくなりますから、画像を下に（ソースでは上に
書かれたタグ）貼り付けないといけません。

実はこんな面倒なことをしなくてもずらせるのです。
ですが、ある程度意味を知って頂くために敢えて数値を変える方法をご紹介しました。

では編集メニューで位置変更などの方法を紹介します。

[編集]表示にして下さい。

[6]下の画像を参考にやってみてください。

[7]この編集画面で、不要な文字を消して書き換えたり、画像を貼り付けたりして完成です。
注意！四角いボックス自体を消さないように注意してくださいね。

画像を貼り付けるには、[挿入]メニューから画像をクリックして行います。

背景画像とは違いますので、背景に別の画像を付けることも出来ます。
[書式]メニューから[背景]=>[画像]で行います。

完成～～～

後は皆さんで工夫してくださいな。
<MARQUEE>タグを付けたり、ひな形に入れたり、２つと言わずもっとたくさん重ねたり、重ねなくても配置固定に使ったりに
利用下さい。
※<MARQUEE>は、上下・左右に移動しながら表示させるタグです。
<MARQUEE>～～～～～～</MARQUEE>で、囲まれた部分を移動させます。
詳しくは、HTMLリファレンスなどを参照下さい。

試行錯誤しながら覚えるのもマスターの早道ですよ。
わからないと言う方、メール下さい　HIDERIN Mail:ENJOY_HTML-MAILオーナー:owner-enjoy_html-mail@freeml.com

<< 追加情報 >>

重ね合わせ順位がわからなくなったら・・・とりあえず文字がある先頭に何か画像を貼り付けてみましょう。
後々のため、まだ文字を全て削除しないでくださいね。

文字削除

四角の中で消す部分を範囲選択するか、カーソルを文字に合わせてクリックし、[Backspace]キーと
[Delete]キーで消していきます。

参考：もし、同じボックスに複数の画像を入れたり、文字との混在をしたい時は、元の文字は全て
消さずに残しておきましょう。全ての文字を消して画像を入れてしまうと、後々追加するのが面倒になります。
何文字かは残しておいて、最後に要らないものを全て消す方が無難ですね。
また、画像だけになるとサイズ変更はできますが、表示位置を変えることが、[編集]画面では出来なくなります。

消し間違えたら、すぐに[元に戻す]を使いましょう。
OutlookExpressでは元に戻すが上手くいかなくなる場合がありますので、すぐに戻しましょう。

画像サイズに枠を合わせるため、わざと枠を小さくしています。
枠の中でクリックして画像を入れます。

上の画面ではファイル選択で縮小画面が出ていますね。
Windows Meや2000では縮小版という機能がありますので、選択すると出来ます。
Windows 98ではどうだったかな？

もし文字の方が下になってしまったら、下になったものを枠ごと消して、新たに上にタグを加えましょう。

ソースの一番最後の</BODY>タグ前に再度先ほどのタグを貼り付けて編集しましょう。
<SPAN

style="LEFT: 100px; POSITION: absolute; TOP: 50px">

<DIV> この中に文字や画像を入れて下さい。 </DIV>

<DIV>-------------------------------------------------------</DIV></SPAN>
でしたね。このタグさえソースに貼り付けできれば、いくらでも修正や追加ができます。

画像３枚重ねるひな形ダウンロード
このひな形は単純に以下のようなHTMLひな形です。