tomemo

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

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





HTML


<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="750">
<tr><td bgcolor="#000000"><img src="http://md.exblog.jp/skn/img/a/01/05/0//dot.gif" width=10 height=10 border=0 alt=""></td></tr>
<tr><td bgcolor="#9B5F1E"><img src="http://md.exblog.jp/skn/img/a/01/05/0//dot.gif" width=1 height=1 border=0 alt=""></td></tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="750">
<tr>
<td align=right valign=top>
<DIV class=MAIN_BG>
<a href="http://ent2.excite.co.jp/shopping/bob/"><img src="http://md.exblog.jp/skn/img/a/01/05/0//dot.gif" width=290 height=75 border=0 alt=""></a>
<div class="HEADER"><$header$></div>
<div class="SUBTXT"><$blogurl$> <font color="#FFFFFF"><$adminmenu type=1$></font></div>
</DIV>
</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="750">
<tr>
<td align=center>
<DIV class="BODYBG">

<table border="0" cellpadding="0" cellspacing="0" width="748">
<tr valign=top>

<td align=left>
<DIV class="MAINMENU">

<$post$>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<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>

</DIV>
</td>
<td align=left>
<DIV class="LEFTMENU">

<DIV class="LOGO">
<table border="0" cellpadding="0" cellspacing="0" width=162>
<tr>
<td bgcolor="#4A2601" align=center>
<table border="0" cellpadding="2" cellspacing="1" width=162>
<tr>
<td bgcolor="#FFFFFF"><$logoimage type=1$></td>
</tr>
</table>
</td>
</tr>
</table>
</DIV>
<DIV class="PROFILE">
<table border="0" cellpadding="0" cellspacing="0" width=162>
<tr>
<td><DIV class="PROFILETXT"><$description$><$nick$></DIV></td>
</tr>
</table>
</DIV>

<div class="MN">
<$menuleft$>
</div>



<$banner type=1$>
<$xml$>

</DIV>
</td>

</tr>
</table>

</td>
</tr>
</table>


</div>


CSS


/* excite blog default skin html */

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

