メイン

■BBS　CSS テンプレート gray1
資料です

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

@charset "UTF-8";
.for-owner { }
.for-guest { display: none; }

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

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

/* 新規投稿 リンク文字 */
#write a{
color:dodgerblue;  /* 文字の色 */
font:normal normal bold 12pt/1.3 "ＭＳ Ｐゴシック","Osaka",sans-serif; 
padding: 4px 4px 4px 20px;
background:url(files/city06.gif) no-repeat center left;
}

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

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

ul{
text-align:center;
width:100%;
}

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

/* 本体部 */
.post { 
padding:2.5em 0.1em 0.1em 0.1em;
margin-right:auto;
margin-bottom:2em;
margin-left:auto;
width :80%; 
border-top: 5px solid #838383;
border-right: 5px solid #0b0b0b;
border-bottom: 5px solid #000000;
border-left: 5px solid #5b5b5b;
color:#ffffff; /* 指定していない文字色 from at*/
background-image: url(files/city09.gif) ;

text-align:left;
background-color:#333333;
}

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

/* 本体上部 */
.post_auther{
background-color:;
padding:0.5em 2em 0.5em 2em;
font-size:11pt;
position:relative;width:100%;
border-width:;
border-style:;
border-color:;
}

/* 本体上部 IE7用ハック*/
*:first-child+html .post_auther{
position:relative;width:90%;
}

/* No*/
.post_no{
color:orange;
}

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

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

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

/* 時間*/
.post_time{
color:orange;
}

/* 編集*/
.post_edit a{
color:#666666 ! important;
background-color:#333333;
border-top: 2px solid #838383;
border-right: 2px solid #0b0b0b;
border-bottom: 2px solid #000000;
border-left: 2px solid #5b5b5b;
padding:0.2em 0.4em 0.2em 0.4em;
position:absolute; top:-27px; right:62px; 
font-family:"ＭＳ Ｐゴシック","Osaka",sans-serif;
font-weight:bold;
}

/* 編集　カーソル乗ったとき*/
.post_edit a:hover{
color:#9900ff ! important;
background-color:#7fff00;
border-top: 2px solid #c3ff42;
border-right: 2px solid #58d700;
border-bottom: 2px solid #30af00;
border-left: 2px solid #a8ff27;
}

/* 編集　クリックしたとき*/
.post_edit a:active{
color:#ffffff ! important;
background-color:#ff0080;
border-top: 2px solid #910025;
border-right: 2px solid #ff3ab0;
border-bottom: 2px solid #ff60e0;
border-left: 2px solid #bc0050;
}

/* 返信*/
.post_reply a{
color:#666666 ! important;
background-color:#333333;
border-top: 2px solid #838383;
border-right: 2px solid #0b0b0b;
border-bottom: 2px solid #000000;
border-left: 2px solid #5b5b5b;
padding:0.2em 0.4em 0.2em 0.4em; 
position:absolute; top:-27px; right:10px;  
font-family:"ＭＳ Ｐゴシック","Osaka",sans-serif;
font-weight:bold;
}

/* 返信　カーソル乗ったとき*/
.post_reply a:hover{
color:#9900ff ! important;
background-color:#7fff00;
border-top: 2px solid #c3ff42;
border-right: 2px solid #58d700;
border-bottom: 2px solid #30af00;
border-left: 2px solid #a8ff27;
}

/* 返信　クリックしたとき*/
.post_reply a:active{
color:#ffffff ! important;
background-color:#ff0080;
border-top: 2px solid #910025;
border-right: 2px solid #ff3ab0;
border-bottom: 2px solid #ff60e0;
border-left: 2px solid #bc0050;
}

/* タイトル*/
.title{
margin:0.5em 2em 0.5em 2em;
font-size:11pt;
font-weight:bold;
background-color:#333333; 
border-top: 2px solid #000000;
border-right: 2px solid #5b5b5b;
border-bottom: 2px solid #838383;
border-left: 2px solid #0b0b0b;
padding: 5px;
background-image: url();
background-repeat: no-repeat;
background-position: 98% 95%;
clear: both;
}

/* タイトル リンク色*/
.title a{
color:#0066ff;
padding: 3px 2px 3px 24px;
background: url(files/city06.gif) no-repeat left;
display:block;
}

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

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

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

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

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

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

div a span{color:dodgerblue; 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;
margin-left:1px;
}

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

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

body {
background-color: #000000;
background-image: url(files/city01.gif) ;
background-attachment: fixed;
font-size:11pt;
color:#999999;
}

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

/* スクロールバー*/
html, body{
scrollbar-base-color: #333333;
scrollbar-arrow-color: #ff6666;

}

■画像は素材屋さんで借りているものははずしています。自分でさがしてアップして下さい。　　
　

うちで作ったものは以下の4つはダウンロードして使ってください
もちろん自分で用意してもいいよ









------------------------------------------------------------------

詳細


▼画像を使ってるところ　いらない場合はそのままにしといて下さい
　画像を使う場合は　url() となっているので　()の中に画像のアドレスを入れて下さい


/* 新規投稿 */
#write {}部　ここは上部の画像ですサンプルの画像より大きくなると値の変更が必要になると思います
　　　　　　　また新規投稿の文字位置もかわります　わからないときは聞いてください



---------------------------------------------------------------


/* 新規投稿 リンク文字 */
#write a{}部  新規投稿　ロールオーバー風アイコン


/* 新規投稿 　カーソル乗ったとき*/
#write a:hover{}部　新規投稿　ロールオーバー風アイコン


/* タイトル リンク色*/
.title a{}部　タイトル　ロールオーバー風アイコン(新規投稿リンク文字と同じでもいいかも)


/* タイトル リンク色 カーソル乗ったとき*/
.title a:hover{}部　タイトル　ロールオーバー風アイコン



/* 戻りのリンク色*/
#back_link a{}部　戻りのリンク　ロールオーバー風アイコン(新規投稿リンク文字の所と同じでいいと思います)


/* 戻りのリンク　カーソルが乗ったとき*/
#back_link a:hover{}部　戻りのリンク　ロールオーバー風アイコン


city06.gif


city07.gif


を使用



----------------------------------------------------------------

この三箇所は別になくてもいいものですが
飾りということで必要な方は自分で探してアップしてください


* 過去の記事　ページめくり*/
#navigation {}部　ほとんど飾りですが文字画像なんかもいいかもしれません
                  画像の大きさにより数値の変更が必要になります


/* タイトル*/
.title{}部　これも必要ないものです　後部にある猫の画像


/* コメント*/
.post_text{}部　これはちっちゃい人魚のところです


この三箇所は小さな画像を使ってます
ぱたぱたアニメ館のものを主に使わせてもらってます

---------------------------------------------------------

/* 本体部 */
.post {}部

上にのせてるけどもういちど
本体部の背景画像です 
files/city09.gif
 

こちらはダウンロードしてお使い下さい

-----------------------------------------------------------

/* 掲示板全体*/

body {}部　全体の背景画像です　共通で設定して同じの使うときは不要

files/city01.gif
 

こちらはダウンロードしてお使い下さい


------------------------------------------------------------



/* 下部戻りのリンク*/
#back_link{}部　ここは季節ごとに変えたりしてます

特に必要ないです　そのままでもいいし自分で画像をアップするなりして
ください


----------------------------------------------------------

更新履歴 2008年10月18日　作成