メイン

■BBS　CSS テンプレートスクロールミニ01　白背景専用
資料です

windows版 IE6 firefox opera 以外のブラウザには対応してません IE7は持ってないのでわかりませんfirefoxのアドオンの描画でみる程度なのでまともに対応できませんのでよろしく　IE8βにいたってはページが真っ白になっているようです(^_^;)

@import url("common.css");

/*全称セレクタ*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

/* 新規投稿 */
#write {
background:url() no-repeat 50% 5px;
padding:5px 0px 10px 10px;
}

/* 新規投稿 リンク文字 */
#write a{
color:#0066ff;  /* 文字の色 */
font:normal normal bold 11pt/1.3 "ＭＳ Ｐゴシック","Osaka",sans-serif; 
padding: 3px 3px 3px 16px;
background: url(files/ssb-t08.gif) no-repeat left;
}

/* 新規投稿 　カーソル乗ったとき*/
#write a:hover{
color:#ff00ff;  /* 文字の色 */
background: #ffffff url(files/ssb-t09.gif) no-repeat left;
}

/* 過去の記事　ページめくり*/
#navigation {
background:url() no-repeat 50% 20px;
padding-bottom:35px;
font-size:10pt;
text-align:;
margin-left:10px;
}

ul{
text-align:center;
width:430px;
height:400px;
overflow:auto;
margin-bottom:50px;
margin-right:auto;
margin-left:auto;
scrollbar-3dlight-color:#666666;
scrollbar-track-color:#ffffff; 
scrollbar-arrow-color:#ff00ff; 
scrollbar-darkshadow-color:#ffffff; 
scrollbar-face-color:#ffffff; 
scrollbar-shadow-color:#666666; 
scrollbar-highlight-color:#ffffff;

}

li{
background-color:; 
list-style-type:none; 
padding:6px; 
margin:10px;
}

/* 本体部 */
.post { padding:;
margin-bottom:2em;
margin-left:auto;
margin-right:auto;
width : 85%; 
border: 3px double #999999;
color:#666666; /* 指定していない文字色 from at*/
background-image: url() ;
background-repeat: repeat-y;
background-position: center left;
text-align:left;
background-color:#ffffff;
}

/*IE7用CSSハック*/
*:first-child+html .post{
width : 80%;
}

/* 本体上部 */
.post_auther{
padding:0.5em 2em 0.5em 2em;
font-size:10pt;
background-color:;
}

/* No*/
.post_no{
color:#000000;
}

/* 名前 リンクなしの時*/
.post_name{
font-weight: bold;
color:#ff6600;
}

/* 名前 リンク*/
.post_name a{
color:#1e90ff ! important;
}

/* 名前 リンク　カーソル乗ったとき*/
.post_name a:hover{
color:#9900ff ! important;
}

/* 時間*/
.post_time{
color:#000000;
}

/* 編集*/
.post_edit a{
color:#999999 ! important;
background-color:#ffffff;
padding:0.1em 0.1em 0.1em 0.1em;
border: 3px double #c0c0c0;
float:right;
margin:0px 50px 0px 3px;
font-size:10pt;
font-weight:bold;
}

/* 編集　カーソル乗ったとき*/
.post_edit a:hover{
color:#9900ff ! important;
border: 3px double #9900ff;
}

/* 返信*/
.post_reply a{
color:#999999 ! important;
background-color:#ffffff;
padding:0.1em 0.1em 0.1em 0.1em; 
border: 3px double #c0c0c0;
float:right;
margin:0px 0px 0px 3px;
font-size:10pt;
font-weight:bold;
}

/* 返信　カーソル乗ったとき*/
.post_reply a:hover{
color:#9900ff ! important;
border: 3px double #9900ff;
}

/* タイトル*/
.title{
margin:0.5em 2em 0.5em 2em;
font-size:10pt;
font-weight:bold;
background-color:; 
border-bottom-width: 1px;
border-bottom-style: dashed; 
border-bottom-color: orange; 
padding: 5px;
background-image: url();
background-repeat: no-repeat;
background-position: 98% 95%;
clear: both;
}

/* タイトル リンク色*/
.title a{
color:#1e90ff ! important;
padding: 1px 2px 1px 24px;
background: url(files/ssb-t08.gif) no-repeat left;
display:block;
}

/* タイトル リンク色 カーソル乗ったとき*/
.title a:hover{
color:#9900ff ! important;
background: url(files/ssb-t09.gif) no-repeat left;
}

/* コメント*/
.post_text{
font-size:10pt;  /* 文字の大きさ*/
color:#333333;  /* 文字の色*/
font-weight:500;  /* 文字の太さ*/
line-height : 1.2;	/* 行の高さ*/
letter-spacing : 0.1em;	/* 文字間隔 */
margin:0.5em 2em 0.5em 2em;
padding:0 0 0 0;
background-color:; 
background-image: url();
background-repeat: no-repeat;
background-position: 100% 100%;
min-height:50px;
}

