【　ひな形の応用編（３）　】

７．メッセージ付き画像の作り方

（１）　ペイントで画像（バナー：メッセージやタイトルを書くボード）を開きます。




（２）　「変形(I)」をクリックして「伸縮と傾き(S)」をクリックします。




（３）　「垂直方向(V」の％を２００％（２倍）にします。




（４）　画像（バナー）が変更されました。




（５）　「ファイル(F)」をクリックして「名前を付けて保存(A)」をクリックします。




（６）　「ファイルの種類(T)」をＧｉｆ（*.ｇｉｆ）にして「ファイル名(N)」に
　　　　ファイル名（例：ｓｉｇｅｍｓｇ）を入力して「保存(S)」をクリックします。




　　　これでメッセージボード（Ｇｉｆ）ができました。
　　　次にメッセージボード付き「ひな形」を作ります。


<<<　サンプル　>>>

　　下記のサンプルはＩＢＭホームページビルダー２００１に
　　付属している「ウエイブアートデザイナー」で加工しました。
　　



８．メッセージ付き「ひな形」の作り方　　

（１）　メッセージボード画像を（２）項のメッセージ画像Ｈｔｍｌ文と組み合わせれば、
　　　 下記の様なオリジナルメッセージ付き「ひな形」が出来ます。




（２）　下記もＨｔｍｌ文の赤枠の＜ＤＩＶ　ｓｔｙｌｅ　・・・＞は、
　　　 メッセージボード画像の位置です。
　　　 青枠の＜ＤＩＶ　ｓｔｙｌｅ　・・・＞は、メッセージの位置です。
　　　　ｌｅｆｔ：ＸＸＸ　ｔｏｐ：ＸＸＸ　を変更して位置を調整します。
　　　 上記の様なメッセージ付き「ひな形」が出来ます。





８．１　テーブルダグを使ったメッセージボード付き「ひな形」

（１）　テーブルタグを使用すれば下記の様な、メッセージボート付き「ひな形」が
　　　 作成出来ます。




（２）　下記のＨｔｍｌ文の赤枠の＜ＤＩＶ　ｓｔｙｌｅ　・・・＞は、
　　　 メッセージボードの位置です。
　 　　青枠の＜ＴＡＢＬＥ　border=1・・・＞は、メッセージボードの
　　　 枠の大きさ、色、枠内の色、文字を書く位置を指定しています。




（３）　テーブルタグを使用しメッセージボードを中央（センタ）にする
　　　 下記の様な、メッセージボート付き「ひな形」が作成出来ます。




（４） 下記のＨｔｍｌ文の赤枠の＜ＣＥＮＴＥＲ＞は、メッセージボードの位置で
　　　 画面の中央（センタ）にメッセージボードをセットするダグです。
　 　　青枠の＜ＴＡＢＬＥ　border=1・・・＞は、メッセージボードの
　　　 枠の大きさ、色、枠内の色、文字を書く位置を指定しています。




８．２　背景固定ひな形　　

（１）　背景固定ひな形は、ＢＯＤＹタグの背景画像の後に'ｂｇｐｒｏｐｅｒｔｉｅｓ='ｆｉｘｅｄ’
　　　 設定すると下記の様に作成出来ます。
　　　 （下記の画像をクリックするとイメージを表示します。）




（２）下記の様に、ＢＯＤＹタグでＢＯＤＹタグの背景画像の後に
　　　ｂｇｐｒｏｐｅｒｔｉｅｓ='ｆｉｘｅｄ’を指定します。






　色々なイベント別にオリジナルメッセージ付き「ひな形」や
　背景固定「ひな形」作りましよう！！
　「ひな形」で電子メールの楽しさＵＰ！　





　　　　　　　　　　　　　　　　　　　　　　　　

　　


８．３　サンプル

　　　以下はメモ張に貼り付ける　Ｈｔｍｌ文　のサンプルです。

<<<　メッセージ画像Ｈｔｍｌ文　>>>　　

<! --- HMM〜Sige html Sample --- >
<HTML>
<HEAD>
<BODY background="kyoryu6.gif">
<DIV style="position:absolute;left:50; top:100px;">
<IMG SRC="msgbood1.gif"></DIV>
<DIV style="position:absolute;left:200; top:150px;">
<FONT color=#00ffff>　　　　　☆<BR></FONT>
<FONT color=#ff0099>
メッセージボードの「ひな形」です。<BR>
☆と☆の間に文章を書いて下さい。
</FONT><BR><BR><BR><BR><BR>
<FONT color=#00ffff>　　　　　☆<BR>
</FONT>
<BR></DIV>
<STYLE>
BODY {
font-family:         ＭＳ ゴシック;
font-size:           12  pt;
color:               0000ff;
margin-left:         30  px;
margin-top:          30  px;
background-position: top left;
}
</STYLE>
</BODY>
</HEAD>
</HTML>


<<<　メッセージＨｔｍｌ文　>>>　　

<! --- HMM〜Sige html Sample --- >
<HTML>
<HEAD>
<BODY background="JkabeAD12.gif">
<DIV style="position:absolute;left:100; top:50px;">
<TABLE border=1 cellspacing=1 cellpadding=20 
 bordercolor=ff99cc bgcolor=ffffff 
 width=500px height=200>
<TR><TD bgcolor=ccffff></TD></TR></TABLE></DIV>
<STYLE>
BODY {
font-family:         ＭＳ ゴシック;
font-size:           12  pt;
color:               0000ff;
margin-left:         30  px;
margin-top:          30  px;
background-position: top left;
}
</STYLE>
</BODY>
</HEAD>
</HTML>


<<<　メッセージＨｔｍｌ文（センタ表示）　>>>　　

<! --- HMM〜Sige html Sample --- >
<HTML>
<HEAD>
<BODY background="bg_nanohana_h1.gif">
<CENTER>
<TABLE border=1 cellspacing=1 cellpadding=20 
 bordercolor=ffffff bgcolor=ffcc99 
 width=500px height=150>
<TR><TD bgcolor=ffffcc></TD></TR></TABLE></CENTER>
<STYLE>
BODY {
font-family:         ＭＳ ゴシック;
font-size:           12  pt;
color:               0000ff;
margin-left:         30  px;
margin-top:          120 px;
background-position: top left;
}
</STYLE>
</BODY>
</HEAD>
</HTML>



<<<　背景固定Ｈｔｍｌ文　>>>　　

<! --- HMM〜Sige html Sample --- >
<HTML>
<HEAD>
<STYLE>
BODY {
font-family:         ＭＳ ゴシック;
font-size:           12  pt;
color:               0000ff;
margin-left:         30  px;
margin-top:          80  px;
background-position: top left;
}
</STYLE>
</HEAD>
<BODY background="bg_h_sakuraani.gif" bgproperties="fixed">
<BODY bgcolor="ffffff">
</BODY>
</HTML>






　　　　　　　　　　　　　　　　　　　　　　　　

姉妹サイト＆おすすめページ