RGBカラー

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.完成
  貼り付けた後メールの編集画面に戻り、本文の作成・画像の挿入などを行ってください。

 
担当:あやなおたかしゅん
配信:雛形倶楽部
☆ 
色見本(216色)
クリック!
罫線 背景色  bgColor
上・左の色 borderColorLight
下・右の色 scrollbar-highlight-color
罫線巾(斜めの部分) border
罫線巾(平面部分:色は罫線背景色) cellSpacing
罫線と文字(画像)との隙間(色は罫線背景色) cellPadding
レイヤー
横幅 width
縦長 height
背景色  background-color
スクロールバー本体色 scrollbar-face-color
スクロールバー背面色 scrollbar-track-color
スクロールバー矢印色 scrollbar-arrow-color
スクロールバー上・左側の色 scrollbar-highlight-color
スクロールバー(外)上・左側の色 scrollbar-3dlight-color
スクロールバー下・右側の色 scrollbar-shadow-color
スクロールバー(外)下・右側の色 scrollbar-darkshadow-color
文字色 color
左マージン padding-left
右マージン padding-right
上マージン padding-top
下マージン padding-botttom