tomemo

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

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





HTML


<center>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=872>
<tr>
<td COLSPAN=3 VALIGN=TOP WIDTH=872>
<div ID=TOP>
<div CLASS=HEADER><$header$></DIV>
<div CLASS=URL><$blogurl$></DIV>
<div CLASS=USERMENU><$adminmenu type=1$></DIV>
</div>
</td>
</tr>
<tr>
<td VALIGN=TOP WIDTH=620>
<div ID=RIGHT>
<$post$>
<br>
<br>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<tr>
<td ALIGN=RIGHT WIDTH=45%><$prepage type=1$></TD>
<td WIDTH=10%>
</td>
<td ALIGN=LEFT WIDTH=45%><$nextpage type=1$></TD>
</tr>
</table>
</div>
</td>
</td>
<td VALIGN=TOP WIDTH=232>
<div ID=LEFT>
<div CLASS=PROFILE>
<center><$logoimage type=1$></CENTER>
<$description$>
<$nick$>
</div>
<div CLASS=PROFILE_TAIL>
</div>
<$calendar type=1$>
<div CLASS=MN><$menuleft$></DIV>
<div CLASS=MN_TAIL>
</div>
<center>
<$banner type=2$>
<$xml$>
</center>
</div>
</td>
<td WIDTH=20><DIV STYLE='WIDTH:20PX'></TD>
</tr>
</table>
</center>


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 : 1.5; COLOR : #000; WORD-BREAK : BREAK-ALL; }

A:LINK{ COLOR: #0054A6; TEXT-DECORATION: NONE }
A:VISITED{ COLOR: #0054A6; TEXT-DECORATION: NONE }
A:ACTIVE{ COLOR: #0054A6; }
A:HOVER{ COLOR: #94BCE3; TEXT-DECORATION: UNDERLINE }

DIV#TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/22/35/top_4_01.gif);
WIDTH : 872PX;
HEIGHT : 215PX;
MARGIN-TOP : 15PX;
TEXT-ALIGN : LEFT;
PADDING-TOP : 1PX;
}

DIV#LEFT {
WIDTH : 232PX;
TEXT-ALIGN : LEFT;
}

DIV#RIGHT {
WIDTH : 620PX;
MARGIN-BOTTOM : 50PX;
TEXT-ALIGN : LEFT;
}

DIV.HEADER {
MARGIN : 85PX 0PX 0PX 280PX;
FONT-FAMILY : TAHOMA,, VERDANA ;
FONT-SIZE : 14PT;
FONT-WEIGHT : BOLD;
TEXT-ALIGN : LEFT;
}

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

DIV.URL {
MARGIN : 0PX 0PX 0PX 280PX;
FONT-FAMILY : VERDANA,TAHOMA ;
FONT-SIZE : 9PT;
LETTER-SPACING : 1PX;
}

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

DIV.USERMENU {
MARGIN : 62PX 50PX 0PX 620PX;
FONT-SIZE : 9PT;
TEXT-ALIGN : center;
}

DIV.USERMENU A:LINK {COLOR: #555; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #555; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #98A6E4; TEXT-DECORATION: UNDERLINE}

DIV.PROFILE {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/22/35/left_b_01.gif);
PADDING : 0PX 56PX 25PX 26PX;
COLOR : #CCC;
OVERFLOW : HIDDEN;
}

DIV.PROFILE_TAIL {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/22/35/left_bar_01.gif);
WIDTH : 232PX;
HEIGHT : 1PX;
FONT-SIZE : 1PX;
}

DIV.MN {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/22/35/left_b_01.gif);
PADDING : 0PX 56PX 25PX 26PX;
WIDTH : 150PX;
OVERFLOW : HIDDEN;
}

