メイン

■DIARY　CSS テンプレート006c グレー
資料です

windows版 IE6 firefox2 opera9.6 以外のブラウザには対応してません IE7は持ってないのでわかりませんfirefoxのアドオンの描画でみる程度なのでまともに対応できませんのでよろしく

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

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

/* ページの壁紙や文字の設定 */
body {
background-color: #333333;
background-image: url(files/city01.gif) ;
background-attachment: fixed;
font-size:11pt;
font-family:"MS UI Gothic","ＭＳ Ｐゴシック";
}

/* ページのスクロールバー */
body , html{
scrollbar-base-color: #333333;
scrollbar-track-color: #666666;
scrollbar-arrow-color: darkorange;
}

/* ページリンク文字 */
a:link {text-decoration:none; color:darkseagreen; }
a:visited {text-decoration:none; color:darkseagreen; }
a:hover {text-decoration:none; color:salmon; }

/* ヘッダー部分 */

#header{
padding: 0.5em 1em 330px 1em;
margin-bottom:0.5em;
width:50%;
border-width :;
border-style :;
border-color :;
background:url() no-repeat 0px 200px;
background-color:;
float:right;

}

/* ヘッダー　日記のタイトル */
#site_title {
color:orange;
font-size:200%;
font-weight: bold;
font-family:"Arial Black"；
}

/* ヘッダー　日記の概説 */
#site_info{
margin-bottom:10px;
font-size:100%;
font-weight: bold;
color:aquamarine;
}

/* 戻るリンク */
#back_link li{
display:;
padding-left:0.5em;
}

#back_link a{
font-size:100%;
font-weight: bold;
color:darkseagreen;
}

#back_link a:hover{
font-size:100%;
font-weight: bold;
color: salmon;
}

/* メニュー */
#menu {
float:left;
width:40%;
height:400px;
margin-top:5px;
overflow:auto;
scrollbar-base-color: #333333;
scrollbar-track-color: #666666;
scrollbar-arrow-color: cornflowerblue;
}

/*IE7用CSSハック*/
*:first-child+html #menu {
overflow-y:scroll;
}

/* 最新の記事 最新のコメント archives categories 前後の記事*/
.link{
font-size :12pt;
letter-spacing : 1px;
line-height :;
border-top: 1px solid #000000;
border-right: 1px solid #5b5b5b;
border-bottom: 1px solid #838383;
border-left: 1px solid #0b0b0b;
padding:0.5em 0.2em 0.2em 0.2em;
background:url();
background-color : #333333;
}

/* 最新の記事*/
#latest_articles{
width:;
height:140px;
margin-bottom:10px;
margin-right:5px;
margin-left:5px;
overflow:auto;
scrollbar-base-color: #333333;
scrollbar-track-color: #666666;
scrollbar-arrow-color: plum;
}

/*IE7用CSSハック*/
*:first-child+html #latest_articles {
overflow-y:scroll;
}

/* 最新のコメント*/
#latest_comments{
margin-left:5px;
margin-bottom:10px;
margin-right:5px;
width:;
height:140px;
overflow:auto;
scrollbar-base-color: #333333;
scrollbar-track-color: #666666;
scrollbar-arrow-color: salmon;
}

/*IE7用CSSハック*/
*:first-child+html #latest_comments {
overflow-y:scroll;
}

/* archives*/
#archives{
width:;
margin-bottom:10px;
margin-right:5px;
margin-left:5px;
}

/* categories*/
#categories{
margin-left:5px;
margin-bottom:10px;
margin-right:5px;
width:;
}

/* 前後の記事*/
#neighbors{

width:;
margin-bottom:10px;
margin-right:5px; 
margin-left:5px;
}

/* (メニュー部)各タイトル */
.link_title{
color : darkorange;
font-size:95%;
font-weight: bold;
text-align:center;
background-color :#333333;
border-top: 1px solid #838383;
border-right: 1px solid #0b0b0b;
border-bottom: 1px solid #000000;
border-left: 1px solid #5b5b5b;
margin:0.1em 1em 0.1em 1em;
line-height : 1.5em;
background-image: url();
}

/* (メニュー部)各リンク */
ul{
font-size:90%;
padding:;
margin-left:5px;
list-style-type:none;
width:;
}

