日記テンプレ公開第二弾！ | 四つ葉のクローバー

100万ポイント山分け！1日5回検索で1ポイントもらえる

885348

HOME | DIARY | PROFILE

【フォローする】【ログイン】

はじめにお読み下さい

< 新しい記事

新着記事一覧(全2405件)

過去の記事 >

November 30, 2005

日記テンプレ公開第二弾！

左下に画像（キャンドル）を入れたものです。

＜p style="WIDTH=580px;height:400px; background:url(http://*******ここに画像のURL*****jpg);background-attachment: fixed;background-repeat: no-repeat;border-width: 10px;border-style: double;border-color: #3a753a; background-position: left bottom;padding:20px; bgcolor:white;"＞
＜table border=0＞＜tr＞＜td＞
＜div style="height:360px;overflow-y:scroll;fixed;scrollbar-face-color:#339900;scrollbar-track-color:#bbe096;scrollbar-arrow-color:#ffffff;scrollbar-highlight-color:#ffffff;scrollbar-shadow-color:#5c6f84;scrollbar-3dlight-color:#ffffff;scrollbar-darkshadow-color:#ffffff; border-style:dotted;border-color:#3380cc; padding:40px; border-width:0px;"＞
＜font color="#339900"＞＜FONT FACE="HGｺﾞｼｯｸM"＞＜font size=4＞＜b＞
＜span style="line-height:29px"＞

＊＊＊＊＊＊＊＊ここに日記を書きます。＊＊＊＊＊＊＊＊＊

＜/span＞＜/b＞＜/font＞＜/font＞＜/div＞＜/td＞＜/tr＞＜/table＞
＜Br＞＜Br＞＜Br＞
　＜/p＞

昨日の分と違っている部分だけ，ちょっと説明します。

p style 　で，一番外側の枠のデザインを指定しています。

内容は，
background-attachment: fixed;background-repeat: no-repeat
の部分で，背景の画像を一箇所に固定しています。
これを指定しないばあい，同じ画像が，背景に連続して表れます。
敷き詰めた壁紙状態になります。

background-position: left bottom これで，固定する画像の位置を指定しています。

「左下」なので， left bottom
「右下」なら， right bottom
「左上」なら， left top
「中央」なら， center
などとなります。

border-style: double
この部分で，外側の枠の線の種類を指定しています。
double 　は二重線。
２８日の日記では，
dotted 点線。・・・・
そのほかに，
dashed 破線-----
solid 普通の一本線

などがあります。

p style　と，divが一緒に使えないと思っていたのですが，その中にもう一つtableを入れることで解決したようです。
わかってやったのではなく，試行錯誤の上の偶然の産物？
(^^ゞ

........... 背景キャンドル素材： Smile Time さん