ＡＺ'ｓＨｏｍｅ　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"

で一番外側のラインの幅を指定。１が一番細く、０だと枠線は表示されません。

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ポイントの左側の空きが出来ていましたが、
　アップされたページでは、マージン、効いてませんねぇ(^_^；
　って事で、ここでマージン指定しても楽天では無意味って事が分かりました(ーー；

ジャンル別一覧