tomemo

スキン「コグマ」を右サイドバー化するためのHTML/CSS -グリーン-

スキン「コグマ」を右サイドバー化するためのHTML/CSSのグリーンバージョンです。





HTML


<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<tr>
<td WIDTH=50% VALIGN=TOP>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<tr>
<td WIDTH=100% HEIGHT=397 CLASS=BACKGROUND>
</td>
</tr>
</table>
</td>
<td WIDTH=954 VALIGN=TOP CLASS=TOP>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=954>
<tr>
<td WIDTH=954 VALIGN=TOP>
<div ID=TOP>
<div CLASS=USERMENU><$adminmenu type=1$></DIV>
<div CLASS=HEADER><$header$></DIV>
<div CLASS=URL><$blogurl$></DIV>
</div>
</td>
</tr>
</table>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=954>
<tr>
<td WIDTH=70>
</td>
<td WIDTH=533 VALIGN=TOP>
<div ID=RIGHT>
<div CLASS=POST_TOP>
</div>
<div CLASS=POST><$post$></DIV>
<div CLASS=POST_BOTTOM>
</div>
<br>
<br>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=87%>
<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>
<br>
<br>
</div>
</td>
<td WIDTH=1>
</td>
<td WIDTH=208 VALIGN=TOP>
<div ID=LEFT>
<div CLASS=MN_BODY>
<div CLASS=MN_TOP>
<div CLASS=PROFILE>
<center><$logoimage type=1$></CENTER>
<$description$>
<$nick$>
</div>
<$calendar type=1$>
<div CLASS=MN><$menuleft$></DIV>
</div>
</div>
<div CLASS=MN_BOTTOM>
</div>
<center><$banner type=1$></CENTER>
<$xml$>
</div>
</td>
</tr>
</table>
</td>
<td WIDTH=50% VALIGN=TOP>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<tr>
<td WIDTH=100% HEIGHT=397 CLASS=BACKGROUND>
</td>
</tr>
</table>
</td>
</tr>
</table>


CSS


/* excite blog skin css */

BODY{ BACKGROUND : #FFF; ; MARGIN : 0;PADDING : 0; }
BODY,TD,DIV,LI{ FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #444; WORD-BREAK : BREAK-ALL; }

A:LINK{ COLOR: #396A21; TEXT-DECORATION: NONE }
A:VISITED{ COLOR: #396A21; TEXT-DECORATION: NONE }
A:ACTIVE{ COLOR: #396A21; }
A:HOVER{ COLOR: #A5D38E; TEXT-DECORATION: UNDERLINE }


TD.BACKGROUND {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/9/wall_3.gif);
HEIGHT : 397PX;
}

TD.TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/24/35/background_3_1.gif);
BACKGROUND-REPEAT : NO-REPEAT;
}

DIV#TOP {
WIDTH : 954PX;
}

DIV#LEFT {
WIDTH : 182PX;
MARGIN : 154PX 0PX 0PX 26PX;
TEXT-ALIGN : CENTER;
}

DIV#RIGHT {
MARGIN : 0PX 0PX 40PX 40PX;
}

DIV.HEADER {
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 14PT;
FONT-WEIGHT : BOLD;
MARGIN-right: 110PX;
LINE-HEIGHT : 100%;
TEXT-ALIGN : CENTER;
}

DIV.HEADER A:LINK {COLOR: #000; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #000; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: AAA; TEXT-DECORATION: NONE}

DIV.URL {
FONT-FAMILY : VERDANA,TAHOMA ;
FONT-SIZE : 8PT;
MARGIN : 3PX 110PX 0PX 0PX;
TEXT-ALIGN : CENTER;
}

DIV.URL A:LINK {COLOR: #555; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #555; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: AAA; TEXT-DECORATION: NONE}

DIV.USERMENU {
TEXT-ALIGN : RIGHT;
MARGIN : 10PX 180PX 7PX 0;
COLOR : #000;
}

DIV.USERMENU A:LINK {COLOR: #000; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #000; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #333; TEXT-DECORATION: UNDERLINE}

DIV.MN_TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/24/35/mn_top_3_1.gif);
BACKGROUND-REPEAT : NO-REPEAT;
WIDTH : 162PX;
PADDING : 5PX 10PX 0PX 10PX;
}

DIV.MN_BODY {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/9/mn_body_1.gif);
WIDTH : 182PX;
PADDING-BOTTOM : 20PX;
OVERFLOW : HIDDEN;
}

DIV.MN_BOTTOM {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/9/mn_bottom_1.gif);
BACKGROUND-REPEAT : NO-REPEAT;
WIDTH : 182PX;
HEIGHT : 5PX;
}

DIV.PROFILE {
WIDTH : 150PX;
PADDING : 0PX 6PX 20PX;
TEXT-ALIGN : LEFT;
MARGIN : 16PX 0PX;
LINE-HEIGHT : 150%;
BORDER-BOTTOM : 1PX #BBB SOLID;
OVERFLOW : HIDDEN;
}

DIV.MN {
WIDTH : 150PX;
LINE-HEIGHT : 150%;
TEXT-ALIGN : LEFT;
PADDING : 0PX 6PX;
}

