★
OEひな形講座メールマガジン第14回「本文レイヤー」
(Scriptひな形No.008)
※Outlook Express Ver6の方はセキュリティーの設定をしていないとScriptによる雛形が正常に作動いたしません。第1回メールマガジンを参考にして設定変更をしてください。
※このひな形で作成されたレイヤーはただのHTMLタグですので、全てのOutlook
Expressに有効です。但し、スクロールバーの配色はOutlook Express5.5以上でないと反映されません。)
ひな形作成に当たって、文字を入れる部分をレイヤーで作成する場合が多くなっています。レイヤーにスクロールバーを使用する事により、全体のレイアウトが文章の長さに影響されなくなり、ひな形により汎用性を持たす事ができます。最も簡単なスクロールバーのついたレイヤーを作成するなら簡単なのですが、背景や画像・ひな形のイメージを壊さないようにするためには各部分事細かな配色設定が求められてきます。
この本文レイヤー作成ツールはレイヤーの外側にテーブルを設け、配色を簡単に変更できるように致しました。メール全体を統一したイメージで作成する場合にご利用下さい。このサンプルはホワイトボード風に仕上げてみました。
本文レイヤーツールの使い方。
1.簡単な作り方
最初は使い方がわからないと思いますので、下記手順で作ってみてください。
1)罫線−背景色(額)を決めて右側の色見本をクリック
2)罫線−背景色の
ボタンをクリック
3)レイヤー−背景色の
をチェック、背景色を決めて右側の色見本をクリック
4)レイヤー−背景色の
ボタンをクリック
5)
をクリック
6)できあがったソース<TABLE bgColor=#・・・・>〜</table>をコピーしてメールソースの
<BODY bgColor=#ffffff
>〜
</BODY>の間に貼り付け送信してください。
当面はこれから進めてみてください。細かく設定したい場合は下記を読んで試してみてください。
2.色の付け方(下記3種類の方法で色を変更する事ができます)
まず変えたい色の
にチェックを入れてください。
○左にあるRGBカラースクロールバーで着色
○右側にある色見本(216色)の好きな色を選んでマウスでクリック
○
に直接色番号を入力してもかまいません。
(変な数値を入れるとエラーになりますので気をつけてください)
(色を透明にしたいときは、
を空白にすれば自然とtransparentになり、透明になります。)
3.罫線
罫線は本文レイヤーの周りを囲んだ額の事です。HTMLの表コマンド(table)を利用した物で、文字に限らず画像を入れる事により、画像をより美しく・格調高く表現する事ができます。
1)罫線の背景色に対して、上・左を明るくし、下・右を暗くすれば飛び出した額ができあがります。逆にするとへこんだようになります。これは左上から光が照射しているという錯覚からそのようなイメージになるのでしょう。
2)罫線−背景色の
をチェックすると、
ボタンが出現します。罫線の色を決定してこのボタンをクリックすると、同系色で罫線を配色します。
3)罫線巾、斜め・平面・文字との隙間 それぞれの巾を設定する事ができます。レイヤーの大きさに合わせてバランス良く変更してください。
(ピクセル)に数値を入れて、別の所をクリックすれば本文レイヤーは変更されます。
4.レイヤー
こちらは文章を入れる部分です。このレイヤーのサイズを決定すれば、自動的に外側の罫線はレイヤーに合わせて大きさは変更されます。
1)横幅、縦長 レイヤーの大きさを決定します。
(ピクセル)に数値を入れて下さい。
※
を空白又は0にすると、レイヤーの大きさはフリータイプになり、文章の長さでレイヤー大きさが変わり、スクロールバーは消えます。
※縦長の長さを文章より長くするとスクロールバーはうっすらと表示され使用できなくなります
(全文が表示されているので使用する必要もなくなります。)
2)背景色、スクロールバー各色を同様に変更する事ができます。それらが何処の色かは実際色を変えてやってみてください。
3)背景色の
をチェックすると、
ボタンが出現します。背景色を決定してこのボタンをクリックすると、同系色でスクロールバーを配色します。
4)文字色 レイヤー内の文字の色を変更できます。
5.本文レイヤーの作成
自分の気に入ったレイヤーができれば、下にある
をクリックしてください。その後、できあがったソース<TABLE bgColor=#・・・・>〜</table>をコピーしてメールソースの
<BODY bgColor=#ffffff
>〜
</BODY>の間に貼り付け送信してください。
詳細:
第11回メールマガジン。
6.完成
貼り付けた後メールの編集画面に戻り、本文の作成・画像の挿入などを行ってください。
☆