tomemo

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

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





HTML


<center>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=910>
<tr>
<td WIDTH=6 CLASS=SH_L>
</td>
<td WIDTH=898 VALIGN=TOP>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=898>
<tr>
<td COLSPAN=7 WIDTH=898 CLASS=BD_TOP VALIGN=TOP>
<div ID=TOP>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=898>
<tr>
<td WIDTH=598>
<div CLASS=HEADER>
<$header$>
<span CLASS=URL><$blogurl$></SPAN>
</div>
</td>
<td WIDTH=300>
<div CLASS=USERMENU><$adminmenu type=1$></DIV>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td WIDTH=2 CLASS=BD_OUT>
</td>
<td WIDTH=11 CLASS=BD_IN>
</td>
<td WIDTH=628 CLASS=BD_RIGHT VALIGN=TOP>
<div ID=RIGHT>
<div CLASS=POST_TOP>
</div>
<div CLASS=POST>
<center>
<$post$>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=220>
<tr>
<td WIDTH=24 HEIGHT=24 CLASS=BT_PREV>
</td>
<td WIDTH=66 ALIGN=RIGHT CLASS=PGNAVI><$prepage type=2$></TD>
<td WIDTH=40>
</td>
<td WIDTH=66 ALIGN=LEFT CLASS=PGNAVI><$nextpage type=2$></TD>
<td WIDTH=24 HEIGHT=24 CLASS=BT_NEXT>
</td>
</tr>
</table>
<br>
<br>
</center>
</div>
<div CLASS=POST_BOTTOM>
</div>
</div>
</td>
<td WIDTH=9 CLASS=BD_CENTER>
</td>
<td WIDTH=235 CLASS=BD_LEFT VALIGN=TOP>
<div ID=LEFT>
<center>
<div CLASS=PROFILE_TOP>
</div>
<div CLASS=PROFILE_BODY>
<div CLASS=PROFILE>
<$description$>
<$nick$>
</div>
<center><$logoimage type=1$></CENTER>
</div>
<div CLASS=PROFILE_BOTTOM>
</div>
<$calendar type=2$>
<$menuleft$>
<$banner type=1$>
<$xml$>
</center>
</div>
</td>
<td WIDTH=11 CLASS=BD_IN>
</td>
<td WIDTH=2 CLASS=BD_OUT>
</td>
</tr>
<tr>
<td COLSPAN=7 WIDTH=898 CLASS=BD_BOTTOM VALIGN=TOP>
</td>
</tr>
</table>
</td>
<td WIDTH=6 CLASS=SH_R>
</td>
</tr>
</table>
</center>


CSS

/* excite blog skin css */

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


A:LINK{ COLOR: #666; TEXT-DECORATION: NONE }
A:VISITED{ COLOR: #666; TEXT-DECORATION: NONE }
A:ACTIVE{ COLOR: #666; }
A:HOVER{ COLOR: #000; TEXT-DECORATION: UNDERLINE }


TD.SH_L {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/sh_l_1.gif);
WIDTH : 6PX;
}

TD.SH_R {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/sh_r_1.gif);
WIDTH : 6PX;
}

TD.BD_TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/24/35/top_1_01.gif);
WIDTH : 898PX;
HEIGHT : 86PX;
}

TD.BD_OUT {
BACKGROUND : #636163;
WIDTH : 2PX;
}

TD.BD_IN {
BACKGROUND : #8C8E8C;
WIDTH : 11PX;
}

TD.BD_LEFT {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/body_1.gif);
WIDTH : 235PX;
}

TD.BD_RIGHT {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/body_1.gif);
WIDTH : 628PX;
}

TD.BD_CENTER {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/center_1.gif);
WIDTH : 9PX;
}

TD.BD_BOTTOM {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/24/35/bottom_1_02.gif);
WIDTH : 898PX;
HEIGHT : 50PX;
}


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

DIV#LEFT {
TEXT-ALIGN : LEFT;
}

DIV#RIGHT {
TEXT-ALIGN : LEFT;
}

DIV.HEADER {
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 14PT;
FONT-WEIGHT : BOLD;
MARGIN : 20PX 0PX 10PX 40PX;
LINE-HEIGHT : 100%;
}

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

SPAN.URL {
FONT-FAMILY : VERDANA,TAHOMA ;
FONT-SIZE : 8PT;
MARGIN-LEFT : 5PX;
FONT-WEIGHT : NORMAL;
TEXT-ALIGN : CENTER;
}

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


DIV.USERMENU {
FONT-SIZE : 9PT;
TEXT-ALIGN : RIGHT;
MARGIN : 23PX 40PX 0PX;
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: #DDD; TEXT-DECORATION: UNDERLINE}


IMG.BT_VALLEY {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/bt_valley_1.gif);
WIDTH : 70PX;
HEIGHT : 29PX;
MARGIN-TOP : 27PX;
}

IMG.BT_ADD {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/bt_addlink_1.gif);
WIDTH : 79PX;
HEIGHT : 29PX;
MARGIN-TOP : 27PX;
}

