tomemo

スキン「木更津キャッツアイ」を右サイドバー化するためのHTML/CSS

スキン「木更津キャッツアイ」を右サイドバー化するためのHTML/CSSです。

d0112463_4222185.jpg
demo



HTML


<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="800">
<tr>
<td class="bk01">
<div class="bk">
<div class="bk02">
<div class="box01">
<table width="475" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="96" valign="bottom">
<div class="HEADER"><$header$></div>
<div class="URL"><$blogurl$></div></td>
</tr>
<tr>
<td align="left" style="padding: 0 0 0 43px;"><img src="http://md.exblog.jp/skn/img/a/01/05/3/logo.gif" alt="木更津キャッツアイ ワールドシリーズ" width="349" height="173"></td>
</tr>
<tr>
<td class="img01" align="left"><img src="http://md.exblog.jp/skn/img/a/01/05/3/img01.gif" alt="10月28日(土)シネマライズほか全国一斉ロードショー" width="292" height="31"></td>
</tr>
<tr>
<td class="copy">(C)2006 映画「木更津キャッツアイ ワールドシリーズ」製作委員会<img src="http://md.exblog.jp/skn/img/a/01/05/3/spacer.gif" width="1" height="25"></td>
</tr>
</table>
</div>
</div>
</div></td>
</tr>
<tr>
<td align="left" style="padding-left:6px;"><table width="787" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9" background="http://md.exblog.jp/skn/img/a/01/05/3/line01.gif" style="background-repeat:repeat-y;"><img src="http://md.exblog.jp/skn/img/a/01/05/3/spacer.gif" width="9" height="5" /></td>

<td width="511" align="left" valign="top" bgcolor="#FFFFFF">
<$post$><br />
<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><tr><td colspan="3"><img src="http://md.exblog.jp/skn/img/a/01/05/3/spacer.gif" width="1" height="25"></td></tr></table>
</td>

<td width="29" bgcolor="#FFFFFF"><img src="http://md.exblog.jp/skn/img/a/01/05/3/spacer.gif" width="29" height="1" /></td>

<td width="230" bgcolor="#FFFFFF" class="set01" valign="top">
<div class="USERMENU"><$adminmenu type=1$></div>
<img src="http://md.exblog.jp/skn/img/a/01/05/3/img02.gif" width="220" height="10" /><img src="http://md.exblog.jp/skn/img/a/01/05/3/img03.gif" alt="いよいよやつらが、帰ってくる!笑いと涙の完結篇!!" width="220" height="35" />
<p>ぶっさんの死後3年。キャッツたちはぶっさんに、そして大人になりきれない自分自身に、最初で最後の"ばいばい"を言えるのか!?</p>
<blockquote>■ 監督:金子文紀 ■ 脚本:宮藤官九郎
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td align="left" valign="top">■ 出演:</td>
<td>岡田准一、櫻井翔、酒井若菜、<br />岡田義徳、佐藤隆太、塚本高史、<br />阿部サダヲ、山口智充、ユンソナ、<br />古田新太、森下愛子、小日向文世、<br />
薬師丸ひろ子、栗山千明、MCU</td>
</tr></table>■ <a href="http://www.tbs.co.jp/catseye/index-j.html">公式サイト</a></blockquote>
<img src="http://md.exblog.jp/skn/img/a/01/05/3/img04.jpg" width="210" height="128" class="photo" /><img src="http://md.exblog.jp/skn/img/a/01/05/3/img02.gif" width="220" height="10" />
<div class="PROFILE">
<$logoimage type=1$>
<$description$>
<$nick$></div>
<div class="CAL" align="center"><$calendar type=1$></div>
<div class="MN"> <$menuleft$></div>
<div align="center"><$banner type=1$></div>
<$xml$></td>

