tomemo

スキン「四季」を右サイドバー化するためのHTML/CSS -冬-

スキン「四季」を右サイドバー化するためのHTML/CSSの冬バージョンです。





HTML



<div id="wrapper">
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100% HEIGHT=70PX>
<tr>
<td WIDTH=843PX CLASS=TOP VALIGN=TOP>
<div ID=TOP>
<div CLASS=USERMENU><$adminmenu type=2$></DIV>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr>
<td WIDTH=43>
<div STYLE="WIDTH:43PX;">
</div>
</td>
<td WIDTH=577 HEIGHT=47 CLASS=TOP_MID>
<div STYLE="WIDTH:577PX;">
</div>
</td>
<td WIDTH=233 HEIGHT=47 CLASS=TOP_LEFT>
<div STYLE="WIDTH:233PX;">
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=889>
<tr>
<td WIDTH=43>
<div STYLE="WIDTH:43PX;">
</div>
</td>
<td VALIGN=TOP WIDTH=36PX CLASS=RIGHT>
<div STYLE="WIDTH:36PX;">
</div>
</td>
<td VALIGN=TOP WIDTH=504PX>
<div ID=RIGHT>
<table WIDTH=504 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr>
<td>
<$post$>
<table BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<tr CLASS=BOTTOM_PAGE>
<td ALIGN=RIGHT WIDTH=48%><$prepage type=2$></TD>
<td WIDTH=4%>
</td>
<td ALIGN=LEFT WIDTH=48%><$nextpage type=2$></TD>
</tr>
</table>
<br>
<br>
</td>
</tr>
</table>
</div>
</td>
<td VALIGN=TOP WIDTH=36PX CLASS=MID>
<div STYLE="WIDTH:36PX;">
</div>
</td>
<td VALIGN=TOP WIDTH=234>
<div ID=LEFT>
<center>
<div CLASS=HEADER_TOP>
</div>
<div CLASS=HEADER_MID>
<div CLASS=HEADER><$header$></DIV>
</div>
<div CLASS=HEADER_BOTTOM>
</div>
<div CLASS=URL><$blogurl$></DIV>
<div CLASS=PROFILE_BODY>
<div CLASS=PROFILE>
<$logoimage$>
<$description$>
<$nick$>
</div>
</div>
<div CLASS=PROFILE_BOTTOM>
</div>
<$calendar type=1$>
<div CLASS=MN_HEAD>
</div>
<div CLASS=MN><$menuleft$></DIV>
<div CLASS=MN_BOTTOM>
</div>
<center><$banner type=1$></CENTER>
<$xml$>
</center>
</div>
</td>
<td WIDTH=271>
</td>
</tr>
</table>
</div>


CSS


/* excite blog skin css*/



BODY{ BACKGROUND-COLOR : #FFF ; MARGIN : 0;PADDING : 0; }
BODY,TD,DIV,LI{ FONT : 10PT/150% VERDANA; COLOR : #595959; WORD-BREAK : BREAK-ALL ; }

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

#wrapper {width: 843px; margin: 0 auto;}

DIV#TOP {
HEIGHT : 19PX;
}

DIV#LEFT {
WIDTH : 234PX;
}

TD.MID{
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/bg_line_left_4.gif);
WIDTH : 36PX;
}

TD.RIGHT {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/bg_line_right_4.gif);
WIDTH : 36PX;
}

DIV#RIGHT {
WIDTH : 504PX;
}


DIV.HEADER {
FONT-FAMILY : TAHOMA,
WIDTH : 234PX;
FONT-SIZE : 13PT;
FONT-WEIGHT : BOLD;
MARGIN : 0PX 0PX 0PX 0PX;
LINE-HEIGHT : 140%;
}

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

DIV.URL {
MARGIN-BOTTOM : 15PX;
FONT-WEIGHT : NORMAL;
}

DIV.URL A:LINK {COLOR: #333333; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #333333; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: #4D6C9C; TEXT-DECORATION: NONE}

DIV.USERMENU {COLOR: #fff;
WIDTH : 810PX;
TEXT-ALIGN : RIGHT;
MARGIN-TOP : 5PX;
}

DIV.USERMENU A:LINK {COLOR: #113061; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #113061; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #4D6C9C; TEXT-DECORATION: NONE}

DIV.USERMENU A {
FONT : 9PT/150% Trebuchet MS, ??;
FONT-WEIGHT : BOLD;
MARGIN-RIGHT : 5PX;
PADDING-LEFT : 20PX;
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/04/1/icon_top_4.gif);
BACKGROUND-REPEAT : NO-REPEAT;
}

DIV.PROFILE {
WIDTH : 150PX;
LINE-HEIGHT : 150%;
OVERFLOW : HIDDEN;
}

DIV.PROFILE_TOP {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/04/1/pro_top_4.gif);
WIDTH : 26PX;
HEIGHT : 34PX;
}

