メイン

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

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: #1e90ff;
background-image: url(files/ren-s03.gif) ;
background-attachment: fixed;
font-size:11pt;
font-family:"MS UI Gothic","ＭＳ Ｐゴシック";
}

/* ページのスクロールバー */
body , html{
scrollbar-base-color: #1e90ff;
scrollbar-track-color: #00bfff;
scrollbar-arrow-color: #ffccff;
}

/* ページリンク文字 */
a:link {text-decoration:none; color:#0000ff; }
a:visited {text-decoration:none; color:#0000ff; }
a:hover {text-decoration:none; color:#ff00ff; }

/* ヘッダー部分 */

#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:#ffccff;
font-size:200%;
font-weight: bold;
font-family:"Arial Black"；
}

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

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

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

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

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

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

/* 最新の記事 最新のコメント archives categories 前後の記事*/
.link{
font-size :12pt;
color : #ffff00;
letter-spacing : 1px;
line-height :;
border-width : 1px;
border-style : solid;
border-color : blue;
padding:0.5em 0.2em 0.2em 0.2em;
background:url(files/ren-s05.gif);
background-color : #ffd700;
}

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

/*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: #ffd700;
scrollbar-track-color: #ffff00;
scrollbar-arrow-color: #ff00ff;
}

/*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{
font-size:95%;
font-weight: bold;
text-align:center;
background-color :#008000;
border-right:1px solid #666666; 
border-bottom:1px solid #333333;
margin:0.1em 1em 0.1em 1em;
line-height : 1.5em;
background-image: url(files/ren-s04.gif);
}

/* (メニュー部)各リンク */
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() no-repeat left center;
padding: 0.1em 2px 0.1em 20px;

}

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

/* メイン */
#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-width : 1px;
border-style : solid;
border-color : blue;
background:url(files/ren-s02.gif);
background-color:#ffccff;
width:88%;
text-align:left;
}

/* 記事日付 */
.entry_date{
background-image:url(files/ren-s05.gif);
background-color:#ffd700;
color:#ff00ff;
font-weight: bold;
border-right:1px solid #666666; 
border-bottom:1px solid #333333;
padding:;
width:200px;
text-align:center;
}

/* 記事タイトル */
.entry_title{
font-weight:bold;
font-size:115%;
letter-spacing:0.1em;
background-color:#008000; 
padding:5px;
margin: 5px;
background-image:url(files/ren-s04.gif);
border-right:1px solid #666666; 
border-bottom:1px solid #333333;
}

/* 記事タイトル アイコン設定*/
.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;
}

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

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

/* 記事 */
.entry_body{
font-size:107%;
line-height:140%;
color:#1e90ff;
font-weight:;
background-color:#fff0f5; 
background-image: url();
background-repeat: no-repeat;
background-position: 98% 98%;
padding:10px;
border-width: 2px;
border-style: dotted;
border-color: #0000ff;
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() no-repeat left center;
padding-left:20px;
}

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

/* 年別ページ */
#archive_yearlist{
background-image: url(files/ren-s02.gif);
background-color:#ff00ff;
margin:20px;
text-align:left;
}

#archive_yearlist h2{
padding-left:20px;
border-width: 1px;
border-style: solid;
border-color: #0000ff;
margin: 5px;
width:10em;
color:#000080;
}

#archive_yearlist dt{
padding-left:30px;
color:#0000ff;
font-size:14pt;
}

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

#archive_yearlist li{
color:#ff00ff;
border-width: 1px;
border-style: solid;
border-color: #00ffff;
margin-bottom: 4px;
margin-right: 30px;
display:block;
background-color:#ffffff;
padding:4px;
}

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

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

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

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

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

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

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

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

/* コメント部全体の壁紙設定 */
.comment{
background-image: url(files/ren-s05.gif);
background-color:#ffd700;
padding:2px;
border-width: 1px;
border-style: solid;
border-color: #0000ff;
margin-top:0;
margin-right:auto;
margin-bottom:10px;
margin-left:auto;
text-align:left;
width:96%;
}

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

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

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

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

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

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

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

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

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

うちで作ったものは
　　　

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


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



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

ren-s03.gif



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


/* ヘッダー部分 */

#header部

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


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


/* 最新の記事 最新のコメント archives categories 前後の記事*/
.link 部

/* 記事日付 */
.entry_date

/* コメント部全体の壁紙設定 */
.comment


ren-s05.gif



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

/* (メニュー部)各タイトル */
.link_title 部

/* 記事タイトル */
.entry_title

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



ren-s04.gif


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

/* 日記本体 */
.entry 部

/* 年別ページ */
#archive_yearlist


ren-s02.gif


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

■アイコン画像

アイコン画像を使う場合は小さいものを用意してください
でないと修正が必要になります
11x11の物を使いました
うちのはぱたぱたアニメ館のちいさいもの★を使ってます


/* メニューのアイコン設定 */
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

更新履歴
2008年10月26日
/* 名前フォーム部のデザイン */
font-size;11pt;　　→　修正後　font-size:11pt;


2008年10月14日
/* コメント部全体の壁紙設定 */
background-color:#ffd700;
#がぬけていたので追加する


2008年10月13日　作成