-Sun&Moon Blog-
catsmoon.exblog.jp
エキサイトブログスキン配布 (Mac OS10.5 Leopard・Safari) ★基本的にコメントにレスしません
by catsmoon
プロフィールを見る
画像一覧
Top | Out
3列スキン冬の森公開
2004年 12月 06日 |
 3列スキンを作ってみました。

プレビューページ>>
※プレビューページにはトップ、ログインなどのユーザーメニューと、記事の編集などのメニューは出ません。
メニューも、上下や左右の振り分けを認識しないため綺麗な配置になっていません。
リンクは無効になっているため、コメントを開くこともできません。雰囲気を見るだけのものとご了承下さい。


b0052317_11275538.jpgこれはおまけのロゴ画像です。どうぞ自由にお使い下さい。





3列のレイアウト( オリジナル)をベースに、 本文 500-ロゴ150- メニュー 150で。
-----------------------------------------------------------------------------------------------
メインページHTML

<!--
このスキンの作成者は、月蝕 http://catsmoon.exblog.jp/ です。
素材も含めて著作権は月蝕に帰属します。 カスタマイズはご自由ですが、この著作権表示部分を削除改変することは認めません。必ず残して下さい。
またカスタマイズしたものを配布したい場合、必ず当ブログの利用規約を確認、ルールを守って配布して下さい。
-->
<DIV CLASS=HEADER><$header$></DIV>
<DIV CLASS=URL><$blogurl$></DIV>
<DIV CLASS=USERMENU><$adminmenu type=2$></DIV>

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR><TD VALIGN=TOP class="left">
<DIV CLASS=MNTTL>PROFILE</DIV>
<DIV CLASS=PROFILE>
<CENTER><$logoimage type=1$></CENTER>
<$description$>
<$nick$>
</DIV>
<center><$calendar type=4$></center>
<$menuleft$>
<DIV CLASS=MNTTL>Linkなどタイトル</DIV>
<DIV CLASS=MNBODY>この部分には外部リンクや自己紹介など自由に書き込めます。</DIV>

<$banner type=1$>
<$xml$>
<div class=XML>The Original by <a href="http://catsmoon.exblog.jp/" target="_blank">Sun&Moon</a></div>
</TD>
<TD VALIGN=TOP>
<$post$>
<div class="page">
<span class="pagev"><$prepage type=1$></span>
<span class="pagev"><$nextpage type=1$></span>
</div>
</TD>
<TD VALIGN=TOP class="right">
<$menuright$>
</TD></TR>
</TABLE>

-----------------------------------------------------------------------------------------------
CSS