/* firefoxで連続する半角英数字が改行されないのでスクロールバーで対応 */
.post>p{overflow:auto; }

/* IE6で連続する半角英数字が改行されない修正 */
.post p{word-break:break-all; white-space: ; }

/* IEの改行対策*/
br { letter-spacing: 0; }

/* 下部過去の記事ページめくり*/

div a span{color:dodgerblue; margin-left:10px; font-size:10pt;}

div a:hover span{color:hotpink;}

/* 下部戻りのリンク*/

#back_link{
margin-bottom:40px;
padding:30px 10px 30px;
text-align:left;
background-image: url(http://www.eclat.cc/home/ikanago/files/kisetu.gif) ;
background-repeat: no-repeat;
background-position: 50% 10px;
}

/* 戻りのリンク色*/
#back_link a{
color:dodgerblue;
font:normal normal bold 100%/1.3 "ＭＳ Ｐゴシック","Osaka",sans-serif; 
padding: 3px 3px 3px 16px;
background: url(files/ssb-t08.gif) no-repeat left;
}

/* 戻りのリンク　カーソルが乗ったとき*/
#back_link a:hover{
color:hotpink;
background: url(files/ssb-t09.gif) no-repeat left;
}

body {
background-color: #ffffff;
background-image: url(files/eclat_t013.gif) ;
background-attachment:;
background-repeat: no-repeat;
background-position:54% 55px;
font-size:10pt;
color:#000000;
text-align:center;
}

a:link {text-decoration:none; color:#1e90ff; }
a:visited {text-decoration:none; color:#1e90ff; }
a:hover {text-decoration:none; color:#ff00ff; }

■画像で素材屋さんで借りているものははずしてます。自分でさがしてアップして下さい。 /* 過去の記事　ページめくり*/　部と /* タイトル*/　部と /* コメント*/　部です url()　　の中に画像のアドレスを入れてください　　　 ▼以下の画像を使ってるところはダウンロードして使うか　自分で素材見つけてアップして下さい。　いらない場合は()内空白にしてください 1./* 新規投稿 */ #write {}部　ここは上部の画像ですこのテンプレートではこちらは使いません無視してください 2./* 新規投稿リンク文字 */ #write a{}部新規投稿　ロールオーバー風アイコン ssb-t08.gif

ダウンロードしてください自分で用意するときは同じぐらいか小さい大きさほうが数値を変更しなくてすみます 3./* 新規投稿　カーソル乗ったとき*/ #write a:hover{}部　新規投稿　ロールオーバー風アイコン ssb-t09.gif

ダウンロードしてください 4./* 過去の記事　ページめくり*/ #navigation {}部　ほとんど飾りですが文字画像なんかもいいかもしれませんこれも使わないので関係ありません 5./* 本体部 */ .post {}部これも使わないので関係ありません 6./* タイトル*/ .title{}部　これも必要ないものです自分でさがしてアップしてください 7./* タイトルリンク色*/ .title a{}部　タイトル　ロールオーバー風アイコン (新規投稿リンク文字と同じもの使ってます) 変える場合は自分でさがしてアップしてください 8./* タイトルリンク色カーソル乗ったとき*/ .title a:hover{}部　タイトル　ロールオーバー風アイコン (新規投稿リンク文字と同じもの使ってます) 変える場合は自分でさがしてアップしてください 9./* コメント*/ .post_text{}部　これも必要ないものです自分でさがしてアップしてください 10./* 下部戻りのリンク*/ #back_link{}部　ここは季節ごとに変えたりしてます変える場合は自分でさがしてアップしてください 11./* 戻りのリンク色*/ #back_link a{}部　戻りのリンク　ロールオーバー風アイコン(新規投稿リンク文字の所と同じでいいと思います) (新規投稿リンク文字と同じもの使ってます) 変える場合は自分でさがしてアップしてください 12./* 戻りのリンク　カーソルが乗ったとき*/ #back_link a:hover{}部　戻りのリンク　ロールオーバー風アイコン (新規投稿リンク文字と同じもの使ってます) 変える場合は自分でさがしてアップしてください 13./* 掲示板全体*/ body {}部　全体の背景画像です　これが枠の画像です　どれか一つダウンロードしてアップしてくださいスタイルシートはダウンロードしたファイル名に変更してください

eclat_t009.gif

eclat_t010.gif

eclat_t011.gif

eclat_t012.gif

eclat_t013.gif

eclat_t014.gif

eclat_t015.gif

--------------------------------------------------------------- なんかわかりにくいのでダウンロードしてアップが必要な画像は 3点です ssb-t08.gif

　ssb-t09.gif

枠の画像　選んでダウンロードしてくださいダウロードしてアップしてくださいこれにあいそうなフォームのテンプレはこちら枠の画像はここにあるなかから選んで下さい

更新履歴

2008年10月10日
ulに不要なやつwidth:100%;があったので削除

2008年9月28日　作成