DIV.PROFILE_BODY {
WIDTH : 186PX;
}

DIV.PROFILE_BOTTOM {
HEIGHT : 15PX;
}


DIV.MN {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_mn_mid_4.gif);
WIDTH : 170PX;
LINE-HEIGHT : 150%;
PADDING-TOP : 15PX;
}

DIV.MNTTL {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/mn_bar_4.gif) NO-REPEAT;
WIDTH : 164PX;
HEIGHT : 22PX;
PADDING-TOP : 4PX;
MARGIN-BOTTOM : 10PX;
FONT-size: 11px;
FONT-family: verdana;
}

DIV.MNTTL TD{
FONT-WEIGHT : BOLD;
COLOR : #FFF;
}

DIV.MN_BODY {
WIDTH : 150PX;
LINE-HEIGHT : 150%;
PADDING-BOTTOM : 20PX;
OVERFLOW : HIDDEN ;
}
DIV.MN_BODY A:LINK{ COLOR : #656565; }
DIV.MN_BODY A:VISITED{ COLOR : #656565; }
DIV.MN_BODY A:HOVER{ COLOR : #4D6C9C; }

DIV.POST {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_post_mid_4.gif);
WIDTH : 504PX;
MARGIN-BOTTOM : 30PX;
TEXT-ALIGN : CENTER;
}

DIV.POST_HEAD {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_post_top_4.gif) NO-REPEAT;
PADDING-TOP : 10PX;
PADDING-LEFT : 30PX;
PADDING-RIGHT : 30PX;
PADDING-BOTTOM : 20PX;
TEXT-ALIGN : LEFT;
OVERFLOW : HIDDEN ;
}

DIV.POST_BODY {
WIDTH : 420PX;
LINE-HEIGHT : 1.5;
TEXT-ALIGN : LEFT;
WORD-BREAK : BREAK-ALL;
overflow:hidden;
}

DIV.POST_BODY A:LINK{ TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:VISITED{ TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:HOVER{ TEXT-DECORATION: UNDERLINE }

DIV.POST_TTL {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_ptitle_4.gif) NO-REPEAT;
HEIGHT : 29PX;
FONT-SIZE : 9PT;
COLOR : #113061;
MARGIN-TOP : 10PX;
PADDING-TOP : 8PX;
PADDING-LEFT : 43PX;
FONT-WEIGHT : BOLD;
}

DIV.POST_TAIL {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/04/1/bg_post_4.gif);
TEXT-ALIGN : RIGHT;
LINE-HEIGHT : 150%;
WIDTH : 420PX;
FONT-FAMILY : VERDANA;
FONT-SIZE : 11PX;
OVERFLOW : HIDDEN;
PADDING-TOP : 20PX;
}

DIV.POST_BOTTOM {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_post_btm_4.gif) NO-REPEAT;
WIDTH : 504PX;
HEIGHT : 4PX;
MARGIN-TOP : 30PX;
FONT-SIZE : 1PX;
}

DIV.COMMENT {
BORDER : 1PX #D3D3D3 SOLID;
BACKGROUND : #FFF;
TEXT-ALIGN : LEFT;
WIDTH : 420PX;
PADDING : 10PX 15PX;
MARGIN-TOP : 15PX;
margin-left: 25px;
WORD-BREAK : BREAK-ALL;
}

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

DIV.COMMENT_TAIL {
MARGIN : 8PX 0PX 5PX;
FONT : 8PT/150% VERDANAVERDANA;
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%;
WORD-BREAK : BREAK-ALL;}

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.BOOKMK {
MARGIN : 10PX;
BORDER : 0PX;
}

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

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

.SMALL { FONT-SIZE : 11PX; COLOR : #113061; }
.DATE {FONT : BOLD 8PT/150% VERDANA; }
.TIME {FONT : 8PT/150% VERDANA; TEXT-ALIGN : LEFT; }
.AUTHOR { FONT-SIZE : 9PT;
FONT-WEIGHT : BOLD;
COLOR : #113061;}

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

DIV.CAL_TOP {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_mn_top_4.gif) NO-REPEAT;
HEIGHT : 3PX;
WIDTH : 171PX;
TEXT-ALIGN : CENTER;
FONT-SIZE : 1PX;
}

DIV.CAL {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_mn_mid_4.gif);
WIDTH : 171PX;
TEXT-ALIGN : CENTER;
}

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

DIV.CAL_BODY {
WIDTH : 150PX;
TEXT-ALIGN : CENTER;
MARGIN-LEFT : 9PX;
MARGIN-RIGHT : 9PX;
PADDING-BOTTOM : 9PX;
}

