tomemo

スキン「沖縄」を右サイドバー化するためのHTML/CSS -海-

スキン「沖縄」を右サイドバー化するためのHTML/CSSの海バージョンです。





HTML


<div id="BG">
<div id="HEADERBG">
<div id="HEADER"><$header$></div>
<div id="URL"><$blogurl$></div>
<div id="USERMENU"><$adminmenu type=1$></div>
</div>
<div id="CONTENTS">
<table border="0" cellpadding="0" cellspacing="0" width="750">
<tr>
<td width="550" valign="top">
<$post$>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right" width="48%"><$prepage type=1$></td>
<td width="4%">
</td>
<td align="left" width="48%"><$nextpage type=1$></td>
</tr>
</table>
</td>
<td valign="top">
<div id="LEFT_MENU">
<div id="PROFILE">
<div align="center"><$logoimage type=1$></div>
<$description$>
<$nick$>
</div>
<$calendar type=1$>
<div id="MN"><$menuleft$></div>
<$banner type=1$>
<$xml$>
</div>
</td>
</tr>
</table>
</div>
</div>


CSS


/* excite blog default skin A01049 CSS no.3 */

BODY{
background : url(http://md.exblog.jp/skn/img/a/01/04/9/okinawa_bg_line_v3.gif) repeat-x center top;
font-family : "MS Pゴシック", "Osaka", Verdana, Arial, sans-serif;
font-size: small;
color: #666666;
line-height : 150%;
width: 800px;
word-break:break-all;
margin: 0px auto;
padding: 0px;
}
#BG{
width: 806px;
background : #ffffff url(http://md.exblog.jp/skn/img/a/01/04/9/okinawa_bg.gif) repeat-y center top;
}

A:LINK{
color: #3297DE;
text-decoration: none;
}
A:VISITED{
color: #3297DE;
text-decoration: none;
}
A:HOVER{
color: #FFFFFF;
text-decoration: none;
background: #5BAEEA;
}

#HEADERBG{
background: url(http://md.exblog.jp/skn/img/a/01/04/9/okinawa_header03.jpg) no-repeat;
height: 275px;
width: 800px;
margin-right: auto;
margin-left: auto;
}
#HEADER{
text-align:left;
font-size: 130%;
font-weight: bold;
padding-top: 19px;
padding-left: 33px;
}

#HEADER A:LINK {
color: #ffffff;
text-decoration: none;
}
#HEADER A:VISITED {
color: #ffffff;
text-decoration: none;
}
#HEADER A:HOVER {
color: #FFFFFF;
text-decoration: none;
background: #888888;
}

#URL{
font : 100%/100% verdana;
text-align:left;
padding-left: 33px;
padding-top: 5px;
}
#URL A:LINK {
color: #ffffff;
text-decoration: none;
}
#URL A:VISITED {
color: #ffffff;
text-decoration: none;
}
#URL A:HOVER {
color: #FFFFFF;
text-decoration: none;
background: #888888;
}

#USERMENU{
font : 100%/100%;
text-align : right;
color: #fff;
vertical-align: bottom;
padding-right: 330px;
}

#USERMENU A:LINK {
color: #ffffff;
text-decoration: none;
}
#USERMENU A:VISITED {
color: #ffffff;
text-decoration: none;
}
#USERMENU A:HOVER {
color: #FFFFFF;
text-decoration: none;
background: #888888;
}

#CONTENTS {
padding-bottom: 30px;
padding-top: 15px;
padding-left: 40px;
}
#LEFT_MENU {
background: url(http://md.exblog.jp/skn/img/a/01/04/9/okinawa_line.gif) repeat-y left top;
padding: 29px;
width: 160px;
margin-left: 40px;
}

