/* +++++++++++++++++++++ ベース設定 +++++++++++++++++++++ */ /* ++++++ ブログの横幅設定 ++++++ */ #container { width: 700px; } /* ++++++ 2段組の横幅設定 ++++++ */ /* コンテンツ部分の横幅 */ #center { width: 500px; } /* サイドバーの横幅 */ #left, #right { width: 200px; } /* ++++++ 3段組の横幅設定 ++++++ */ /* ブログの横幅設定 */ #three #container { width: 800px; } /* 左サイドバーの横幅 */ #three #left { width: 190px; } /* 中央コンテンツ部分の横幅 */ #three #center { width: 420px; } /* 右サイドバーの横幅 */ #three #right { width: 190px; } /* ++++++ その他設定 ++++++ */ body { text-align: center; } #container { margin-right: auto; margin-left: auto; text-align: left; } #left { float: left; } #center { float: left; } #right { float: right; } #footer { clear: both; } /* +++++++++++++++++++++ レイアウトのデザイン設定 +++++++++++++++++++++ */ body { margin: 0; padding:0; } #container { background-image: url(/image/back.gif); border-left: solid; border-right: solid; border-width: 1px; border-color: darkblue; } #header { padding:30px; background-color:#00ff00; background-image:url(/image/title.jpg); /* 画像の設定 */ text-align:center; } #three #container { background-image: url(/image/back-three.gif); } #one #container { background-image: none; } #banner { border-bottom: solid 1px darkblue; margin-bottom: 20px; } /* ++++++ 段の間隔 ++++++ */ /* 左サイドバーの左右の余白 */ #left div { margin-left: 15px; margin-right: 15px; } /* コンテンツ部分の左右の余白 */ .content div { margin-left: 15px; margin-right: 15px; } /* 右サイドバーの左右の余白 */ #right div { margin-left: 15px; margin-right: 15px; } #left div div, .content div div, #right div div { margin-left: 0; margin-right: 0; } .sidebar #calendar table { width: 170px; } #three .sidebar #calendar table { width: 160px; } /* ++++++ ブログの横幅 ++++++ */ #container { width: 702px; } #three #container { width: 802px; } /* +++++++++++++++++++++ パーツのデザイン設定 +++++++++++++++++++++ */ /* ++++++ ヘッダー部分のデザイン ++++++ */ #title { background-image: url(/image/title.jpg); background-repeat: no-repeat; background-color: #4e87b9; padding: 15px 15px 60px; } #title h1 { font-size: 1.5em; font-family: 'Trebuchet MS', Helvetica, sans-serif; color:#333; margin-bottom: 0; } #title h1 a { text-decoration: none; color: white; } #title h2 { font-size: 0.7em; margin-top: 6px; color: white; } /* ++++++ コンテンツ部分のデザイン ++++++ */ .entry h2 { font-size: 0.75em; color: #4e87b9; } .entry h3 { font-size: 0.875em; color: #2c5e8a; background-image: url(/image/mark.gif); background-repeat: no-repeat; padding: 3px 0 1px 24px; } .entry p { font-size: 0.75em; color: #666666; line-height: 150%; } .entry p.posted { font-size: 0.66em; color: #aaaaaa; border-top: solid 2px #b1cbe3; padding-top: 6px; } .entry p.imgcenter { text-align: center; } .entry a { color: #4e87b9; } .entry { margin-bottom: 40px; } /* 前後のエントリーへのリンク */ #entrylink { font-size: 0.75em; } #entrylink a { color: #66aaff; } #entrylink p { margin-top: 0; margin-bottom: 30px; } /* トラックバック */ #trackbacks { border: solid 1px #b1cbe3; padding: 5px 20px; margin-top: 20px; margin-bottom: 20px; } #trackbacks h2 { font-size: 0.75em; margin-bottom: 0; } #trackbacks p { font-size: 0.75em; color: #666666; margin-top: 8px; } #trackbacks h3 { font-size: 0.75em; color: #999999; margin-bottom: 0; border-top: dotted 1px #b1cbe3; padding-top: 20px; } #trackbacks a { color: #3366aa; } /* コメント */ #comments { border: solid 1px #b1cbe3; padding: 5px 20px; margin-top: 20px; margin-bottom: 20px; } #comments h2 { font-size: 0.75em; } #comments p { font-size: 0.75em; color: #666666; } #comments p.posted { color: #999999; padding-left: 30px; } #comments div { border-top: dotted 1px #b1cbe3; } #comments form div { border-top: none; padding-top: 0; } #comments h2#com02 { border-top: dotted 1px #b1cbe3; padding-top: 40px; } #comments a { color: #3366aa; } /* カテゴリータイトル */ #catetitle { background-color: #2c5e8a; background-image: url(/image/markl.gif); background-repeat: no-repeat; background-position: 10px 20px; padding: 15px 0 15px 45px; } #catetitle h1 { font-size: 1em; color: white; margin: 0; } #catetitle p { font-family:'Trebuchet MS', Helvetica, sans-serif; color:#333; font-size: 0.75em; color: white; margin: 5px 0 0; } /* 月別タイトル */ #datetitle { background-color: #2c5e8a; background-image: url(/image/bar.gif); background-repeat: no-repeat; background-position: 10px 20px; padding: 20px 0 20px 45px; } #datetitle h1 { font-size: 1em; color: white; margin: 0; } /* ++++++ サイドバー部分のデザイン ++++++ */ /* カレンダー */ #calendar table { width: 100%; font-size: 0.75em; text-align: center; } #calendar td { padding: 2px 0; background-color: white; } #calendar a { text-decoration: none; color: red; } #calendar caption { color: #2c5e8a; font-family: 'Trebuchet MS', Helvetica, sans-serif; color:#333; font-weight: bold; border-bottom: solid 2px #4e87b9; padding-bottom: 0; } /* カテゴリーメニュー */ #categories h2 { font-size: 0.75em; margin-bottom: 0px; color: white; background-color: #4e87b9; background-image: url(/image/bar.gif); padding: 5px 0 5px 15px; } #categories a { color: #2c5e8a; text-decoration: none; } #categories ul { font-size: 0.75em; list-style-type:none; margin-top: 5px; margin-left:0; padding-left:0; } #categories li { background-image: url(/image/menu01.gif); background-repeat: no-repeat; background-position: 1px 8px; padding-left: 15px; } #categories ul ul { font-size: 1em; margin-left: 10px; } #categories li { padding-bottom: 5px; } #categories li li { background-image: url(/image/menu02.gif); padding-left: 17px; } #categories { margin-bottom: 30px; } /* アーカイブメニュー */ #archives h2 { font-size: 0.75em; margin-bottom: 0px; color: white; background-color: #4e87b9; background-image: url(/image/bar.gif); padding: 5px 0 5px 15px; } #archives a { color: #2c5e8a; text-decoration: none; } #archives ul { font-size: 0.75em; list-style-type:none; margin-top: 5px; margin-left:0; padding-left:0; } #archives li { background-image: url(/image/munu01.gif); background-repeat: no-repeat; background-position: 1px 8px; padding-left: 15px; } /* エントリーメニュー */ #recent h2 { font-size: 0.75em; margin-bottom: 0px; color: white; background-color: #4e87b9; background-image: url(/image/bar.gif); padding: 5px 0 5px 15px; } #recent a { color: #2c5e8a; text-decoration: none; } #recent ul { font-size: 0.75em; list-style-type:none; margin-top: 5px; margin-left:0; padding-left:0; } #recent li { background-image: url(/image/menu01.gif); background-repeat: no-repeat; background-position: 1px 8px; padding-left: 15px; }