tomemo

スキン「大理石」を右サイドバー化するためのHTML/CSS -ライトブルー-

スキン「大理石」を右サイドバー化するためのHTML/CSSのライトブルーバージョンです。





HTML


<div id="main">
<div id="banner">
<div class="HEADER"><$header$></div>
<div class="URL"><$blogurl$></div>
<div class="USERMENU"><$adminmenu type=1$></div>
</div>
<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="520">
<$post$>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right" width="46%"><$prepage type=1$></td>
<td width="8%">
</td>
<td align="left" width="46%"><$nextpage type=1$></td>
</tr>
</table>
<br />
<br />
</td>
<td width="40"></td>
<td width="180">
<div class="PROFILE">
<div class="prf_top">
<div align="center"><$logoimage type=1$></div>
<div class="prf_body">
<$description$>
<$nick$>
</div>
</div>
</div>
<div class="prf_end">
</div>
<$calendar type=1$>
<div class="MN"><$menuleft$></div>
<$banner type=1$>
<$xml$>
<br />
<br />
</td>
</tr>
</table>
</div>


CSS


/* excite blog skin css */

BODY { background-image: url(http://md.exblog.jp/skn/img/a/01/03/8/lightblue_bg.jpg); margin: 0px; padding: 0px }
BODY,TD,DIV,LI { color: #324e66; font-size: small; line-height: 150%; font-family: Verdana, ARIAL, SANS-SERIF; WORD-BREAK : BREAK-ALL ; }

A:LINK { color: #075c99; text-decoration: none }
A:VISITED { color: #075c99; text-decoration: none }
A:ACTIVE { color: #7e97b5; text-decoration: none }
A:HOVER { color: #7e97b5; text-decoration: underline }

#main { text-align: left; margin-right: auto; margin-left: auto; width: 740px }
#banner { text-align: left }
blockquote { background-color: #f2f6f8; padding: 6px 10px }

DIV.HEADER { font: bold x-large/100% Verdana; text-align: left; padding-top: 20px }

DIV.HEADER A:LINK { color: #324e66; text-decoration: none }
DIV.HEADER A:VISITED { color: #324e66; text-decoration: none }
DIV.HEADER A:HOVER { color: #075c99; text-decoration: none }

DIV.URL { font: x-small/100% Verdana, Verdana; text-align: left; margin: 4px 0px 20px }

DIV.USERMENU {float: right; width: 180px; color: #666; font: 10px/100% Verdana; text-align: center; margin-bottom: 7px }

DIV.USERMENU A:LINK { color: #666; text-decoration: none }
DIV.USERMENU A:VISITED { color: #666; text-decoration: none }
DIV.USERMENU A:HOVER { color: #7e97b5; text-decoration: underline }

.left { text-align: left }
DIV.PROFILE { background: url(http://md.exblog.jp/skn/img/a/01/03/8/blue_prf1.jpg) repeat-y; text-align: left; padding: 0px 0px 2px; width: 180px; overflow: hidden }
.prf_body { line-height: 120%; padding-top: 6px; padding-right: 10px; padding-left: 15px }
.prf_top { background: url(http://md.exblog.jp/skn/img/a/01/03/8/blue_prf_top1.jpg) no-repeat }
.prf_end { background: url(http://md.exblog.jp/skn/img/a/01/03/8/blue_prf_end1.jpg) no-repeat; width: 180px; height: 20px }

DIV.MN { text-align: left; width: 180px ; OVERFLOW : HIDDEN ;}
DIV.MNTTL { font-weight: bold; text-align: center; margin: 20px 0px 6px; padding: 0px 0px 2px; border-bottom: 1px solid #324e66 }
DIV.MEMOBODY { width: 180px; overflow: hidden }

DIV.POST { background-image: url(http://md.exblog.jp/skn/img/a/01/03/8/blue_post_bg1.jpg); text-align: left; width: 520px }
.post_top { background: url(http://md.exblog.jp/skn/img/a/01/03/8/blue_post_top1.jpg) no-repeat; height: 15px }
.post_end { background: url(http://md.exblog.jp/skn/img/a/01/03/8/blue_post_end1.jpg) no-repeat; margin-bottom: 40px; height: 20px }
DIV.POST_HEAD { font-weight: bold; font-size: medium; line-height: 120%; background: url(http://md.exblog.jp/skn/img/a/01/03/8/blue_postttl_bg1.jpg) no-repeat; margin-left: 12px; padding-top: 8px; padding-left: 8px; height: 40px ; OVERFLOW : HIDDEN ;}
DIV.POST_ADMIN { font-size: 11px; text-align: right; margin-right: 20px; margin-bottom: 2px }
DIV.POST_BODY { line-height: 1.5; margin-bottom: 20px; padding-left: 20px; width: 480px; overflow: hidden }
DIV.POST_TAIL { font: 11px/150% Verdana; text-align: right; margin-top: 10px; padding-right: 20px }

DIV.COMMENT { background-color: #f2f6f8; margin: 6px 20px 0px; padding: 15px; border: solid 1px #d0dee8 }
DIV.COMMENT_BODY { line-height: 130%; margin-bottom: 20px; width: 448px; overflow: hidden }
DIV.COMMENT_TAIL { color: #666; font: 10px/150% Verdana; margin: 8px 0px 5px }
DIV.COMMENT_INPUT { margin-top: 10px; padding-top: 10px; border-top: 1px dotted #aaa }
DIV.COMMENT_LINE { margin: 6px 0px 10px; border-top: 1px dotted #aaa }

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

IMG.IMAGE_TOP { margin-bottom: 10px }
IMG.IMAGE_LEFT { text-align: left; margin-right: 10px; margin-bottom: 10px }
IMG.IMAGE_RIGHT { text-align: left; margin-bottom: 10px; margin-left: 10px }
IMG.IMAGE_MID { margin-top: 10px; margin-bottom: 10px }
IMG.BOOKMK{ MARGIN : 10PX; BORDER : 0PX; }
IMG.USERMENU{ MARGIN-LEFT : 8PX; }
IMG.LOGO { margin-top: 12px; }

DIV.BANNER { text-align: center; margin: 50px 0px 10px; width: 180px }

.SMALL { font-size: 11px }
.DATE { font: bold 10px/150% Verdana }
.TIME { font: 10px/150% Verdana; text-align: left }
.AUTHOR{ FONT : BOLD 10px Verdana; }
.TXTFLD { color: #000; font-size: 12px; background-color: #fff; border: solid 1px #666678 }
.SUBMIT { color: #000; font: 12px/140% }

DIV.CAL_TOP { }
DIV.CAL { text-align: center; margin: 20px 0px; width: 150px }
DIV.CAL_HEAD { font: 10px/150% Verdana; text-align: center; margin-bottom: 10px; padding: 4px 0px; border-bottom: 1px solid #324e66; width: 180px }
DIV.CAL_BODY { text-align: center; width: 180px }
DIV.CAL_BOTTOM { }

.CAL { font: 7pt/170% Verdana; text-align: center }
.CAL_DAY { font: bold 7pt/170% Verdana; text-align: center }
.CAL_SUN { color: #c66; font: bold 7pt/170% Verdana; text-align: center }
.CAL_SAT { color: #36c; font: bold 7pt/170% Verdana; text-align: center }
.CAL_TODAY { font: bold 7pt/170% Verdana; background-color: #b2c9e4; text-align: center }
.CAL_TR { }

DIV.XML { font: 10px/150% Verdana; text-align: center; width: 180px }

[PR]
by asazuki508e | 2011-06-26 02:38 | Comments(0)