DIV.CAL_BOTTOM {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_mn_btm_4.gif) NO-REPEAT;
HEIGHT : 3PX;
WIDTH : 171PX;
FONT-SIZE : 1PX;
MARGIN-BOTTOM : 12PX;
}

.CAL{ FONT : 7PT/150% Arial, Trebuchet MS; TEXT-ALIGN : CENTER; }
.CAL_DAY{ FONT : BOLD 7PT/150% Arial, Trebuchet MS; TEXT-ALIGN : CENTER; }
.CAL_SUN{ FONT : BOLD 7PT/150% Arial, Trebuchet MS; COLOR : #CF2000; TEXT-ALIGN : CENTER;}
.CAL_SAT{ FONT : BOLD 7PT/150% Arial, Trebuchet MS; COLOR : #648BA7; TEXT-ALIGN : CENTER;}
.CAL_TODAY{ FONT : BOLD 7PT/150% Arial, Trebuchet MS; BACKGROUND : #DBE3EB; COLOR : #113061; TEXT-ALIGN : CENTER; }
.CAL_TR {}

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

DIV.HEADER_TOP {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_title_top1_4.gif) NO-REPEAT;
WIDTH : 234PX;
HEIGHT : 54PX;
}

DIV.HEADER_MID {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_title_mid_4.gif) ;
TEXT-ALIGN : CENTER;
}

DIV.HEADER_BOTTOM {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_title_btm_4.gif) NO-REPEAT;
WIDTH : 234PX;
HEIGHT : 8PX;
FONT-SIZE : 1PX;
}

DIV.MN_HEAD {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_mn_top_4.gif) NO-REPEAT;
WIDTH : 170PX;
HEIGHT : 3PX;
FONT-SIZE : 1PX;
}

DIV.MN_BOTTOM {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_mn_btm_4.gif) NO-REPEAT;
WIDTH : 170PX;
HEIGHT : 3PX;
FONT-SIZE : 1PX;
}

TD.TOP_LEFT {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/line_title_top0_4.gif) NO-REPEAT;
WIDTH : 233PX;
HEIGHT : 47PX;
}

TD.TOP_MID {
BACKGROUND : URL(http://md.exblog.jp/skn/img/a/01/04/1/bg_post_top_4.gif) NO-REPEAT;
WIDTH : 577PX;
HEIGHT : 47PX;
}

[PR]
by asazuki508e | 2011-06-26 05:20 | Comments(5)
Commented by yy_shion at 2012-04-26 14:46
始めまして、こんにちは。
スキン編集を検索していて、このサイトにアクセスすることができました。
スキン編集は初心者…と言うより、IT苦手な高齢者です。
さまざまなスキンから、treeを使いたいと思っているのですが、
バッfuzzy lightのダークレッドを使いたいのですが、
可能でしょうか?
また、可能だとしたら、HTML/CSSをお示し頂けますでしょうか?
以上、よろしくお願いいたします。
Commented by yy_shion at 2012-04-26 14:50
スミマセンm(_ _)m
コメントの訂正です。
(バッfuzzy lightのダークレッドを使いたいのですが、)は
(バックにfuzzy lightのダークレッドを使いたいのですが、)に訂正です
Commented by asazuki508e at 2012-04-26 17:23
★yy_shion 様

はじめまして、こんにちは。

とりあえず、作ってみました。いかがでしょうか?
http://www.exblog.jp/blog/blog_preview.asp?eid=d0112463&depth=85&fmt=myskin

CSSの以下のものをまるごと差し替えれば上のようになります。
BODY {
margin:0;
padding:0;
background-color: #271d25;
background-attachment: fixed;
background-image:url("http://pds.exblog.jp/pds/1/201204/26/63/bgimage01.jpg");
background-position: center top;
background-repeat: no-repeat;
font:13px "MS Pゴシック",arial,helvetica,clean,sans-serif;
*font-size:small;
*font:x-small;
line-height:150%;
color:#dddddd;}


なお、fuzzy light の画像そのままではなく、アレンジしてあります。うっすらとぼかしをいれるテクニック自体は一般的なものなので、これで問題ないと思います。


その他、追加の要望などございましたら、お気軽にコメントください。
Commented by yy_shion at 2012-04-26 23:01
asazuki508e さん、ありがとうございました。
うまくいくかどうか、自信はないのですが、
時間をかけてやってみようと思います。
わからなかったらまた問い合わせさせて下さい。
よろしくお願いいたします。
Commented by asazuki508e at 2012-04-26 23:29
★yy_shion 様

「スキン変更」→「編集」→「CSS編集」のところで、BODY {…}の部分を上のものと差し替えればうまくいくと思います。

もし、わからない点などございましたら、お気軽にコメントください。