DIV.MNTTL {
WIDTH : 150PX;
BORDER-BOTTOM : 1PX #BBB SOLID;
FONT-SIZE : 9PT;
MARGIN : 25PX 0PX 10PX;
COLOR : #000;
TEXT-ALIGN : LEFT;
}

DIV.MEMOBODY {
WIDTH : 150PX;
OVERFLOW : HIDDEN;
}

DIV.POST_TOP {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/9/post_top_3.gif);
BACKGROUND-REPEAT : NO-REPEAT;
WIDTH : 533PX;
HEIGHT : 14PX;
MARGIN-TOP : 45PX;
FONT-SIZE : 1PX;
}

DIV.POST_BOTTOM {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/9/post_bottom_3.gif);
BACKGROUND-REPEAT : NO-REPEAT;
WIDTH : 533PX;
HEIGHT : 14PX;
}

DIV.POST {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/9/post_body_3.gif);
WIDTH : 533px;
PADDING-BOTTOM : 20PX;
}

DIV.POST_HEAD {
WIDTH : 450PX;
MARGIN : 0PX 44PX 20PX 39PX;
PADDING : 30PX 0PX 5PX;
BORDER-BOTTOM : 2PX #AAA DOTTED;
OVERFLOW : HIDDEN;
}

DIV.POST_BODY {
WIDTH : 450PX;
MARGIN : 0PX 44PX 20PX 39PX;
LINE-HEIGHT : 1.5;
OVERFLOW : HIDDEN;
}

DIV.POST_BODY A:LINK{ COLOR: #5990BF; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:VISITED{ COLOR: #5990BF; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:ACTIVE{ COLOR: #5990BF; }
DIV.POST_BODY A:HOVER{ COLOR: #0B226D; TEXT-DECORATION: UNDERLINE }

DIV.POST_TTL {
COLOR : #345226;
FONT-WEIGHT : BOLD;
}

DIV.POST_TAIL {
WIDTH : 450PX;
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 8PT;
MARGIN : 0PX 44PX 0PX 39PX;
PADDING-BOTTOM : 30PX;
TEXT-ALIGN : RIGHT;
}

DIV.COMMENT {
WIDTH : 450PX;
BORDER : 1PX #D3D3D3 SOLID;
BACKGROUND : #FFF;
MARGIN : 0PX 44PX 0PX 39PX;
PADDING : 15PX 0PX;
}

DIV.COMMENT_BODY {
WIDTH : 415PX;
MARGIN : 6PX 15PX 20PX;
LINE-HEIGHT : 140%;
OVERFLOW : HIDDEN;
}

DIV.COMMENT_TAIL {
MARGIN : 8PX 15PX 5PX;
FONT-FAMILY : VERDANA, TAHOMA,;
FONT-SIZE : 8PT;
COLOR : #777;
}

DIV.COMMENT_INPUT {
MARGIN : 8PX 15PX 5PX;
PADDING-TOP : 15PX;
BORDER-TOP : 1PX #AAA DOTTED;
}

DIV.COMMENT_LINE {
BORDER-TOP : 1PX #AAA DOTTED;
MARGIN : 10PX 15PX 15PX;
}

DIV.TRACK_TOP {
LINE-HEIGHT : 170%;
MARGIN-LEFT : 10PX;
}

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;
}

IMG.IMAGE_LEFT {
MARGIN-RIGHT : 15PX;
MARGIN-BOTTOM : 15PX;
}

IMG.IMAGE_RIGHT {
MARGIN-LEFT : 15PX;
MARGIN-BOTTOM : 15PX;
}

IMG.IMAGE_MID {
MARGIN-TOP : 15PX;
MARGIN-BOTTOM : 15PX;
}

IMG.LOGO {
MARGIN-BOTTOM : 10PX;
}

DIV.BANNER {
MARGIN : 30PX 10PX 10PX;
}

.SMALL {
FONT-SIZE : 11PX;
}

.DATE {
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 8PT;
FONT-WEIGHT : BOLD;
}

.TIME {
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 8PT;
TEXT-ALIGN : LEFT;
}

.AUTHOR {
FONT-SIZE : 9PT;
FONT-WEIGHT : BOLD;
}

.TXTFLD{FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:WHITE}




DIV.CAL_TOP {
}

DIV.CAL {
MARGIN : 20PX 6PX 20PX;
WIDTH : 130PX;
TEXT-ALIGN : CENTER;
}

DIV.CAL_HEAD {
WIDTH : 130PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
TEXT-ALIGN : CENTER;
PADDING : 4PX 6PX;
MARGIN-BOTTOM : 10PX;
}

DIV.CAL_BODY {
WIDTH : 140PX;
TEXT-ALIGN : CENTER;
}

DIV.CAL_BOTTOM {
}

.CAL {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_DAY {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_SUN {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #D36654;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_SAT {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #3572A1;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_TODAY {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
BACKGROUND : #D1DEE9;
COLOR : #3D5586;
TEXT-ALIGN : CENTER;
}

.CAL_TR { }

DIV.XML {
TEXT-ALIGN : CENTER;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
MARGIN-BOTTOM : 80PX;
}

[PR]
by asazuki508e | 2011-06-24 15:41 | Comments(0)