#latest_articles ul a ,#latest_comments ul a ,#neighbors ul a ,#categories ul a{
display:block;
width:;
}

li {
padding:0.1em 0em 0.1em 0em;
margin:0em;
}

/* メニューのアイコン設定 */
li a{
background: url(files/city06.gif) no-repeat left center;
padding: 0.1em 2px 0.1em 20px;

}

/* メニューのアイコン設定カーソル乗った時 */
li a:hover {
background: url(files/city07.gif) no-repeat left center;
background-color:#666666;
}

/* メイン */
#main {
margin-right:;
text-align:center;
clear: both;
}

/* 日記本体 */
.entry {
padding: 0.5em;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
letter-spacing : 1px;
line-height : 1.5em;
border-top: 5px solid #838383;
border-right: 5px solid #0b0b0b;
border-bottom: 5px solid #000000;
border-left: 5px solid #5b5b5b;
background:url(files/city08.gif);
background-repeat: no-repeat;
background-position: bottom center;
background-color:#333333;
width:88%;
text-align:left;
}

/* 記事日付 */
.entry_date{
background-image:url();
background-color:;
color:darkgray;
font-weight: bold;
padding:;
width:200px;
text-align:center;
}

/* 記事タイトル */
.entry_title{
font-weight:bold;
font-size:115%;
letter-spacing:0.1em;
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;
margin: 5px 20px 5px 20px;
background-image:url();

}

/* 記事タイトル アイコン設定*/
.entry_title a{
background: url() no-repeat left center;
padding-left:25px;
color:#ffffff !important;
}

/* 記事タイトル マウスON*/
.entry_title a:hover{
background: url() no-repeat left center;
padding-left:25px;
color:#00ff00 !important;
}

/* 記事カテゴリー */
.entry_info{
font-size:80%;
padding-left: 0.5em;
color:darkgray;
text-align:right;
margin-right:20px;

}

/* 記事カテゴリー アイコン設定*/
.entry_info a{
background: url(files/city06.gif) no-repeat left center;
padding-left:20px;
padding-top:7px;
padding-bottom:7px;
}

/* 記事カテゴリー アイコン設定　マウスON時*/
.entry_info a:hover {
background: url(files/city07.gif) no-repeat left center;
background-color:#666666;
}

/* 記事 */
.entry_body{
font-size:107%;
line-height:140%;
color:#666666;
font-weight:;
background-color:#333333; 
background-image: url();
background-repeat: no-repeat;
background-position: 98% 98%;
padding:10px;
border-width:;
border-style:;
border-color:;
margin: 5px 30px 10px 30px;
overflow:auto;
}

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

/* 本体にある記事コメントリンク */
.entry_responses{
font-size:90%;
padding-right:1em;
text-align:right;
}

/* 本体にある記事コメントリンクアイコン設定*/
.entry_responses a{
background: url(files/city06.gif) no-repeat left center;
padding-left:20px;
}

/* 本体にある記事コメントリンクアイコン設定　マウスON時*/
.entry_responses a:hover {
background: url(files/city07.gif) no-repeat left center;
background-color:#666666;
}

/* 年別ページ */
#archive_yearlist{
background-image: url();
background-color:#333333;
border-top: 5px solid #838383;
border-right: 5px solid #0b0b0b;
border-bottom: 5px solid #000000;
border-left: 5px solid #5b5b5b;
width:80%;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}

#archive_yearlist h2{
padding-left:20px;
border-width: 1px;
border-style: solid;
border-color: #666666;
margin: 5px;
width:10em;
color: darkorange;
text-align:left;
}

#archive_yearlist dt{
padding-left:30px;
color:greenyellow;
font-size:14pt;
text-align:left;
}

#archive_yearlist ul{
padding-left:40px;
color:violet;
font-size:11pt;
text-align:left;
}

#archive_yearlist li{
color:violet;
border-width: 1px;
border-style: solid;
border-color: #000000;
margin-bottom: 4px;
margin-right: 30px;
display:block;
background-color:#333333;
padding:4px;
}

/* 月表示ページの何年何月の記事という文字 */
#main h2{color:#ff6600;}

/* 罫線 */
hr {
 display: none;
}

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