IMG.BT_MY {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/bt_my_1.gif);
WIDTH : 91PX;
HEIGHT : 29PX;
MARGIN-TOP : 27PX;
}

IMG.BT_NEWPOST {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/bt_newpost_1.gif);
WIDTH : 88PX;
HEIGHT : 29PX;
MARGIN-TOP : 27PX;
}

IMG.BT_CONFIG {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/bt_config_1.gif);
WIDTH : 70PX;
HEIGHT : 29PX;
MARGIN-TOP : 27PX;
}

IMG.BT_LOGIN {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/bt_login_1.gif);
WIDTH : 67PX;
HEIGHT : 29PX;
MARGIN-TOP : 27PX;
}



DIV.PROFILE_TOP {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/pro_top_1.gif);
WIDTH : 235PX;
HEIGHT : 10PX;
FONT-SIZE : 1PX;
}

DIV.PROFILE_BODY {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/pro_body_1.gif);
WIDTH : 235PX;
}

DIV.PROFILE {
WIDTH : 150PX;
LINE-HEIGHT : 150%;
OVERFLOW : HIDDEN;
TEXT-ALIGN : LEFT;
PADDING : 7PX 0PX 10PX;
}


DIV.PROFILE_BOTTOM {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/pro_bottom_1.gif);
WIDTH : 235PX;
HEIGHT : 15PX;
FONT-SIZE : 1PX;
}

DIV.MNTTL {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/mn_ttl_1.gif);
WIDTH : 165PX;
HEIGHT : 25PX;
COLOR : #000;
MARGIN-TOP : 15PX;
LINE-HEIGHT : 140%;
}

DIV.MNBODY {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/mn_body_1.gif);
WIDTH : 150PX;
TEXT-ALIGN : CENTER;
MARGIN : 0PX 7PX 0PX;
PADDING : 5PX 7PX 0PX;
FONT-SIZE : 8PT;
OVERFLOW : HIDDEN;
}

DIV.MNBOTTOM {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/mn_bottom_1.gif);
WIDTH : 165PX;
HEIGHT : 15PX;
FONT-SIZE : 1PX;
}

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

DIV.POST_TOP {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/post_top_1.gif);
WIDTH : 628PX;
HEIGHT : 10PX;
FONT-SIZE : 1PX;
}

DIV.POST_BOTTOM {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/post_bottom_1.gif);
WIDTH : 628PX;
HEIGHT : 15PX;
FONT-SIZE : 1PX;
}

DIV.POST {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/post_body_1.gif);
WIDTH : 628PX;
}

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

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


DIV.POST_BODY {
WIDTH : 450PX;
PADDING-BOTTOM : 20PX;
LINE-HEIGHT : 1.5;
TEXT-ALIGN : LEFT;
OVERFLOW : HIDDEN;
}

DIV.POST_BODY A:LINK{ COLOR: #D69E31; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:VISITED{ COLOR: #D69E31; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:ACTIVE{ COLOR: #D69E31; }
DIV.POST_BODY A:HOVER{ COLOR: #FFF000; TEXT-DECORATION: UNDERLINE }


DIV.POST_TTL {
COLOR : #FFC300;
FONT-WEIGHT : BOLD;
TEXT-ALIGN : LEFT;
}

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

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



DIV.COMMENT {
WIDTH : 450PX;
BORDER : 1PX #535353 SOLID;
BACKGROUND : #272727;
TEXT-ALIGN : LEFT;
PADDING : 15PX 0PX;
MARGIN-BOTTOM : 20PX;
}

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 : #AAA;
}

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

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 : 15PX;
}

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

.SMALL {
FONT-SIZE : 11PX;
COLOR : #000;
}

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



.BT_PREV {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/bt_prev_1.gif);
}

.BT_NEXT {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/bt_next_1.gif);
}

.PGNAVI A:LINK{ COLOR: #D69E31; TEXT-DECORATION: NONE }
.PGNAVI A:VISITED{ COLOR: #D69E31; TEXT-DECORATION: NONE }
.PGNAVI A:ACTIVE{ COLOR: #D69E31; }
.PGNAVI A:HOVER{ COLOR: #FFF000; TEXT-DECORATION: UNDERLINE }



DIV.CAL_TOP {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/mn_ttl_1.gif);
WIDTH : 165PX;
HEIGHT : 25PX;
COLOR : #000;
MARGIN-TOP : 15PX;
LINE-HEIGHT : 130%;
}

DIV.CAL {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/mn_body_1.gif);
WIDTH : 150PX;
TEXT-ALIGN : CENTER;
PADDING : 0PX 7PX;
}

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

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

DIV.CAL_BOTTOM {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/0/mn_bottom_1.gif);
WIDTH : 165PX;
HEIGHT : 15PX;
FONT-SIZE : 1PX;
}

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

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

.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 : #E2E2E2;
COLOR : #3D5586;
TEXT-ALIGN : CENTER;
}

.CAL_TR {}

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

[PR]
by asazuki508e | 2011-06-24 21:45 | Comments(0)