DIV.MN A:LINK{ COLOR: #FFC658; TEXT-DECORATION: NONE }
DIV.MN A:VISITED{ COLOR: #FFC658; TEXT-DECORATION: NONE }
DIV.MN A:ACTIVE{ COLOR: #FFC658; }
DIV.MN A:HOVER{ COLOR: #FFF000; TEXT-DECORATION: UNDERLINE }

DIV.MN TD {COLOR : #FFF;}

DIV.MNTTL {
WIDTH : 150PX;
MARGIN : 0PX 0PX 10PX;
PADDING-TOP : 20PX;
BORDER-TOP : 1PX #000 DASHED;
FONT-FAMILY : VERDANA,;
FONT-WEIGHT : BOLD;
COLOR : #CCC;
}

DIV.MN_TAIL {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/22/35/left_bar_01.gif);
WIDTH : 232PX;
HEIGHT : 1PX;
FONT-SIZE : 1PX;
}

.MNBODY B {
color: #cccccc;
}


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

DIV.POST_TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/22/35/post_head_4_01.gif);
WIDTH : 620PX;
HEIGHT : 45PX;
}

DIV.POST {
WIDTH : 533PX;
MARGIN : 0PX 15PX 0PX 72PX;
OVERFLOW : HIDDEN;
}

DIV.POST_HEAD {
MARGIN : 0PX 0PX 20PX;
}

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

DIV.POST_BODY {
WIDTH : 533PX;
COLOR : #333;
PADDING-BOTTOM : 20PX;
}

DIV.POST_BODY A:LINK{ COLOR: #00746B; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:VISITED{ COLOR: #00746B; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:ACTIVE{ COLOR: #00746B; }
DIV.POST_BODY A:HOVER{ COLOR: #83CAC4; TEXT-DECORATION: UNDERLINE }

DIV.POST_TAIL {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/22/35/post_tail_1_01.gif);
PADDING : 32PX 72PX 11PX 0PX;
TEXT-ALIGN : RIGHT;
FONT-FAMILY : TAHOMA;
FONT-SIZE : 8PT;
COLOR : #666;
}


DIV.COMMENT {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/22/35/post_bodycomt_1_01.gif);
PADDING : 20PX 15PX 30PX 72PX;
BORDER-BOTTOM : 1PX DASHED #969696;
}

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

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

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

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

DIV.TRACK_TOP {
LINE-HEIGHT : 170%;
}

DIV.ARCHIVE_HEAD {
FONT-SIZE : 10PT;
FONT-WEIGHT : BOLD;
MARGIN-BOTTOM : 10PX;
}

DIV.ARCHIVE_BODY {
MARGIN-LEFT : 20PX;
MARGIN-BOTTOM : 30PX;
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.BOOKMK {
MARGIN : 10PX;
BORDER : 0PX;
}

IMG.USERMENU {
MARGIN-LEFT : 8PX;
}

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

DIV.BANNER {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/22/35/left_b_01.gif);
PADDING : 20PX 56PX 10PX 26PX;
WIDTH : 150PX;
}

.SMALL {
FONT-SIZE : 8PT;
}

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

.TIME {
FONT-FAMILY : VERDANA, 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 {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/22/35/left_g_01.gif);
PADDING : 20PX 56PX 25PX 26PX;
WIDTH : 150PX;
}

DIV.CAL_HEAD {
WIDTH : 145PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
TEXT-ALIGN : CENTER;
PADDING : 0PX 0PX 15PX;
}

DIV.CAL_HEAD A:LINK{ COLOR: #FFC658; TEXT-DECORATION: NONE }
DIV.CAL_HEAD A:VISITED{ COLOR: #FFC658; TEXT-DECORATION: NONE }
DIV.CAL_HEAD A:ACTIVE{ COLOR: #FFC658; }
DIV.CAL_HEAD A:HOVER{ COLOR: #FFF000; TEXT-DECORATION: UNDERLINE }

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

DIV.CAL_BODY TD A:LINK{ COLOR: #FFC658; TEXT-DECORATION: NONE }
DIV.CAL_BODY TD A:VISITED{ COLOR: #FFC658; TEXT-DECORATION: NONE }
DIV.CAL_BODY TD A:ACTIVE{ COLOR: #FFC658; }
DIV.CAL_BODY TD A:HOVER{ COLOR: #FFF000; TEXT-DECORATION: UNDERLINE }

DIV.CAL_BOTTOM {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/22/35/left_bar_01.gif);
WIDTH : 232PX;
HEIGHT : 1PX;
FONT-SIZE : 1PX;
}

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

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

.CAL_SUN {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #FFA683;
TEXT-ALIGN : CENTER;
}

.CAL_SAT {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #3C65B7;
TEXT-ALIGN : CENTER;
}

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

.CAL_TR {}

DIV.XML {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/22/35/left_b_01.gif);
PADDING : 0PX 56PX 100PX 26PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
color: #ccc;
}

DIV.XML A:LINK{ COLOR: #FFC658; TEXT-DECORATION: NONE }
DIV.XML A:VISITED{ COLOR: #FFC658; TEXT-DECORATION: NONE }
DIV.XML A:ACTIVE{ COLOR: #FFC658; }
DIV.XML A:HOVER{ COLOR: #FFF000; TEXT-DECORATION: UNDERLINE }

[PR]
by asazuki508e | 2011-06-22 20:58 | Comments(0)