<td width="9" background="http://md.exblog.jp/skn/img/a/01/05/3/line02.gif" style="background-repeat:repeat-y;"><img src="http://md.exblog.jp/skn/img/a/01/05/3/spacer.gif" width="9" height="5" /></td>
</tr>
<tr align="left" valign="top">
<td colspan="5"><img src="http://md.exblog.jp/skn/img/a/01/05/3/line03.gif" width="787" height="9" /></td>
</tr>
</table></td>
</tr>
</table>
</div>


CSS


/* excite blog skin css */

BODY{ MARGIN : 0PX;PADDING : 0PX; background-image:url(http://md.exblog.jp/skn/img/a/01/05/3/bk.jpg);}
BODY,TD,DIV,LI{ FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #333333; }

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

DIV.HEADER{ WIDTH:454PX; OVERFLOW:HIDDEN; FONT :BOLD 18PX/110% Courier New,TAHOMA; TEXT-ALIGN:LEFT; COLOR:#FFE023; }

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

DIV.URL{ WIDTH:392PX; FONT : 16PX/100% VERDANA,TAHOMA; PADDING:5px 0 10px 0;TEXT-ALIGN:RIGHT; COLOR:#FFE023; }
DIV.URL A:LINK { COLOR:#FFE023; TEXT-DECORATION: NONE; }
DIV.URL A:VISITED { COLOR:#FFE023;TEXT-DECORATION: NONE; }
DIV.URL A:HOVER { COLOR:#FFE023;TEXT-DECORATION: NONE; }

DIV.USERMENU{ FONT : 8PT/100% VERDANA; TEXT-ALIGN : center; COLOR:#333333; PADDING:15px 0 10px 0}
DIV.USERMENU A:LINK {COLOR: #333333; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #333333; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #333333; TEXT-DECORATION: UNDERLINE;}

DIV.PROFILE{ WIDTH : 220PX; FONT-SIZE : 10PX; PADDING : 25PX 0 0 0; LINE-HEIGHT : 130%; OVERFLOW : HIDDEN; TEXT-ALIGN:CENTER;}
DIV.MN{ TEXT-ALIGN:LEFT; FONT-SIZE : 12PX;}
DIV.MNTTL{ WIDTH : 215PX; FONT-WEIGHT: BOLD; HEIGHT:30PX; background-image:url(http://md.exblog.jp/skn/img/a/01/05/3/img05.gif); BACKGROUND-REPEAT:NO-REPEAT;PADDING : 18PX 0 0 5PX; MARGIN : 15PX 0 0 0; }
DIV.MEMOBODY{ WIDTH : 212PX; OVERFLOW : HIDDEN; PADDING: 8px 0 0 8PX;}
DIV.MEMOBODY A:LINK {COLOR: #003399; TEXT-DECORATION: NONE}
DIV.MEMOBODY A:VISITED {COLOR: #003399; TEXT-DECORATION: NONE}
DIV.MEMOBODY A:HOVER {COLOR: #003399; TEXT-DECORATION: UNDERLINE;}

DIV.POST{ MARGIN : 0 0 30PX 0; TEXT-ALIGN:LEFT;}
DIV.POST_HEAD{ BORDER-BOTTOM : 1PX #CCC SOLID; MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; }
DIV.POST_TTL{ WIDTH:400PX; FONT : BOLD 14PX/130%; padding:40px 10px 5px 65px; COLOR:#FFE023; WORD-BREAK: BREAK-ALL; OVERFLOW:HIDDEN;}
DIV.POST_TTL A:LINK {COLOR: #FFE023; TEXT-DECORATION: NONE}
DIV.POST_TTL A:VISITED {COLOR: #FFE023; TEXT-DECORATION: NONE}
DIV.POST_TTL A:HOVER {COLOR: #FFE023; TEXT-DECORATION: UNDERLINE;}

DIV.POST_ADMIN{ TEXT-ALIGN : RIGHT; FONT : 10PT/130%; MARGIN: 0 10PX 0 0;}
DIV.POST_BODY{ LINE-HEIGHT : 1.5; WIDTH : 459PX; MARGIN: 15PX 0 15PX 15PX; WORD-BREAK: BREAK-ALL; OVERFLOW:HIDDEN; }
DIV.POST_TAIL{ FONT : 11PX/150% TAHOMA; MARGIN : 10PX; TEXT-ALIGN : RIGHT; COLOR:#666666;}
DIV.POST_TAIL A:LINK{ COLOR:#666666; TEXT-DECORATION: NONE; }
DIV.POST_TAIL A:VISITED {COLOR: #666666; TEXT-DECORATION: NONE}
DIV.POST_TAIL A:HOVER{ COLOR:#666666;TEXT-DECORATION: UNDERLINE;}

DIV.COMMENT{ WIDTH:459PX; BORDER-TOP : 1PX #D3D3D3 SOLID; PADDING : 15PX; MARGIN : 20PX 0PX; WORD-BREAK: BREAK-ALL; OVERFLOW:HIDDEN; }
DIV.COMMENT_BODY{ WIDTH:459PX; MARGIN-BOTTOM : 20PX; LINE-HEIGHT : 130%;}
DIV.COMMENT_TAIL{ MARGIN : 8PX 0PX 5PX; FONT : 8PT/150% TAHOMA; 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-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_MID{ MARGIN-TOP : 15PX; MARGIN-BOTTOM : 15PX; }
IMG.BOOKMK{ MARGIN : 10PX; BORDER : 0PX; }
IMG.USERMENU{ MARGIN-LEFT : 8PX; }
IMG.LOGO{ MARGIN-BOTTOM : 10PX; BORDER:1PX SOLID #999;}

DIV.BANNER{ MARGIN : 30PX 0PX 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 20PX; WIDTH : 200PX; TEXT-ALIGN : CENTER;}
DIV.CAL_HEAD { WIDTH : 200PX; FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; PADDING : 4PX 0PX; MARGIN-BOTTOM : 10PX;}
DIV.CAL_BODY { WIDTH : 200PX; 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 : #D36654; TEXT-ALIGN : CENTER;}
.CAL_SAT{ FONT : BOLD 7PT/170% VERDANA; COLOR : #3572A1; TEXT-ALIGN : CENTER;}
.CAL_TODAY{ FONT : BOLD 7PT/170% VERDANA; BACKGROUND : #E3E3E3; COLOR : #3D5586; TEXT-ALIGN : CENTER; }
.CAL_TR { }

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

/*-----------------------------------------*/

blockquote {
margin:0 0 0 0;
padding:0 0 0 0;
}

.copy{
FONT-SIZE:10px;
color:#666666;
text-align:right;
padding: 0 20px 0 0;
}
.bk{
background-image:url(http://md.exblog.jp/skn/img/a/01/05/3/bg03.gif);
background-repeat:repeat-y;
}
.bk01{
background-image:url(http://md.exblog.jp/skn/img/a/01/05/3/bg01.gif);
background-repeat:no-repeat;
padding:10px 0 0 0;
}
.bk02{
background-image:url(http://md.exblog.jp/skn/img/a/01/05/3/bg02.gif);
background-repeat:no-repeat;
background-position:bottom;
}
.box01{
margin: 0 0 0 324px;
padding:0 0 0 0;
}
.img01{
padding: 0 0 0 150px;
}
.set01{
FONT-SIZE:12px;
width:220px;
padding: 0 10px 20px 0;
}
.set01 p{
FONT-SIZE:10px;
color:#232323;
margin: 12px 0 0 4px;
}
.set01 blockquote {
border:1px solid #CCCCCC;
padding:5px;
margin:8px 0 0 0;
FONT-SIZE:10px;
color:#666666;
}
.set01 blockquote td{
FONT-SIZE:10px;
color:#666666;
}
.photo{
margin:10px 0 0 0;
}

[PR]
by asazuki508e | 2011-06-28 04:25 | Comments(0)