A:LINK{ COLOR: #0000FF; TEXT-DECORATION: NONE; }
A:VISITED{ COLOR: #0000FF; TEXT-DECORATION: NONE; }
A:ACTIVE{ COLOR: #0000FF; TEXT-DECORATION: NONE; }
A:HOVER{ COLOR: #813888; TEXT-DECORATION: UNDERLINE; }

DIV.MAIN_BG {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/05/0/main.jpg);
BACKGROUND-REPEAT : NO-REPEAT;
WIDTH : 750PX;
HEIGHT : 293PX;
}

DIV.HEADER{
FONT-SIZE : 17PX;
LINE-HEIGHT : 18PX;
FONT-FAMILY : Courier New,TAHOMA;
WIDTH : 280PX;
MARGIN-TOP:50PX;
MARGIN-LEFT:450PX;
MARGIN-RIGHT:20PX;
TEXT-ALIGN:RIGHT;
}

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

DIV.SUBTXT{
FONT : 8PT;
WIDTH : 280PX;
MARGIN-LEFT:450PX;
MARGIN-RIGHT:20PX;
TEXT-ALIGN:RIGHT;
}

DIV.SUBTXT A:LINK {COLOR: #FFFF66; TEXT-DECORATION: NONE}
DIV.SUBTXT A:VISITED {COLOR: #FFFF66; TEXT-DECORATION: NONE}
DIV.SUBTXT A:HOVER {COLOR: #FF0000; TEXT-DECORATION: UNDERLINE;}

DIV.BODYBG {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/201106/27/35/mainbg_01.gif);
WIDTH : 750PX;
}

DIV.LEFTMENU{
WIDTH : 200PX;
}

DIV.MAINMENU{
WIDTH : 548PX;
}

DIV.LOGO{
MARGIN-TOP:15PX;
MARGIN-LEFT:17PX;
MARGIN-BOTTOM:3PX;
}

DIV.PROFILE{
MARGIN-LEFT:17PX;
MARGIN-BOTTOM:15PX;
}

DIV.PROFILETXT{
FONT : 9PX;
LINE-HEIGHT : 15PX;
}

DIV.CALE{
MARGIN-LEFT:17PX;
MARGIN-BOTTOM:15PX;
}


DIV.MN{ TEXT-ALIGN:LEFT; }

DIV.MNTTL{
FONT : 12PX/120%;
COLOR:#FFFFFF;
PADDING : 5PX 8PX 5PX;
}

DIV.MNBODY{
FONT : 12PX/150%;
PADDING : 5PX 0PX 10PX;
}

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


DIV.POST{
MARGIN-TOP : 15PX;
MARGIN-LEFT: 10PX;
}

DIV.POST_HEAD{
FONT : 12PX;
COLOR:#00000;
PADDING : 5PX 10PX 5PX;
}


DIV.POST_TTL{ FONT : BOLD 15PT/130%;}
DIV.POST_ADMIN{ TEXT-ALIGN : RIGHT;}

DIV.POST_BODY{
WIDTH:485PX;
LINE-HEIGHT : 1.4;
TEXT-ALIGN : LEFT;
MARGIN-BOTTOM : 10PX;
PADDING : 0PX 0PX 0PX;
OVERFLOW : HIDDEN;
}


DIV.POST_TAIL{
FONT : 11PX/150% TAHOMA;
TEXT-ALIGN : RIGHT;
}

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


DIV.COMMENT_LINK A:LINK {COLOR: #993300; TEXT-DECORATION: NONE}
DIV.COMMENT_LINK A:VISITED {COLOR: #993300; TEXT-DECORATION: NONE}
DIV.COMMENT_LINK A:HOVER {COLOR: #993300; TEXT-DECORATION: UNDERLINE;}


DIV.COMMENT{
BACKGROUND : #CCCCCC;
PADDING : 15PX;
MARGIN : 5PX 0PX;
}

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

DIV.COMMENT_TAIL{
MARGIN : 8PX 0PX 5PX;
FONT : 8PT/120% TAHOMA;
COLOR : #000000;
}

DIV.COMMENT_INPUT{
MARGIN-TOP : 10PX;
BORDER-TOP : 1PX #6A3A0C DOTTED;
PADDING-TOP : 10PX;
}

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


DIV.TRACK_TOP { LINE-HEIGHT : 170%; }
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; TEXT-ALIGN:LEFT}
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{ MARGIN : 30PX 22PX 10PX; }

.SMALL{ FONT-SIZE : 11PX; }
.DATE{ FONT : BOLD 8PT/150% TAHOMA; }
.TIME{ FONT : 8PT/150% TAHOMA; TEXT-ALIGN : LEFT; }
.AUTHOR{ FONT : BOLD 8PT TAHOMA; }
.TXTFLD{ FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:#FFF; }
.SUBMIT{ FONT :9PT/140% ;COLOR:#000; }

DIV.CAL_TOP { }
DIV.CAL { MARGIN : 20PX 0PX 0PX; WIDTH : 162PX; TEXT-ALIGN : CENTER;}

DIV.CAL_HEAD {
WIDTH : 160PX;
FONT : 8PT/150% VERDANA;
TEXT-ALIGN : CENTER;
PADDING : 0PX 0PX;
MARGIN-BOTTOM : 5PX;
}


DIV.CAL_HEAD A:LINK {COLOR: #CC0000; TEXT-DECORATION: NONE}
DIV.CAL_HEAD A:VISITED {COLOR: #CC0000; TEXT-DECORATION: NONE}
DIV.CAL_HEAD A:HOVER {COLOR: #FF6600; TEXT-DECORATION: UNDERLINE;}

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

.CAL{ FONT : 7PT/170% VERDANA; TEXT-ALIGN : CENTER; }
.CAL_DAY{ FONT : BOLD 7PT/170% VERDANA; TEXT-ALIGN : CENTER; }

.CAL_SUN{
FONT : BOLD 7PT/170% VERDANA;
COLOR : #FF0000;
TEXT-ALIGN : CENTER;
}

.CAL_SAT{ FONT : BOLD 7PT/170% VERDANA; COLOR : #3572A1; TEXT-ALIGN : CENTER;}

.CAL_TODAY{
FONT : BOLD 7PT/170% VERDANA;
BACKGROUND : #C1AF93;
COLOR : #FF6600;
TEXT-ALIGN : CENTER;
}

.CAL_TR { }



DIV.XML { FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; }

[PR]
by asazuki508e | 2011-06-27 22:17 | Comments(0)