tomemo

スキン「マルポップ」を右サイドバー化するためのCSS -グランブルー-

スキン「マルポップ」を右サイドバー化するためのCSSのグランブルーバージョンです。

d0112463_912817.jpg
demo



CSS


/* excite blog default skin */

* {
margin:0;
padding:0;
word-break:break-all;
}
html {
background-color:#FFFFFF;
background-image:url("http://md.exblog.jp/skn/img/a/01/05/9/background_6.gif");
}
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
border:0;
}
iframe {
display:none;
}

/* base */
div#base {
margin:0 auto;
border-top:0;
overflow:hidden;
width:704px;
color:#333333;
font-size:small;
}
table#base_layout{
margin:40px 0;
width:704px;
}

/*mainbackground*/
td#mainblock{
background-image:url("http://md.exblog.jp/skn/img/a/01/05/9/mainbg_6.gif");
background-repeat:repeat-y;
background-position:top;
}

td.mainbg_top{
height:18px;
background-image:url("http://md.exblog.jp/skn/img/a/01/05/9/mainbg_top_6.gif");
background-repeat:no-repeat;
background-position:top;
}

div#marupop{
margin-right:4px;
background-image:url("http://md.exblog.jp/skn/img/a/01/05/9/head_back_6.gif");
background-repeat:no-repeat;
background-position:top right;
}

/* header */
div#header {
overflow:hidden;
min-height: 130px;
padding-left: 20px;
}
div#header a {
text-decoration:none;
color:#FFFFFF;
}
div#header h1 {
padding-top:10px;
}
div#header p {
padding-top:10px;
}
div#header p.blogurl{
margin-bottom:30px;
}
div#header p.adminmenu{
margin-right:10px;
text-align:center;
font-size:small;
float: right;
width: 190px;
}
div#header p.adminmenu a {
text-decoration:underline;
color:#000000;
}

/*marubox*/
div#marubox{
padding:0 20px;
}


/* contents */
div#contents {
float:left;
overflow:hidden;
width:464px;
}
div#contents p.pageGuide {
text-align:center;
color:#FFF;
}
div#contents p.pageGuide a {
color:#FFF;
}
div.post {
margin-bottom:20px;
background-image:url("http://md.exblog.jp/skn/img/a/01/05/9/contentsbg_6.gif");
overflow:hidden;
width:464px;
line-height:1.5;
}
p.postdate{
background-image:url("http://md.exblog.jp/skn/img/a/01/05/9/contentsbg_top_6.gif");
background-repeat:no-repeat;
padding-top:10px;
padding-right:20px;
text-align:right;
color:#666666;
}
div.post h2 {
margin:10px 15px;
width:400px;
padding:10px 0 5px 30px;
background-image:url("http://md.exblog.jp/skn/img/a/01/05/9/contents_title_6.gif");
background-repeat:no-repeat;
color:#996633;
font-size:small;
font-weight:bold;
}
div.post h2 a {
padding:0 5px;
color:#9C8553;
}
div.post blockquote {
margin:10px;
background-color: #FFF;
padding:5px;
border: 1px solid #CCC;
}
div.story {
margin:10px 15px;
width:430px;
overflow:hidden;
}
div.story img{
margin:5px;
}
div.story a {
color:#996633;
}
div.story div.TAGS {
text-align:center;
font-size:xx-small;
}
div.story div.TAGS a {
padding-left:5px;
font-size:small;
}
p.posttail {
clear:both;
padding:10px 20px;
text-align:right;
}
p.posttail a {
color:#996633;
}
div.story_footer{
height:25px;
background-image:url("http://md.exblog.jp/skn/img/a/01/05/9/contentsbg_bottom_6.gif");
background-repeat:no-repeat;
background-position:top;
}
div.COMMENT {
margin:30px 20px;
width:420px;
background-color:#FFF;
border:#CCC 3px double;
}
div.COMMENT a {
color:#996633;
}
div.TRACK_TOP {
margin:10px;
font-size:x-small;
}
div.COMMENT_LINE {
}
div.COMMENT_TAIL {
margin:10px;
border:#CCCCCC 1px solid;
overflow:hidden;
background-color:#FFFFE0;
padding:5px;
color:#996633;
font-weight:bold;
}
div.COMMENT_TAIL a {
color:#996633;
}
div.COMMENT_BODY {
overflow:hidden;
padding:0pt 15px 10px;
}
div.COMMENT_INPUT {
padding:10px;
}

/* navigation */
div#navigation {
float:right;
overflow:hidden;
width:170px;
color:#FFF;
}
div#navigation h3 {
overflow:hidden;
width:150px;
/*vertical-align:middle;*/
padding-left:5px;
border-bottom:1px dotted #FFFFFF;
font-size:small;
font-weight:bold;
}
div#navigation div {
overflow:hidden;
}
div.guide {
margin-bottom:10px;
width:150px;
padding:9px;
}
div.guide a{
color:#FFF;
}
div.guide input {
width:40px;
}
div.guide input.TXTFLD {
width:100px;
}
div.profile {
margin:0 0 10px 0;
padding:9px;
width:150px;
text-align:center;
}
div.BANNER {
margin:10px 0;
padding:9px;
text-align:center;
}
div.sign {
padding:9px;
font-size:xx-small;
text-align:center;
}
div.sign a {
color:#FFF;
}
div.calendar table tr td{
text-align:center;
}
div.calendar a{
color:#666666;
}
div.calendar table {
margin-bottom:10px;
width:168px;
}
div.CAL_HEAD {
text-align:center;
}
div.CAL_HEAD a{
font-weight:bold;
color:#FFF;
}
td.CAL {
background:transparent url("http://md.exblog.jp/skn/img/a/01/05/9/calendar_day_6.gif") no-repeat center;
padding:3px;
font:BOLD 7PT/170% VERDANA;
color:#666;
}
td.CAL_TR{
font-size:20px;
}
td.CAL_DAY {
background:transparent url("http://md.exblog.jp/skn/img/a/01/05/9/calendar_week_6.gif") no-repeat center;
padding:3px;
font:BOLD 8PT/170% VERDANA;
color:#FFF;
}
td.CAL_SUN {
background:transparent url("http://md.exblog.jp/skn/img/a/01/05/9/calendar_sun_6.gif") no-repeat center;
padding:3px;
font:BOLD 8PT/170% VERDANA;
color:#D36654;
}
td.CAL_SAT {
background:transparent url("http://md.exblog.jp/skn/img/a/01/05/9/calendar_sat_6.gif") no-repeat center;
padding:3px;
font:BOLD 8PT/170% VERDANA;
color: #3572A1;
}
td.CAL_TODAY {
background:transparent url("http://md.exblog.jp/skn/img/a/01/05/9/calendar_day_6.gif") no-repeat center;
font:BOLD 7PT/170% VERDANA;
color:#BF4F71;
}
p.nabibg_top{
width:170px;
height:13px;
background:transparent url("http://md.exblog.jp/skn/img/a/01/05/9/navigationbg_top_6.gif") no-repeat center;
text-indent:-9999px;
}
p.nabibg_bottom{
width:170px;
height:13px;
background:transparent url("http://md.exblog.jp/skn/img/a/01/05/9/navigationbg_bottom_6.gif") no-repeat center;
text-indent:-9999px;
}

/* footer */
div#footer {
clear:both;
}

td.mainbg_bottom{
height:137px;
background-image:url("http://md.exblog.jp/skn/img/a/01/05/9/mainbg_bottom_6.gif");
background-repeat:no-repeat;
background-position:top;
}

[PR]
by asazuki508e | 2011-07-03 09:03 | Comments(0)