2004年11月01日

カスタマイズCSS確認2

大分追加が出ましたので、追加分も含めてCSSのまとめを記しておきたいと思います。
(Window's XPで確認したものですので、それ以外のOSでは多少違いが出てしまうかもしれません。
また追加が出ましたら、書き加えていきたいと思います)

●リンクに関して。
リンクは個別に設定されている場合はその場所がリンクの設定場所になります。
個別の設定がない場合は、必ずどこかで一括設定されています。
一括設定されている場合は、下記の2ヵ所の可能性ありかと思われます。
(その他の場合もあるかもしれないので、色々いじってみて確認してみて下さい)

a:link{
a:visited{
a:hover{

.blogbody a:link{
.blogbody a:visited{
.blogbody a:hover{


@charset "EUC-JP";

■Blog全体
body{
width:100%; ←Blog全体の横幅
height:100%; ←Blog全体の高さ
color:#aaddff; ←本文・毎日記タイトル・カレンダー日付と曜日・「この記事へのトラックバックURL」
          ・コメント書込欄の左のタイトルの文字色
background:#002233 url('http://blog.livedoor.jp/modacyoki/81fcec5d.bmp'); ←Blog全体の背景の色・画像
                                                 ( )内は画像のアドレス
background-repeat:repeat; ←背景の並べ方(repeat=敷き詰める、repeat-x=横方向のみ並べる、
                      repeat-y=縦方向のみ並べる、no-repeat=ひとつだけ表示する)
background-attachment:fixed; ←スクロールバーを動かした時の背景の動作
                         (scroll=一緒にスクロールする、fixed=スクロールしない・背景固定)
margin:15; ←Blog全体と外側との余白
padding:0px; ←Blog全体の内側の余白
text-align:center; ←テキストの位置
           (left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
scrollbar-face-color:#c7e59f; ←Blog全体のスクロールバーの色(表面)
scrollbar-arrow-color:#8fc55f; ←Blog全体のスクロールバーの色(矢印)
scrollbar-highlight-color:#fff; ←Blog全体のスクロールバーの色(ハイライト)
scrollbar-shadow-color:#8fc55f; ←Blog全体の右側のスクロールバーの色(影)
scrollbar-base-color:#c7e59f; ←Blog全体の右側のスクロールバーの色(ベース)
scrollbar-3dlight-color:#8fc55f; ←Blog全体ののスクロールバーの色(左端と上端)
scrollbar-darkshadow-color:#8fc55f; ←Blog全体のスクロールバーの色(右端と下端)
}

※ここで設定するスクロールバーは、Blog内の他(コメント書込欄など)で別に設定している場合は、
 Blog全体の右側(ブラウザ)の設定のみとなります。
※スクロールバーはブラウザによっては設定されないものもあります。

■毎日記本文(文章)内のリンク文字とプラグイン(サイドバー)全体
   (a.asideなど、別のところで細かなリンク設定がされている場合は最小限のリンク設定になります)
a{color:#8f6d00;text-decoration:none;} ←毎日記本文(文章)内のリンク文字色・テキスト装飾
a:link{color:#8f6d00;text-decoration:none;} ←プラグイン全てのリンク文字色・テキスト装飾
a:visited{text-decoration:none;} ←プラグイン全てのリンク先訪問後のリンク文字色・テキスト装飾
a:active{}
a:hover{color:#ffdd00;text-decoration:none;} ←プラグイン全てのリンクポイント時の文字色とテキスト装飾

■本文全体とプラグイン(サイドバー)全体(続くの先のページも共通です)
#container{
width:740px; ←全体の横幅
background-color:#ffc920; ←背景色
margin:0 auto 0 auto; ←全体と外側との余白
text-align:left; ←テキストの位置
           (left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
}

■Blogタイトル全体
#banner,#subbanner{
background:#000a1b url('http://blog.livedoor.jp/modacyoki/f298ec68.jpg') no-repeat scroll; 
                           ←Blogタイトル全体の背景色・背景画像(その後ろは画像の設定方法)
border:3px dotted #183a4b; ←Blogタイトル全体の下の罫線の太さ・種類・色
                   (種類 none=線無し、dotted=点線、dashed=粗い点線、solid=実線、
                    double=二重線、groove=谷線、ridge=山線、inset=内線、outset=外線)
height:150px; ←Blogタイトル全体の高さ
}                   

■Blogタイトルのリンク
#banner a{color:#ffdd00;text-decoration:none;}
#banner a:link{color:#ffdd00;text-decoration:none;} ←Blogタイトルのリンク文字色・テキスト装飾
#banner a:visited{color:#ffdd00;text-decoration:none;} ←Blogタイトルのリンク先訪問後のリンク文字色・テキスト装飾
#banner a:active{}
#banner a:hover{color:#8f6d00;text-decoration:none;} ←Blogタイトルのリンクポイント時の文字色・テキスト装飾

■Blogタイトル下の説明文のリンク
#subbanner a{color:#fff;text-decoration:none;}
#subbanner a:link{color:#ffdd00;text-decoration:none;} ←Blogタイトル下の説明文のリンク文字色・テキスト装飾
#subbanner a:visited{color:#ffdd00;text-decoration:none;} ←Blogタイトル下の説明文のリンク先訪問後のリンク文字色・テキスト装飾
#subbanner a:active{}
#subbanner a:hover{color:#8f6d00;text-decoration:none;} ←Blogタイトル下の説明文のリンクポイント時の文字色・テキスト装飾

h1,h2,h3{margin:0;padding:0;}

■Blogタイトル
.blogtitle{
color:#fff; ←リンクしていない場合の文字色
font-family:'Arial','Verdana',"MS ゴシック",'Osaka‐等幅'; ←文字の種類
font-size:24px; ←文字の大きさ
font-weight:bold; ←文字の太さ(normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900)
text-decoration:none; ←リンクしていない場合のテキスト装飾
text-align:left; ←テキストの位置
           (left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
padding:40px 0 5px 20px; ←Blogタイトル名内の余白(左から順に、上右下左)
}

■Blogタイトルの下の説明文
.description{
color:#717159; ←文字色
font-size:small; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
font-weight:bold; ←文字の太さ(normal=規定値), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 )
padding:0 0 5px 20px; ←説明文内の余白(左から順に、上右下左)
border-bottom:1px solid #000a1b; ←説明文の下の罫線の太さ・種類・色
                     (種類 none=線無し、dotted=点線、dashed=粗い点線、solid=実線、
                      double=二重線、groove=谷線、ridge=山線、inset=内線、outset=外線)
}

■本文全体(日付・毎日記タイトル・毎日記本文)
#content{
width:70%; ←本文全体の横の幅(pxで設定する事も可能)
margin:0 180px 0 183px; ←本文全体と外側の余白
float:right; ←本文全体の位置(right=右側、left=左側)
}

■プラグイン(サイドバー)全体
#links{
width:27%; ←プラグイン全体の横の幅(pxで設定する事も可能)
padding:25px 0 50px 20px; ←プラグイン全体と外の余白(左から順に、上右下左)
margin:10px; ←プラグイン全体と外側の余白
text-align:center; ←プラグイン個々の位置
           (left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
float:left; ←プラグイン全体の位置(right=右側、left=左側)
}

■Blog本文全体の余白(日付・毎日記タイトル・本文)
.blog{
padding:20px 20px 25px 15px; ←Blog本文全体内の余白(左から順に、上右下左)
margin:10px 0px 0px 5px; ←Blog本文全体と外側の余白(左から順に、上右下左)
}

■毎日記日付
.date{
color:#005273; ←文字色
font-size:x-small; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
font-weight:bold; ←文字の太さ(normal=規定値, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 )
background:#78785e url('http://blog.livedoor.jp/modacyoki2/e50c4fb8.gif') no-repeat scroll 5px 40%;
   ←毎日記日付の背景色・画像(その後ろは画像の設定)
padding:5px 0 3px 10px; ←毎日記日付内の余白(左から順に、上右下左)
margin:0px 0px 0px 0px; ←毎日記日付と外側の余白
border:1px solid #000a1b; ←毎日記日付の罫線の太さ・種類・色
                   (種類 none=線無し、dotted=点線、dashed=粗い点線、solid=実線、
                    double=二重線、groove=谷線、ridge=山線、inset=内線、outset=外線)
text-align:left; ←テキストの位置
           (left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
}

■毎日記タイトル名
.title{
color:#c2ff00; ←文字色
font-size:x-small; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large)
                          もしくは12pxのようにpxで設定)
font-weight:bold; ←文字の太さ(normal=規定値, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 )
height:20px; ←毎日記タイトルの高さ
padding:0 0 2px 5px; ←毎日記タイトル内の余白(左から順に、上右下左)
margin:0px 0px 0px 0px; ←毎日記タイトルと外側の余白
border:2px solid #000a1b; ←毎日記タイトルの罫線の太さ・種類・色(この場合は、上下左右一括指定)
                    (種類 none=線無し、dotted=点線、dashed=粗い点線、solid=実線、
                     double=二重線、groove=谷線、ridge=山線、inset=内線、outset=外線)
background:#78785e url('http://blog.livedoor.jp/modacyoki2/e50c4fb8.gif') no-repeat scroll 5px 40%;
   ←毎日記タイトルの背景色・画像(その後ろは画像の設定)
}

■毎日記本文
.blogbody{
font-size:x-small; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
line-height:135%; ←テキストの高さ【行間】(毎日記タイトルを含む)
margin:0px 0px 10px 0px; ←本文内の余白(左から順に、上右下左)
border-style:dotted; ←本文の罫線(枠線)の種類(none=線無し、dotted=点線、dashed=粗い点線、solid=実線、
                        double=二重線、groove=谷線、ridge=山線、inset=内線、outset=外線)
border-width:2px; ←本文の罫線(枠線)の太さ(thin=細線、medium=規定値:中太線、thick=太線、もしくは1pxのように数字で設定)
border-color:#000a1b; ←本文の罫線(枠線)の色
color:#c0c09e; ←本文の文字色
background:#505036; ←本文の背景色
padding:5px 5px 5px 5px; 本文内の余白(左から順に、上右下左)
}

■毎日記本文内のリンク
   (個別設定がされていない場合は、「このBlogのトップへ」「前の記事」「次の記事」「続きを読む」を含む場合もあります)
.blogbody a,
.blogbody a:link{color:#a16e08;text-decoration:none;background-color:#ffe148;border:1px solid #ffe148;}
           ←毎日記本文内のリンク文字色・文字装飾・背景色・枠線の太さと種類と色
.blogbody a:visited{color:#a16e08;text-decoration:none;background-color:#ffe148;border:1px solid #ffe148;}
           ←毎日記本文内のリンク先訪問後のリンク文字色・文字装飾・背景色・枠線の太さと種類と色
.blogbody a:active{}
.blogbody a:hover{color:#ffffff;text-decoration:none;background-color:#b78100;border:1px solid #b78100;} 
           ←毎日記本文内のリンクポイント時の文字色・文字装飾・背景色・枠線の太さと種類と色 

■毎日記本文(毎日記タイトル・毎日記本文・Posted〜を合わせた部分)
.main{
margin:20px 15px 15px 15px; ←本文内の余白(左から順に、上右下左)
}
■「続きを読む」
.main-continues{font-size:12px;} ←文字の大きさ

■「続きを読む」のリンク
(個別の設定をしていない場合は毎日記本文右下「Posted by 時間・コメント・トラックバック・カテゴリー名」「このページの上へ」を含む場合もあります)
a.acontinues{color:#a16e08;text-decoration:none;background-color:#ffe148;border:1px solid #ffe148;}
a.acontinues:link{color:#a16e08;text-decoration:none;background-color:#ffe148;border:1px solid #ffe148;}
       ←リンクの文字色・テキスト装飾・背景色・枠線の太さと種類と色
a.acontinues:visited{color:#a16e08;text-decoration:none;background-color:#ffe148;border:1px solid #ffe148;}
       ←リンク先訪問後の文字色・テキスト装飾・背景色・枠線の太さと種類と色
a.acontinues:active{}
a.acontinues:hover{color:#ffffff;text-decoration:none;background-color:#b78100;border:1px solid #b78100;}
       ←リンクポイント時の文字色・テキスト装飾・背景色・枠線の太さと種類と色

■毎日記本文下の「Posted by 〜」
.posted{
color:#ccc; ←文字色と縦の区切り線の色
font-size:xx-small;文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
margin:0px 0px 25px 0px; ←毎日記本文下の「Posted by 〜」と外側の余白
padding:30px 0px 0px 0px; ←毎日記本文下の「Posted by 〜」内の余白
text-align:right; ←文字の位置(left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
}

■毎日記本文下の「Posted by 〜」のリンク(コメント本文下のリンクも含む)
a.aposted{color:#a16e08;text-decoration:none;font-weight:normal;background-color:#e7b110;border:1px solid #e7b110;}
       ←リンクの文字色・テキスト装飾・背景色・枠線の太さと種類と色
a.aposted:link{color:#a16e08;text-decoration:none;font-weight:normal;background-color:#e7b110;border:1px solid #e7b110;}
a.aposted:visited{#color:#a16e08;text-decoration:none;font-weight:normal;background-color:#e7b110;border:1px solid #e7b110;}
       ←リンク先訪問後の文字色・テキスト装飾・背景色・枠線の太さと種類と色
a.aposted:active{}
a.aposted:hover{color:#ffffff;text-decoration:none;font-weight:normal;background-color:#b78100;border:1px solid #b78100;}
       ←リンクポイント時の文字色・テキスト装飾・背景色・枠線の太さと種類と色

■「このBlogのトップへ」「前の記事」「次の記事」
.menu{
color:#ccc; ←文字の間の縦線の色
font-size:xx-small; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
text-align:right; ←文字の位置(left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
}

■「このBlogのトップへ」「前の記事」「次の記事」のリンク
a.amenu{color:#a16e08;text-decoration:none;font-weight:normal;background-color:#e7b110;border:1px solid #e7b110;}
a.amenu:link{color:#a16e08;text-decoration:none;font-weight:normal;background-color:#e7b110;border:1px solid #e7b110;}
       ←リンクの文字色・テキスト装飾・背景色・枠線の太さと種類と色
a.amenu:visited{tcolor:#a16e08;ext-decoration:none;font-weight:normal;background-color:#e7b110;border:1px solid #e7b110;}
       ←リンク先訪問後の文字色・テキスト装飾・背景色・枠線の太さと種類と色
a.amenu:active{font-weight:bold;}
a.amenu:hover{color:#ffffff;text-decoration:none;font-weight:normal;background-color:#b78100;border:1px solid #b78100;}
       ←リンクポイント時の文字色・テキスト装飾・背景色・枠線の太さと種類と色

■「この記事へのトラックバックURL」の下のアドレス
.trackback-url{
color:#008080; ←文字色
font-size:x-small; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
font-weight:bold; ←文字の太さ(normal=規定値, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 )
margin:20px 0px 25px 40px; ←アドレスと外側の余白(左から順に、上右下左)
}

■「この記事へのコメント」「この記事へのトラックバック」
.comments-head{
color:#dfd15e; ←文字色
font-size:x-small; ←文字の大きさ
font-weight:bold; ←文字の装飾
padding:0 0 2px 5px; ←内側の余白
border:2px solid #000a1b; ←「この記事へのコメント・トラックバック」の罫線の太さ・種類・色
}

罫線の種類(種類 none=線無し、dotted=点線、dashed=粗い点線、solid=実線、
           double=二重線、groove=谷線、ridge=山線、inset=内線、outset=外線)

■コメント本文
.comments-body{
color:#505036; ←文字色
font-size:x-small; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
padding:5px; ←コメント本文と外側の余白(この場合は一括設定)
margin:20px 0 15px 15px; ←コメント本文内の余白(左から順に、上右下左)
border:2px solid #707056; ←罫線の太さ・種類・色
background:#808066; ←背景色(正確にはBackground-colorです)
}

罫線の種類(種類 none=線無し、dotted=点線、dashed=粗い点線、solid=実線、
           double=二重線、groove=谷線、ridge=山線、inset=内線、outset=外線)

■コメント本文右下の投稿者名等
.comments-post {
color:#ccc; ←文字色(リンク文字を除く)
font-size:xx-small; ←文字の大きさ(リンク文字を除く)
      (左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、もしくは12pxのようにpxで設定)
margin:0 0 25px 0; ←コメント本文右下の投稿者名等と外側の余白(左から順に、上右下左)
text-align:right; ←テキストの位置(left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
}

■トラックバック本文
.trackback-body{
color:#505036; ←文字色
font-size:x-small; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
padding:5px; ←トラックバック本文内の余白(この場合は上右下左一括設定)
margin:20px 0 15px 15px; ←トラックバック本文と外側の余白(左から順に、上右下左)
border:2px solid #707056; ←トラックバック本文周りの罫線の太さ・種類・色
background:#808066; ←背景色(正確にはBackground-colorです)
}

罫線の種類(種類 none=線無し、dotted=点線、dashed=粗い点線、solid=実線、
           double=二重線、groove=谷線、ridge=山線、inset=内線、outset=外線)

■トラックバック右下の投稿者名等
.trackback-post{
color:#ccc; ←文字色(リンク文字を除く)
font-size:xx-small; ←文字の大きさ(リンク文字を除く)
      (左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、もしくは12pxのようにpxで設定)
margin:0px 0px 25px 0px; ←トラックバック右下の投稿者名等と外側の余白(左から順に、上右下左)
text-align:right; ←テキストの位置(left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
}

■トラックバック右下の投稿者タイトル名のリンク
a.atrackback-post{color:#a16e08;text-decoration:none;font-weight:normal;background-color:#e7b110;border:1px solid #e7b110;}
a.atrackback-post:link{color:#a16e08;text-decoration:none;font-weight:normal;background-color:#e7b110;border:1px solid #e7b110;}
         ←リンク文字色・テキスト装飾・文字の太さ・背景色・枠線の太さと種類と色
a.atrackback-post:visited{color:#a16e08;text-decoration:none;font-weight:normal;background-color:#e7b110;border:1px solid #e7b110;}
         ←リンク先訪問後のリンク文字色・テキスト装飾・文字の太さ・背景色・枠線の太さと種類と色
a.atrackback-post:active{}
a.atrackback-post:hover{color:#ffffff;text-decoration:none;font-weight:normal;background-color:#b78100;border:1px solid #b78100;}
         ←リンクポイント時のリンク文字色・テキスト装飾・文字の太さ・背景色・枠線の太さと種類と色

■コメント書込欄(全体)
table.form{width:705px;color:#ffffff;font-size:12pxl;margin:25px 15px 0px 15px;background-color:#e7b110;border:5px solid #e7b110;}
  ←コメント書き込み欄の横幅・文字色・文字の大きさ・外側との余白・背景色・罫線の太さと種類と色

■コメント書込欄左のタイトル(「名前・メール・URL・コメント」の文字)
label {
color:#895600; ←文字色
font-size:x-small; ←文字の大きさ(xx-small, x-small, small, medium=規定値, large, x-large, xx-large、
                          もしくは12pxのようにpxで設定)
font-weight:bold; ←文字の太さ(normal=規定値), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 )
}

■コメント書込欄
#author{width:200px;border:1px solid #990;color:#fff;background:#909076;} 
   ←コメント書込欄「名前」テーブルの大きさ、罫線の太さ・種類・色、文字色、背景色
#email{width:200px;border:1px solid #990;color:#fff;background:#909076;}
   ←コメント書込欄「メール」テーブルの大きさ、罫線の太さ・種類・色、文字色、背景色
#url{width:200px;border:1px solid #990;color:#fff;background:#909076;}
   ←コメント書込欄「URL」テーブルの大きさ、罫線の太さ・種類・色、文字色、背景色
#text{width:500px;height:200px;border:1px solid #990;color:#fff;background:#909076;
scrollbar-face-color:#909076;
scrollbar-arrow-color:#707056;
scrollbar-highlight-color:#707056;
scrollbar-shadow-color:#707056;
scrollbar-base-color:#909076;
scrollbar-3dlight-color:#707056;
scrollbar-darkshadow-color:#707056;}
   ←コメント書込欄「コメント」テーブルの大きさ、罫線の太さ・種類・色、文字色、背景色、スクロールバーの色

罫線の太さ(thin=細線、medium=規定値:中太線、thick=太線、もしくは1pxのように数字で設定)
罫線の種類(種類 none=線無し、dotted=点線、dashed=粗い点線、solid=実線、double=二重線、groove=谷線、
            ridge=山線、inset=内線、outset=外線)

■「このページの上へ▲」
.pagetop{
color:#ccc; ←「このページの上へ▲」のリンクしていない時の文字色
font-size:xx-small; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
margin:0px 0px 25px 0px; ←「このページの上へ▲」の余白(左から順に、上右下左)
text-align:right; ←テキストの位置(left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
}

■カレンダータイトル(年月)
.calendarhead{
color:#008080; ←文字色
font-size:xx-small; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
font-weight:bold; ←文字の太さ(normal=規定値, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 )
letter-spacing:5px; ←文字間のスペース
padding:5px 5px 5px 5px; ←カレンダータイトル内の余白
margin:0px 0px 10px 0px; ←カレンダータイトルと外側の余白(左から順に、上右下左)
border-bottom:5px solid #ffffff; ←枠線の太さ・種類・文字色
background-color:#6d7e28; ←背景色
text-align:center; ←テキストの位置(left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
}

罫線の太さ(thin=細線、medium=規定値:中太線、thick=太線、もしくは1pxのように数字で設定)
罫線の種類(種類 none=線無し、dotted=点線、dashed=粗い点線、solid=実線、double=二重線、groove=谷線、
            ridge=山線、inset=内線、outset=外線)

■カレンダーテーブル
.calendartable{
width:100%; ←テーブルの横幅
margin:0 0 10 0; ←テーブルと外側の余白(左から順に、上右下左)
padding:0 3px 8px 3px; ←テーブル内の余白(左から順に、上右下左)
border:7px solid #e7b110; ←枠線の太さ・種類・色
background:#304016; ←テーブルの背景色(正確にはBackground-colorです)
text-align:center; ←日付の位置
}

■カレンダー曜日
.calendarweek{
color:#895600; ←文字色
font-size:10px; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
font-weight:normal; ←文字の太さ(normal=規定値, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 )
position:center; ←文字の位置
}


.calendarwd{}


.calendard{
empty-cells:show;}

カレンダー日付のリンクの背景色■
.calendardbg{background-color:#ffe148;} ←背景色

■カレンダー日付
.calendar{
color:#a16e08; ←文字色(リンク文字以外)
font-size:10px;; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
font-weight:normal; ←文字の太さ(normal=規定値, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 )
position:center; ←文字の位置
}

■カレンダー日付のリンク
a.acalendar{color:#a16e08;text-decoration:none;font-weight:normal;}
a.acalendar:link{color:#a16e08;text-decoration:none;font-weight:normal;} ←リンク文字色・テキスト装飾・文字の太さ
a.acalendar:visited{color:#a16e08;text-decoration:none;font-weight:normal;} ←リンク先訪問後のリンク文字色・テキスト装飾・文字の太さ
a.acalendar:active{}
a.acalendar:hover{color:#b78100;text-decoration:none;font-weight:normal;background-color:#ffffff;}
                  ←リンクポイント時のリンク文字色・テキスト装飾・文字の太さ・背景色

■プラグイン(サイドバー)本文全体
.side{
font-size:xx-small; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
margin:0px 0px 10px 0px; ←プラグイン本文と外の余白(左から順に、上右下左)
border-top:2px solid #000a1b dotted; ←罫線(上)の太さ・色・種類
border-right:2px solid #000a1b; ←罫線(右)の太さ・色・(種類)
border-bottom:2px solid #000a1b; ←罫線(下)の太さ・色・(種類)
border-left:2px solid #000a1b; ←罫線(左)の太さ・色・(種類)
padding:5px; ←プラグイン本文内の余白(左から順に、上右下左)
background:#002233; ←背景色
text-align:left; ←テキストの位置(left=左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
}

罫線の種類(種類 none=線無し、dotted=点線、dashed=粗い点線、solid=実線、
           double=二重線、groove=谷線、ridge=山線、inset=内線、outset=外線)
※bottom、left、rightもtopのように一番最後に種類を設定する事が出来ます。

■プラグインタイトル(サイドバータイトル)
.sidetitle{
color:#005273; ←文字色
font-size:xx-small; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
font-weight:bold; ←文字の太さ(normal=規定値, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 )
letter-spacing:5px; ←文字間のスペース
height:19px; ←高さ
padding:5px; ←プラグインタイトル内の余白(左から順に、上右下左)
border:1px solid #000a1b; ←罫線の太さ・種類・色
background:#000a1b; ←背景色
text-align:center; ←テキストの位置(left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
}

罫線の種類(種類 none=線無し、dotted=点線、dashed=粗い点線、solid=実線、
           double=二重線、groove=谷線、ridge=山線、inset=内線、outset=外線)

■プラグイン(サイドバー)本文
.sidebody{
line-height:135%; ←行間の余白
border:7px solid #e7b110; ←罫線の太さ・種類・色
background-image:url ('http://blog.livedoor.jp/modacyoki2/e86fe7b8.gif'); ←背景画像の設定
background-repeat:no-repeat; ←背景画像を並べるかどうかの設定
background-position:left center; ←背景画像の位置
margin:auto auto 4px 2px; ←本文と外側の余白(左から順に、上右下左)
padding:0 0 0 13px; ←本文内の余白(左から順に、上右下左)
text-align:left; ←テキストの位置
}

■プラグイン(サイドバー)本文のリンク
a.aside{color:#c18e28;text-decoration:none;}
a.aside:link{color:#c18e28;text-decoration:none;} ←リンク文字色・テキスト装飾
a.aside:visited{color:#c18e28;text-decoration:none;} ←リンク先訪問後のリンク文字・テキスト装飾
a.aside:hover{color:#895600;text-decoration:none;} ←リンクポイント時のリンク文字色・テキスト装飾

■プロフィール・画像
.photo{text-align:center;} ←画像の位置

■プロフィール・ニックネーム
.nickname{color:#a16e08;font-size:10px;font-weight:bold;margin:10px 0px 10px 0px;}
                     ←文字色・文字の大きさ・文字の太さ・外側との余白

■プロフィール・メッセージ
.message{
color:#a16e08; ←文字色
font-size:10px; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
}

■プラグイン(サイドバー)「株価」
.quotetable{background:#002233;} ←テーブルの枠線色(.quoteでbackground-colorを設定していない場合は背景色)
.quote{color:#fff;font-size:xx-small;padding:3px;background:#000a1b;} ←文字色・文字の大きさ・内側の余白・背景色

文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、もしくは12pxのようにpxで設定)

■プラグイン(サイドバー)「Blogtimes」
.blogtimes{margin:0px 0px 10px 0px;text-align:center;background:#393931;}
   ←プラグイン「Blogtimes」全体の余白・テキストの位置・背景色(中の細かい設定は「プラグインの設定」で出来ます)

テキストの位置(left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)

■プラグイン(サイドバー)一番下の「livedoor Blog」バナー
.powered{
margin:0px 0px 10px 0px; ←バナーの余白(左から順に、上右下左)
text-align:center; ←バナーの位置(left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
}

■プラグイン(サイドバー)一番下の「Syndicate this site (XML) 」
.syndicate{
font-size:xx-small; ←文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
border:1px solid #ffcd00; ←罫線の太さ・種類・色
background:#304016; ←背景色(正確にはBackground-colorです)
text-align:center; ←テキストの位置(left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
}

罫線の種類(種類 none=線無し、dotted=点線、dashed=粗い点線、solid=実線、double=二重線、groove=谷線、
            ridge=山線、inset=内線、outset=外線)


■毎日記本文内にテキストボックスを設定
(CSSを設定した後、毎日記本文内の文章の中で、テキストボックスで囲みたい部分の前後に
<blockquote>文章</blockquote>を書き加える必要があります)

blockquote{
width:auto; ←ボックスの横幅(pxや%、auto等で設定できます)
color:#333; ←ボックス内の文字色
font-size:12px; ←ボックス内の文字の大きさ
line-height:150%; ←行間
padding:10px; ←ボックス内の余白
margin:5px 20px 5px 10px; ←ボックスの外の余白
border:2px solid #000; ←ボックスの罫線の太さ、種類、色
罫線の種類(種類 none=線無し、dotted=点線、dashed=粗い点線、solid=実線、double=二重線、groove=谷線、
            ridge=山線、inset=内線、outset=外線)
background:#f8f8ff; ←ボックス内の背景色
}


pre{
font-size: 12px;
line-height:1.2em;
border:1px solid #aaa;
background:#eee;
padding:0.5em;
}

■プラグインの一番下「このBlogをチェッカーズに追加」
.checkers{
font-size:xx-small; ←「このBlogをチェッカーズに追加」の文字の大きさ
     文字の大きさ(左から小さい順に、xx-small、x-small、small、medium、large、x-large、xx-large、
                          もしくは12pxのようにpxで設定)
margin-top:10px; ←「このBlogをチェッカーズに追加」の上の余白(左下右も設定可能)
text-align:center; ←「このBlogをチェッカーズに追加」の位置
           (left=規定値:左寄せ、right=右寄せ、center=センタリング、justify=両端揃え)
}



 ■【堀江貴文・ホリエモンもオススメ!】 パソコン教室!397時間動画パソコン教室DVD4枚組!
   ホームページ作成、オフィス(ワード、エクセル、パワーポイント、アクセス)2003/2007、Photoshop、Illustrator、Dreamweaverなど
   29ジャンルが自宅で学べます!
 ■離婚大全集〜圧倒的有利に離婚する方法〜
   離婚経験者の専門家が、27冊の書籍やテレビでは語れない裏ワザがここに。
 ■運動なし!代謝を高めて無理なくやせるDLダイエットサポート 太らない身体が目標!
 ■【15秒筋トレ】自宅でお金をかけない肉体改造! 目標はゴリマッチョ?細マッチョ?
 ■1,353人のメガネ使用者がわずか3日で視力が1.0に!!見える!驚異の視力回復法 自宅で簡単に視力アップ!
 ■【ホリエモンブログ】で紹介されました!【せどり】でリッチ☆に!最強せどりツール【せどリッチforCD】
 ■ダウンロード販売と人と人をつなぐコミュニティ・コマースのインフォカート
 ■引っ越しを考えている方必見!すごいっ!
  ・全国賃貸情報【アパマンショップ】

  ・引越し一括見積もりサイトの決定版!【引越大手比較.com】

 ■ロリポップサーバーのドメインが65種類 → 85種類に!!初心者でも安心なサービスがあります♪

 ■ ダイエット商品人気ランキング
  この夏はみんなのオススメダイエットにチャレンジ!
 ■ラブコスメティックすごいっ!
  人に言えない身体の悩みをすっきり解決しましょう♪

よろしければ人気blogランキングにご協力を!

この記事へのトラックバックURL

  迷惑トラックバック対策のため、トラックバックはこちらでチェックした後、アップさせて頂いておりますので、ご了承下さい。

この記事へのトラックバック
これからはBlogに手を加えるごとに記録をつけようと思います。 まずはみんながやっている3カラムにしてみました('-'*)♪ 3カラムにする手順は小春日和の陽射しの中でさんのページを参照しました。 多分3カラムの手順はほとんどの方がこちらのBlogを参照しているかと思い
Halloween02を3カラムに。【GypsyMode】at 2004年11月02日 03:37
YellowのイメージからGreenを主体とした色合いに変更しました。 また、色々いじっている間にサイドバーが二つとも左側にいったのでそのままにしてみました。 結構自分で気に入っちょります。(^_^ しかし今日は(もう昨日か)一日ブログいじくっとった気がします、 実際
デザイン大幅変更しましたで【やまかしのロード・トゥ・アフィリエイター】at 2004年12月27日 02:58
link部分が両サイドにあるのだけが3karamじゃないです!ということでlink部分が片方に2つある3カラムの作り方(ここの解説)をしてみたいと思います。 &nbsp; カラムとはIT用語辞書e-Wordsで『列 を参照、 通常は縦に伸びる列 』ということになっています。3カラムはlink部分
float3カラムの作成法【ひなたのゆめ】at 2005年01月04日 00:01
このブログ、確実に変わったんですが気づいた方いるかなあ? ほら、ほらっ☆ 画像があんまり透けてないと思いませんか? え?今も透けてる? 前はもっとスケスケだったんですヨ、おにいさん。 初めてCSS(カスケードスタイルシート)をいじってみました。 文字の
初挑戦!【舘岩村のちっちゃなつれづれ】at 2005年02月16日 00:47
先日っ 本ブログの方にはtuna.beをすぐに設置できたのですが、 こちらSKY&SEAの方ではサイドバーが落ちてしまって 設置できませんでしたっ その時は「PHOLIOT」との相性の問題位に考えていたのですが よぉく考えるとそれなら何故?同じlivedoorなのにぃ 豆豆のせなか
tuna.be設置について【SEA&SKY**from DALIAN**】at 2005年07月04日 12:59
私のような者がノウハウなんて口にするのは 大変おこがましいのですが、今回 tuna.beを設置しまして **豆豆のせなか**ではOKなのに(重いでしょ?ごめんなさいっ) SKY&SEAの方では、サイドが落ちてましたっ 当初は、フラッシュの相性かjavaの問題ねっ なんて思っ.
tuna.be設置でサイドが落ちちゃうっ?!【**豆豆のせなか**】at 2005年07月04日 13:20
ブログのデザインを一新致しました。カスタムデザインも一部したけど、スタイルシートが解読出来ずに悪戦苦闘(+_+)致しました。が、とても親切なブログに辿り着き、漸く此処までデザインしました。因みにデザインの左右を入れ替えるだけで、丸一日掛かってしまいましたとさ。...
デザイン一新!【徒然なるにっき〜本日も晴天なり〜】at 2005年10月19日 13:50
この記事へのコメント
現在、ブログのデザインを変えようとCSSをいじっているのですが、こんなに詳しく説明されているサイトがあるとは!!参考にさせていただきます。
Posted by こはる at 2005年01月30日 04:59
はじめまして、こはるさん。
完全ではありませんが、少しでもお役に立てれば幸いです♪
Posted by モダチョキ at 2005年01月30日 23:46
すごくわかりやすい情報をありがとうございます。
CSSをいじる気力がわいてきたってもんです。
これからもちょこちょこ参考にすると思いますのでよろしくお願いします。
Posted by ちっちゃ at 2005年02月16日 00:49
はじめまして、ちっちゃさん。
完全とはいきませんが、多少なりともお役に立てて幸いです♪
使えるところはどんどん利用して下さいね。
Posted by モダチョキ at 2005年02月17日 00:51
そろそろデザインを変えようかなぁと思っていたので、すごく参考になっています。
前回は壁紙を変えるので精一杯だったのですが、コレを参考にしていろいろ変えられそうです。
とは言っても、育児の合間なのでなかなか進まないんですけどねぇ、、、
Posted by まいQ at 2005年06月12日 22:28
完全とはいきませんが、大体はこれで大丈夫だと思いますので、
頑張って下さいね♪
Posted by モダチョキ at 2005年06月13日 01:22
モダチョキさんのこのCCS確認は、見やすいしいっつも
参考にさせてもらってるんですよんっ
今回は少々抜粋させてもらっておりやすっ!
なにせ素人ですので、記事に不手際があるかもしれませんが
ご勘弁を〜〜♪♪TBもさせてもらいやすっ!
Posted by lovesea at 2005年07月04日 12:54
ありがとうございます♪
使えるところがありましたら、どこでもどうぞ!(笑)
Posted by モダチョキ at 2005年07月04日 23:58
初めまして、こんばんは。
こちらを参考にさせて頂いてブログのデザイン変更出来ました!!
素人の私でも分かりやすくて、本当に助かりました。
まだまだ参考にさせて頂きたい事がありますので、
これからも覗きに来させて頂きますね♪
Posted by 向日葵 at 2005年08月06日 00:22
はじめまして、向日葵さん。
完全とはいきませんが、CSS確認がお役に立てて幸いです♪
リニューアル版ではもう少し加わるようですので、
また新たに調べながらやっていこうと思っています。
参考にできるところはどんどん利用して下さい!
Posted by モダチョキ at 2005年08月06日 01:44
ライブドアにブログを引越し、自分なりにデザインをカスタマイズして、
ちょっとつまずいたので、このページを参考にさせていただきました。
ありがとうございます。

ところで、ライブドアブログは、
各カテゴリーごとに、記事を10件か30件ずつに分けることが出来ますが、
それを設定すると、どのカテゴリーも、最新の10件か30件だけで、
それ以上古い記事は、表示されなくなってしまうじゃないですか?

エキサイトやFC2のブログみたいに、
「次のページ」(次の10件か30件)と言う風に、
カテゴリー別の各ページを、さらに、ページ1、ページ2、ページ3 と、
分けることは出来ないのでしょうか?
Posted by キサラ at 2005年09月04日 15:25
少しでもお役に立てて幸いです♪
カテゴリー件数の表示はおっしゃるとおりですね。
個別記事で「次のページへ進む」とか「前のページに戻る」というカスタマイズは聞いた事がありますが、
カテゴリーは聞いた事がないですね。
キサラさんのところはリニューアル版になっているんですよね?
それでしたら、カテゴリーが2段階になっていると思うので、
2段階目で細かく設定するしかないと思います。
Posted by モダチョキ at 2005年09月05日 02:07
> キサラさん

上記でカテゴリーが2段階になったと書きましたが、
振り分けられるカテゴリーが2種類になっただけで、
カテゴリーの中にカテゴリー分類されるわけではありませんでした。
間違った情報ですみませんでした!
ただ、livedoor Blogの中で、カテゴリの中を分類している方がいたので、
ちょっと調べてみますね。
Posted by モダチョキ at 2005年09月06日 03:26
始めまして。「にっき」と申します。最近ブログをカスタマイズしようと
したけど、WEBの知識は有るものの、CSSはどうも苦手で悪戦苦闘。(-.-;
でも、このブログを発見してから、漸く何処がどうなっているのかが理解できました!(*^_^*)
どうもありがとうございました!
Posted by にっき at 2005年10月19日 12:01
> にっきさん

はじめまして!
全然、未完成ではありますが、お役に立てて幸いです♪
Posted by モダチョキ at 2005年10月20日 07:56
モダチョキ様、まだまだ未熟者の私ではありますが、
今後とも宜しくお願い致しますm(_ _)m
Posted by にっき at 2005年10月20日 11:18
> にっきさん

いえいえ、私こそまだまだ未熟者ですので、
一緒にカスタマイズを楽しみましょう♪
Posted by モダチョキ at 2005年10月21日 02:25
モダチョキ様、こんにちは。お世話になってます。

私が飼っている「ブログペット」が、
最近ナイスな一句を詠んでたので、お暇な時、是非上記トラックバックを観下さい…。
Posted by にっき at 2005年10月27日 14:50
(Cookieに投稿者情報を記憶します)
 
コメントをプレビューする
ご利用のブラウザの設定ではご利用になれません。