BODY{ BACKGROUND : #C2A09F;
background-image : url("http://pds.exblog.jp/pds/1/200412/05/17/snow-forest-p.jpg") ;
background-attachment : fixed;
MARGIN : 0PX;PADDING : 0PX; }
BODY,TD,DIV,LI{ FONT-SIZE : 9pt; FONT-FAMILY : Skia,Hiragino Maru Gothic Pro,VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #222222; }

A:LINK{ COLOR: #880000; TEXT-DECORATION: NONE; }
A:VISITED{ COLOR: #880000; TEXT-DECORATION: NONE; }
A:ACTIVE{ COLOR: #880000; TEXT-DECORATION: NONE; }
A:HOVER{ COLOR: #ffffff; TEXT-DECORATION: NONE; position:relative; top: 1px; left: 1px; }

DIV.HEADER{ FONT : 16pt Skia,Courier New,TAHOMA;
margin : 20px 10px 5px; TEXT-ALIGN:LEFT;text-shadow:4px 4px 10px #440000}

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

DIV.URL{ FONT : 9pt Skia,VERDANA,TAHOMA; MARGIN : 0PX 20PX 5PX; TEXT-ALIGN:LEFT;}
DIV.USERMENU{ FONT : 10pt Skia,VERDANA; TEXT-ALIGN : RIGHT; MARGIN : 0px 10px 50PX; padding :0px 10px 5px ; border-bottom : 2px #7B5150 solid ;}

.left{padding:0px 30px 20px 20px;}
.right{padding:0px 20px 20px 30px;}
.page{text-align:center; margin : 20px;}
.pagev{margin : 10px 20px;}

DIV.PROFILE{ WIDTH : 150PX; PADDING : 4px ; LINE-HEIGHT : 130%; OVERFLOW : HIDDEN; TEXT-ALIGN:LEFT;MARGIN : 0PX 10PX 20px; }
DIV.MNBODY{ TEXT-ALIGN : LEFT; padding : 10PX 10px 20px; }
DIV.MNTTL{ WIDTH : 150PX; background : #E2DAD8 ; PADDING : 2PX 0PX 0PX 5px ; MARGIN : 0PX 10PX; TEXT-ALIGN : LEFT; border : 1px #7B5150 solid;}
DIV.MEMOBODY{ WIDTH : 150PX; OVERFLOW : HIDDEN; }

DIV.POST{ MARGIN-BOTTOM : 50PX; TEXT-ALIGN:LEFT; background : #E2DAD8; border : 1px #7B5150 solid ; padding: 10px;}
DIV.POST_HEAD{ BORDER-BOTTOM : 1PX #7B5150 SOLID; MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; }
DIV.POST_TTL{ font-size: 11pt ; color : #000000; padding-left : 10px }
DIV.POST_TTL A:hover{ color : #000000;}
DIV.POST_ADMIN{ TEXT-ALIGN : RIGHT;}
DIV.POST_BODY{ LINE-HEIGHT : 150%; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; }
DIV.POST_TAIL{ FONT : 11PX/150% Skia,TAHOMA; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; }

DIV.COMMENT{ BORDER : 1PX #D3D3D3 SOLID; BACKGROUND : #F7F7F7;PADDING : 15PX;MARGIN : 20PX 0PX; }
DIV.COMMENT_BODY{ MARGIN-BOTTOM : 20PX; LINE-HEIGHT : 130%; }
DIV.COMMENT_TAIL{ MARGIN : 8PX 0PX 5PX; FONT : 8PT/150% Skia,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 { 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; }

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

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





DIV.CAL_TOP { WIDTH : 150PX; background : #E2DAD8 ; PADDING : 2PX 0PX 0PX 5px ; MARGIN : 0PX 10px; TEXT-ALIGN : LEFT; border : 1px #7B5150 solid;}
DIV.CAL { WIDTH : 150PX;
TEXT-ALIGN : CENTER;
PADDING : 2PX 0PX 0PX 5px ;
MARGIN : 0PX 10px 20px 10px;
}
DIV.CAL_HEAD { WIDTH : 150PX; FONT : 8PT/150% Skia,VERDANA; TEXT-ALIGN : CENTER; PADDING : 4PX 0PX; MARGIN-BOTTOM : 10PX;}
DIV.CAL_BODY { WIDTH : 150PX; TEXT-ALIGN : CENTER;}
DIV.CAL_BOTTOM { }

.CAL{ FONT : 8pt Skia,VERDANA; TEXT-ALIGN : CENTER;}
.CAL_DAY{ FONT : 8pt Skia,VERDANA; TEXT-ALIGN : CENTER; }
.CAL_SUN{ FONT : 8pt Skia,VERDANA; COLOR : #ff0000; TEXT-ALIGN : CENTER;}
.CAL_SAT{ FONT : 8pt Skia,VERDANA; COLOR : #000099; TEXT-ALIGN : CENTER;}
.CAL_TODAY{ FONT : 8pt Skia,VERDANA; BACKGROUND : #E3E3E3; COLOR : #3D5586; TEXT-ALIGN : CENTER; }
.CAL_TR { }

DIV.XML { FONT : 8PT/150% Skia,VERDANA; margin : 10px; width : 150px;text-align: center;}

-----------------------------------------------------------------------------------------------
本文用HTML

<DIV CLASS=POST>
<DIV CLASS=POST_HEAD>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR><TD WIDTH=80%><div class="POST_TTL"><font color="#7B5150">★</font> <$postsubject$></div></TD>
<TD WIDTH=20% ALIGN=RIGHT><$postadmin type=2$></TD></TR>
</TABLE>
</DIV>
<DIV CLASS=POST_BODY>
<$postcont$>
</DIV>
<DIV CLASS=POST_TAIL ALIGN=RIGHT><$posttail$></DIV>
<$cmtjs$>
</DIV>

-----------------------------------------------------------------------------------------------
メニュー用HTML(左右共通)

<DIV CLASS=MNTTL><$mntitle$></DIV>
<DIV CLASS=MNBODY><$mnbody$></DIV>

-----------------------------------------------------------------------------------------------
CSS内に一ケ所、背景画象のアドレスを指定して下さい(赤字)
また外部リンクなどをメニュー表示と同じデザインで書き込める場所を用意しています。
青字の部分になります。
不要なら全部削除して下さい。
またこの部分を丸ごと移動すれば、左側から右側に、あるいはカレンダーの上になど表示位置も変更できます。
(現在はカレンダーの下に表示されるようにしています)
[PR]
by catsmoon | 2004-12-06 11:43 | 風景
<< 正月用スキン黒背景配付 PageTop 表示のチェック >>
XML | ATOM

個人情報保護
情報取得について
免責事項
Blue Paper Skin by Sun&Moon