/* コメント(件数)という文字 */
.comment_title {color:#ffffff;}

/* コメントフォーム部 */
.comment_form {
margin:2px 5px 1em 5px;
background-image: url(files/city01.gif); 
background-color:#333333;
padding:1em;
}

/* フォーム部(名前)の色とサイズ */
#poster_name{
display: block;
color:#ffff00;
font-size:12pt;
}

/* 名前フォーム部のデザイン */
#poster_name input{
border-style:solid; 
border-width:1px; 
border-color:#00ff00; 
color:#cc99ff; 
background:#333333;
width:10em;
font-size:11pt;
}

/* フォーム部(コメント)の色とサイズ */
#comment_field{
display: inline;
color:#00ff00;
font-size:11pt;
}

/* コメントフォーム部のデザイン */
#comment_field input {
width:28em;
border-style:solid;
border-width:1px;
border-color: #9900ff;
background:#333333;
color:#ffccff;
font-size:11pt;
}

/* 投稿ボタンのデザイン */
input {
border-style:double;
border-width:3px;
border-color: #ffff00;
background:#333333;
color:#ffff00;
}

/* コメント部全体の壁紙設定 */
.comment{
background-image: url();
background-color:#333333;
padding:2px;
border-top: 5px solid #838383;
border-right: 5px solid #0b0b0b;
border-bottom: 5px solid #000000;
border-left: 5px solid #5b5b5b;
margin-top:0;
margin-right:auto;
margin-bottom:10px;
margin-left:auto;
text-align:left;
width:88%;
}

/* 各コメント部 */
.comment_element {
padding: 0.5em 0.5em 0.5em 0.5em;
margin:0 5px 1em 5px;
background-color:;
border-width: 1px;
border-style: dotted;
border-color: #000000;
}

/* 各コメント投稿者 */
.comment_auther{font-size:10pt;}

/* コメント文字部 */
.comment_body {color:#666666;}

/* 名前フォームとコメントフォームのすき間設定 */
label{margin-bottom:5px;}

/* これ以前の記事リンク */
.link_older {
font-size:12pt;
background-color:;
font-weight: 600;
padding:1em;
}

/* これ以前の記事リンク アイコン設定*/
.link_older a{
background: url(files/city06.gif) no-repeat left center;
padding-left:20px;
}

/* これ以前の記事リンク アイコン設定　マウスON時*/
.link_older a:hover {
background: url(/files/city07.gif) no-repeat left center;
background-color:#666666;
}

/*ページめくり */
.page_link{
font-size:12pt;
margin-left10px;
color:#ff6600;
font-weight: bold;
}

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

うちで作ったものは
　　　

の4つです　使う場合はダウンロードしてください


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



/* ページの壁紙や文字の設定 */
body

/* コメントフォーム部 */
.comment_form



city01.gif



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


/* ヘッダー部分 */

#header部

こちらは自分で用意してください　大きさによっては調整が難しいです
ここで使ってるサイズは256x192です


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

■アイコン画像

city06.gif
　

city07.gif


アイコン画像を使う場合は小さいものを用意してください
でないと修正が必要になります



/* メニューのアイコン設定 */
li a

/* メニューのアイコン設定カーソル乗った時 */
li a:hover

/* 記事カテゴリー アイコン設定*/
.entry_info a

/* 記事カテゴリー アイコン設定　マウスON時*/
.entry_info a:hover

/* 本体にある記事コメントリンクアイコン設定*/
.entry_responses a

/* 本体にある記事コメントリンクアイコン設定　マウスON時*/
.entry_responses a:hover

/* これ以前の記事リンク アイコン設定*/
.link_older a

/* これ以前の記事リンク アイコン設定　マウスON時*/
.link_older a:hover

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

■こちらはただのかざりです　
ぱたぱたアニメ館のちいさいものを使ってます

画像を使う場合は小さいものを用意してください


/* 記事タイトル アイコン設定*/
.entry_title a

/* 記事タイトル マウスON*/
.entry_title a:hover

/* 記事 */
.entry_body


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

/* 日記本体 */
.entry 


city08.gif


いちよ載せておきます
別のもの用意してアップするのもいいでしょう

全体の背景にする場合は

background-repeat: no-repeat;
background-position: bottom center;

この部分を削除してください

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

更新履歴


2008年10月16日　作成