AZ's Home sub(創作以外の事専用)

額縁風に枠をつける(H16.8.24.)

日記に額縁風に枠をつける(H16.8.24.更新)

額縁みたいな枠をつける場合は、こんな感じで↓

<TABLE BORDER="3" BORDERCOLOR="#ff6b63" BACKGROUND="画像のURL" CELLSPACING="30" CELLPADDING="10"><TR><TD BGCOLOR="#ffffff">ここに文章を入れる。</TD></TR></TABLE>

2004年06月23日の日記で使っています。

TABLE BOREDER="3" で一番外側のラインの幅を指定。1が一番細く、0だと枠線は表示されません。
BORDERCOLOR="#ff6b63" で線の色を指定。
BACKGROUND="画像のURL" で指定した画像は、これだと傘です。
CELLSPACING="30" は、外枠線と内側の枠線の間の距離。
CELLPADDING="10" は、内側の枠線から文字までの空きの距離です。
TD BGCOLOR="#ffffff" は、文字が書かれる部分の背景の色です。
この場合、テーブル枠の線種を STYLE="double" のように指定しても、反映されませんでした(^ ^;

これは、2004年08月24日の日記で使っているタグです。


<TABLE BORDER="3" BORDERCOLOR="#a0fea0" BACKGROUND="縁の画像のURL" BGCOLOR="#FFFFFF" CELLSPACING="30" WIDTH="100%"><TR><TD><P STYLE="BACKGROUND-image:url(画像のURL); BGCOLOR:#ffffff; lain-height:140%; background-position:right;">
ここに文章を書く
</P></TD></TR></TABLE>


TABLE BORDER="3" 一番外側の枠線の太さを指定
BORDERCOLOR="#a0fea0" 枠線の色を指定
BACKGROUND="縁の画像のURL" 縁に使う画像を指定。これではチェックの方のですね。
BGCOLOR="#FFFFFF" 枠の背景色を指定する事で、
 透過加工の素材を使ってもページの背景画像と重ならなくなります。
CELLSPACING="30" 外枠線と内枠線の間の距離を指定します。
 これで枠に画像が出ます。
WIDTH="100%" 枠の幅を指定します。
 100%とする事で、右側に変な空きができたり、
 逆にタイトル行よりもはみ出したりしないで済みます。

これには CELLPADDING="10" は入れませんでした。
CELLPADDING で枠から文字までの空きを指定すると、文章部分の背景画像も一緒に空いてしまうんです。
文章を書く部分の設定は、<P STYLE>タグ内で指定します。

BACKGROUND-image:url(画像のURL); 文章部分の背景画像を指定。
BGCOLOR:#ffffff; 背景に使う画像が透過加工済みな場合、
 背景の下地の色をここで指定します。
 指定しないと、ページの元からある背景画像が重なってしまいます。
lain-height:140%; 行間を指定してます。
 行間が狭いと見辛いので、私は140%で指定しています。
background-position:right; 背景画像のポジション指定です。
 ここでは右に寄せてますが、中央寄せもできます。
 デフォルトでポジション指定をしない場合は左に寄りますが、
 文字と枠の間をこのように開けたい場合は、画像も枠から離れてしまうので、
 注意が必要です。
 margin:0 0 0 10 という感じでマージン指定(上 右 下 左の順です。半角空白で区切ります)をしてみましたが、
 「日記を登録」すると確認ページでは 10ポイントの左側の空きが出来ていましたが、
 アップされたページでは、マージン、効いてませんねぇ(^_^;
 って事で、ここでマージン指定しても楽天では無意味って事が分かりました(ーー;



Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.