ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記

Freepage List

レストアの仕方

< 新しい記事

新着記事一覧(全446件)

過去の記事 >

2004/09/13

【グラデーション枠１】
これは、みかんママさんのグラディエーションのTABLEです。
みかんママさんの承諾を得まして、
グラデーションのテキストボックスの中に罫線の背景を入れてみました。

みかんママさんのこのグラデーションの雛形は、
よくあちこちの日記で見かけますね。
とても素敵です！(￣m￣*)V

実は・・・・・私も使ってみたかったのです・・・（〃_ _）σ゛
モックンさんやかずさかさんも紹介しておりますので、
あえて私は、このタグの雛形や紹介はしない趣旨でいました！

罫線の背景画像は何にでも使えることを皆さんに紹介したかったもので
今回は、みかんママさんにお借りしてまいりました。
みかんママさんのところには、このような素敵な雛形が一杯あります。
是非、覗いてみることをおすすめします。(￣^￣)b

ではどのように罫線のTABLEを入れているのか、この下に書いてみますね。
まずは、罫線のTABLEを表示してみましょう。

罫線のTABLEだけ表示しますと、このようになります。
実は、このTABLEだけで、便箋風の雛形は出来ます。(￣m￣*)V
このタグを書きますね！

<TABLE cellSpacing="5" cellPadding="0" width="600" align="center" border="0"><TR><TD background="http://gtone.k-server.org/img2/solid1.gif"><FONT style="FONT-SIZE: 15px; LINE-HEIGHT: 22px;color:black;font-family: Comic Sans MS;color:black;">
ここに本文を書いていきます。
</FONT></TD></TR></TABLE>

上のみかんさんのTABLEでは、幅をwidth="90%"　と指定していますが
このTABLEでは　width="600px"　としています。
このTABLEを、罫線を入れようとする、
一番内側のセルやボックスの中に入れますと便箋風になります。
そのとき、WIDTHは％で指定した方がいいですね。

上のタグに背景色を指定するタグ　bgcolor="#F4F2AC"　と
枠を指定するスタイルシート
style="border-style:solid;border-color:black;border-width:1px;"
を入れますと、このようになります。
あと、cellSpacing="5"　の数値を15にして、セルの間隔を広げています。

<TABLE cellSpacing="15" cellPadding="0" width="600" align="center" border="0" bgcolor="#F4F2AC" style="border-style:solid;border-color:black;border-width:1px;" ><TR><TD background="http://gtone.k-server.org/img2/solid1.gif"><FONT style="FONT-SIZE: 15px; LINE-HEIGHT: 22px;color:black;font-family: Comic Sans MS;color:black;">
ここに本文を書いていきます。
</FONT></TD></TR></TABLE>

みかんさんのタグに罫線を入れたものをこの下に書いておきます。
では皆さんがんばってくださいませ！(￣m￣*)V

<table cellspacing="1" align="center"><tr><td bgcolor="#101931" width="20" height="20"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0 StartColorStr=#33abb9e4 EndColorStr=#cc101931)"></td><td bgcolor="#101931" width="20" height="20"></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1 StartColorStr=#33abb9e4 EndColorStr=#cc101931)" width="20"></td><td><center style="width:600px;height:350px;margin:0px;background-image:url(ここに左上のワンポイントの背景画像のURL);background-repeat:no-repeat;background-Attachment:fixed;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0 StartColorStr=#33abb9e4 EndColorStr=#99101931);overflow-y:scroll;fixed;scrollbar-face-color:#abb9e4;scrollbar-track-color:#abb9e4;scrollbar-arrow-color:#c7b29a;scrollbar-highlight-color:#000000;scrollbar-shadow-color:#ffffff;scrollbar-3dlight-color:#ffffff;scrollbar-darkshadow-color:#000000; text-align:left;"> <TABLE cellSpacing=5 cellPadding=0 width="90%" align=center border=0><TR><TD background=http://gtone.k-server.org/img2/solid1.gif><FONT style="FONT-SIZE: 15px; LINE-HEIGHT: 22px;color:black;font-family: Comic Sans MS;color:#EBDF01;">
ここに本文を書きます。
</FONT></TD></TR></TABLE> </center></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1 StartColorStr=#cc101931 EndColorStr=#33abb9e4)" width="20"></td></tr><tr><td bgcolor="#101931" width="20" height="20"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0 StartColorStr=#cc101931 EndColorStr=#33abb9e4)"></td><td bgcolor="#101931" width="20" height="20"></td></tr></table>

ご注意
このまま、楽天のフリーページや日記の編集ページに貼り付けますと、エラーがでます。
必ず、一度メモ帖や、エディターソフトに貼り付けて画像のURLなどを編集の上、アップしましょう！
以前のタグ規制やバージョンアップに伴い、楽天では少しのタグミスでエラーがでます。
ですから、画像のURLがちゃんと載っていませんと、「えっ～～らっ～～～！」となります。(￣‥￣)=3 ﾌﾝ