人気ブログランキング | 話題のタグを見る

手書きノート


by asazuki

スキン「Two Colors」をセンタリングするためのHTML/CSS -オレンジベース-

スキン「Two Colors」をセンタリングするためのHTML/CSSのオレンジベースバージョンです。

 スキン「Two Colors」をセンタリングするためのHTML/CSS -オレンジベース-_d0112463_7194099.jpg
demo



HTML


<table BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100%>
<tr>
<td COLSPAN=2 VALIGN=TOP WIDTH=100%>
<div ID=TOP>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr>
<td>
<div CLASS=HEADER><$header$></DIV>
</td>
</tr>
</table>
<div CLASS=URL><$blogurl$></DIV>
<div CLASS=USERMENU><$adminmenu type=1$></DIV>
</div>
</td>
</tr>
</table>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER align=center>
<tr>
<td VALIGN=TOP WIDTH=70%>
<div ID=LEFT>
<$post$>
<br>
<br>
<center>
<$prepage type=1$>
    
<$nextpage type=1$>
</center>
<br>
<br>
</div>
</td>
<td VALIGN=TOP WIDTH=30%>
<div ID=RIGHT>
<div CLASS=MNTTL>アバウト</DIV>
<div CLASS=PROFILE>
<$logoimage type=1$>
<$description$>
<$nick$>
</div>
<$calendar type=2$>
<$menuright$>
<$banner type=1$>
<$xml$>
</div>
</td>
</tr>
</table>



CSS


/* excite blog skin css */

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

A:LINK{ COLOR: #6A3A01; TEXT-DECORATION: NONE }
A:VISITED{ COLOR: #6A3A01; TEXT-DECORATION: NONE }
A:ACTIVE{ COLOR: #6A3A01; TEXT-DECORATION: NONE }
A:HOVER{ COLOR: #E7E7E7; TEXT-DECORATION: UNDERLINE }


DIV#TOP {
BACKGROUND : #1F1F1F;
BORDER-BOTTOM : 5PX SOLID #4E4E4E;
PADDING : 25PX 25PX 0PX;
}

DIV#LEFT {
PADDING : 25PX;
MARGIN-BOTTOM : 50PX;
OVERFLOW : HIDDEN;
width: 550px;
}

DIV#RIGHT {
PADDING-RIGHT : 25PX;
MARGIN-BOTTOM : 50PX;
OVERFLOW : HIDDEN;
width: 190px;
}

DIV.HEADER {
FONT-FAMILY : "Trebuchet MS", TAHOMA, VERDANA ;
FONT-SIZE : 13PT;
}

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

DIV.URL {
FONT-FAMILY : VERDANA ;
FONT-SIZE : 10PT;
LETTER-SPACING : 2PX;
}

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

DIV.USERMENU {
PADDING-BOTTOM : 5PX;
TEXT-ALIGN : RIGHT;
COLOR : #FFF;
}

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

DIV.PROFILE {
LINE-HEIGHT : 150%;
MARGIN-BOTTOM : 20PX;
}

DIV.MN {
MARGIN-TOP : 5PX;
MARGIN-BOTTOM : 20PX;
LINE-HEIGHT : 150%;
FONT-FAMILY : TAHOMA;
}

DIV.MNTTL {
PADDING : 2PX 10PX;
MARGIN : 25PX 0PX 10PX;
MARGIN-BOTTOM : 10PX;
BACKGROUND : #E78B1F;
FONT-FAMILY : TAHOMA;
LETTER-SPACING : 2PX;
}

DIV.POST {
MARGIN-BOTTOM : 30PX;
}

DIV.POST_HEAD {
BORDER-BOTTOM : 1PX SOLID #6F6F6F;
PADDING-TOP : 3PX;
PADDING-BOTTOM : 3PX;
FONT-FAMILY : VERDANA;
LETTER-SPACING : 2PX;
COLOR : #6F6F6F;
}

DIV.POST_BODY {
MARGIN-TOP : 3PX;
MARGIN-BOTTOM : 25PX;
LINE-HEIGHT : 1.5;
}

DIV.POST_BODY A:LINK{ COLOR: #6A3A01; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:VISITED{ COLOR: #6A3A01; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:ACTIVE{ COLOR: #6A3A01; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:HOVER{ COLOR: #E7E7E7; TEXT-DECORATION: UNDERLINE }

DIV.POST_TTL {
FONT-SIZE : MEDIUM;
FONT-FAMILY : GEORGIA;
FONT-WEIGHT : BOLD;
MARGIN : 15PX 0PX;
COLOR : #303030;
}

DIV.POST_ADMIN {
FONT-SIZE : 9PT;
MARGIN : 20PX 0PX;
}

DIV.POST_TAIL {
FONT-FAMILY : TAHOMA;
FONT-SIZE : 11PX;
MARGIN : 10PX 0PX 20PX;
TEXT-ALIGN : RIGHT;
}

DIV.POST_EDIT {
TEXT-ALIGN : RIGHT;
FONT-SIZE : 8PT;
MARGIN-BOTTOM : 3PX;
}

DIV.COMMENT {
MARGIN-TOP : 20PX;
MARGIN-BOTTOM : 20PX;
BORDER : 1PX #A96E28 SOLID;
BACKGROUND : #EF9F41;
PADDING : 15PX;
PADDING-TOP : 10PX;
}

DIV.COMMENT_BODY {
MARGIN-TOP : 6PX;
MARGIN-BOTTOM : 20PX;
LINE-HEIGHT : 130%;
}

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

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-WEIGHT : BOLD;
MARGIN-BOTTOM : 10PX;
}

DIV.ARCHIVE_BODY {
MARGIN-TOP : 20PX;
MARGIN-BOTTOM : 10PX;
LINE-HEIGHT : 160%;
PADDING-BOTTOM : 100PX;
}

IMG.IMAGE_TOP {
MARGIN-BOTTOM : 15PX;
}

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

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

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

IMG.BOOKMK {
MARGIN : 10PX;
BORDER : 0PX;
}

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

DIV.BANNER {
MARGIN-TOP : 40PX;
MARGIN-BOTTOM : 10PX;
TEXT-ALIGN : CENTER;
}

.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 : 8PT;
FONT-WEIGHT : BOLD;
}

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


DIV.CAL_TOP {
PADDING : 2PX;
PADDING-LEFT : 10PX;
MARGIN-TOP : 25PX;
MARGIN-BOTTOM : 10PX;
BACKGROUND : #E78B1F;
FONT-FAMILY : TAHOMA,;
LETTER-SPACING : 2PX;
}

DIV.CAL {
TEXT-ALIGN : CENTER;
}

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

DIV.CAL_BODY {
WIDTH : 190PX;
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 : #E78B1F;
COLOR : #3D5586;
TEXT-ALIGN : CENTER;
}

.CAL_TR { }

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


また、画像がはみ出ないようにするために、本文の幅を650px に設定してください。
by asazuki508e | 2011-07-23 07:21