#PROFILE{
overflow:hidden;
line-height : 150%;
text-align:left;
margin-bottom: 10px;
}
.MN{
text-align:left;
}
.MNTTL{
font-weight: bold;
color: #878787;
padding-left: 17px;
background: url(http://md.exblog.jp/skn/img/a/01/04/9/okinawa_post_icon02.gif) no-repeat left center;
}
.MN_BODY{
padding-top: 20px;
padding-bottom: 20px;
line-height: 170%;
font-size: 100%;
color: #878787;
}


DIV.MEMOBODY{
overflow : hidden;
}

.POST{
overflow:hidden;
width: 500px;
margin: 0px auto 15px;
}
.POST_HEAD{
background: url(http://md.exblog.jp/skn/img/a/01/04/9/okinawa_post_hed.gif) no-repeat;
height: 20px;
}
.POST_TTL{
font-size: 120%;
line-height: 140%;
font-weight: bold;
color: #FFA200;
background: url(http://md.exblog.jp/skn/img/a/01/04/9/okinawa_post_icon04.gif) no-repeat left center;
margin-top: 27px;
margin-left: 13px;
margin-right: 13px;
padding-left: 21px;
}
.POST_TTL a:link{color: #FFA200;}
.POST_TTL a:hover{color: #FFA200; background-color:#fff;}
.POST_TTL a:visited{color: #FFA200;}
.POST_TTL a:active{color: #FFA200;}

.POST_ADMIN{
text-align : right;
font-size: 100%;
}
.POST_BODY{
padding-top: 35px;
padding-bottom: 35px;
line-height: 1.5;
margin-left: 13px;
margin-right: 13px;
}
.POST_TAIL{
font : 80%/100% verdana;
line-height: 130%;
margin-left: 13px;
margin-right: 13px;
padding-bottom: 27px;
}
.POST_BOTTOM{
background: url(http://md.exblog.jp/skn/img/a/01/04/9/okinawa_post_bottom.gif) no-repeat;
height: 20px;
width: 500px;
}

DIV.COMMENT{
padding: 10px 15px;
margin-top: 10px;
margin-left: 0px;
margin-right: 0px;
background: url(http://md.exblog.jp/skn/img/a/01/04/9/comment_bg.gif) repeat;
}
DIV.COMMENT_BODY{
font-size: 120%;
color: #666666;
line-height: 160%;
padding-top: 10px;
padding-bottom: 10px;
}
DIV.COMMENT_TAIL{
padding-top: 5px;
padding-bottom: 5px;
}
DIV.COMMENT_INPUT{
font-size: 120%;
line-height: 160%;
border-top : 1px dotted #aaa;
padding-top : 10px;
}
DIV.COMMENT_LINE{
border-top : 1px #aaa dotted;
padding-top: 10px;
padding-bottom: 10px;
}



DIV.TRACK_TOP {
line-height : 170%;
}
DIV.ARCHIVE_HEAD {
font-weight : bold;
margin-bottom : 10px;
}
DIV.ARCHIVE_BODY {
margin : 20px 0px;
line-height : 160%;
padding-bottom : 100px;
}

IMG.IMAGE_TOP{
margin-bottom : 15px;
border: 1px solid #CCCCCC;
}
IMG.IMAGE_LEFT{
margin-right : 15px;
margin-bottom : 15px;
border: 1px solid #CCCCCC;
}
IMG.IMAGE_RIGHT{
margin-left : 15px;
margin-bottom : 15px;
border: 1px solid #CCCCCC;
}
IMG.IMAGE_MID{
margin-top : 15px;
margin-bottom : 15px;
border: 1px solid #CCCCCC;
}
IMG.BOOKMK{
margin : 10px;
border : 0px;
}
IMG.USERMENU{
margin-left : 8px;
}
IMG.LOGO{
margin-bottom : 10px;
}

DIV.BANNER{
margin : 30px 0px 10px;
text-align : center;
margin-right: auto;
margin-left: auto;
}

.SMALL{
font : 80% verdana;
}
.DATE{
font : 100% verdana;
}
.TIME{
font : 100% verdana;
text-align : left;
}
.AUTHOR{
font : 100% verdana;
}
.TXTFLD{
font : 100% verdana;
color:#000;
border:1px solid #666678;
background:#fff;
}
.SUBMIT{
font : 100% verdana;
color:#000;
}



DIV.CAL_TOP {}
DIV.CAL {
font : 100% verdana;
margin : 20px 0px 20px;
width : 150px;
text-align : center;
margin-right: auto;
margin-left: auto;
}
DIV.CAL_HEAD {
width : 150px;
font : 100%;
text-align : center;
padding : 4px 0px;
margin-bottom : 10px;
}
DIV.CAL_BODY {
width : 150px;
text-align : center;
}
DIV.CAL_BOTTOM {}

.CAL{
text-align : center;
}
.CAL_DAY{
text-align : center;
}
.CAL_SUN{
color : #d36654;
text-align : center;
}
.CAL_SAT{
color : #3572a1;
text-align : center;
}
.CAL_TODAY{
background : #e3e3e3;
color : #3d5586;
text-align : center;
}
.CAL_TR {}

DIV.XML {
font : 100% verdana;
text-align : center;
margin-right: auto;
margin-left: auto;
}

[PR]
by asazuki508e | 2011-06-26 14:13 | Comments(0)