ピアス

＊このブログの『 CSS編集ソース』です

画像以外は、コピペで使えます
コチラのスキンはエキサイトブログ このブログはオリジナルスキン『HTMLベーシック（ブラック）』を使用してカスタマイズしています。

『詳細情報2列のレイアウト(右) / excite/ 2008年 08月 21日』





/* excite blog skin css */

BODY{ BACKGROUND : #000000; MARGIN : 30;PADDING : 0;
BACKGROUND-IMAGE :URL(http://pds.exblog.jp/pds/1/200707/23/92/[1]DSC_8152_Copy2.jpg) ;
BACKGROUND-ATTACHMENT:FIXED;
BACKGROUND-REPEAT:NO-REPEAT;
BACKGROUND-POSITION: RIGHT;}
BODY,TD,DIV,LI{ FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #FFF; WORD-BREAK : BREAK-ALL; }


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

DIV#TOP {BACKGROUND:#000; BORDER-BOTTOM : 10PX #CC0000 SOLID;
MARGIN-BOTTOM : 30PX;
TEXT-ALIGN : LEFT;
}

DIV#LEFT {
WIDTH : 100%;
MARGIN-BOTTOM : 50PX;
TEXT-ALIGN : LEFT;
}

DIV#RIGHT {
WIDTH : 150PX;
MARGIN : 0PX 0PX 80PX 40PX;
TEXT-ALIGN : LEFT;
OVERFLOW : HIDDEN;
}

DIV.HEADER {
WIDTH : 900PX;
PADDING : 0PX 0PX;
FONT-FAMILY : Times New Roman;
FONT-SIZE : 33PT;
LINE-HEIGHT :100PX;
/*FONT-WEIGHT : BOLD;*/

text-align: left;
text-indent:0.5em;

background-image : url(http://pds.exblog.jp/pds/1/200802/10/92/DSC_0626.jpg);
height:284px;
width:900px;

background-repeat: no-repeat;
}
DIV.HEADER A:LINK {COLOR: #990000; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #990000; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: #888; TEXT-DECORATION: NONE; BORDER-BOTTOM: 1PX SOLID #FFF}

DIV.URL {
FONT : 8PT/100% VERDANA,TAHOMA ;
LETTER-SPACING : 1PX;
MARGIN : 6PX 0PX 20PX;
TEXT-ALIGN : LEFT;
}

DIV.URL A:LINK {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: #AAA; TEXT-DECORATION: NONE; BORDER-BOTTOM: 1PX SOLID #FFF}

DIV.USERMENU {
FONT : 9PT;
TEXT-ALIGN : RIGHT;
MARGIN-BOTTOM : 7PX;
}

DIV.USERMENU A:LINK {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #888; TEXT-DECORATION: UNDERLINE;BORDER-BOTTOM: 1PX SOLID #FFFFFF}

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

DIV.MN {
WIDTH : 150PX;
LINE-HEIGHT : 150%;
}

DIV.MNTTL {
WIDTH : 150PX;
BORDER-BOTTOM : 1PX #333 SOLID;
FONT : 9PT/150% VERDANA;
PADDING : 2PX 0PX 0PX;
MARGIN : 25PX 0PX 10PX;
}

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

DIV.POST {
WIDTH : 100%;
MARGIN-BOTTOM : 60PX;
}

DIV.POST_HEAD {
BORDER-BOTTOM : 1PX #CCC SOLID;
MARGIN-BOTTOM : 15PX;
PADDING-BOTTOM : 3PX;
OVERFLOW : HIDDEN;
}

DIV.POST_BODY {
WIDTH : 100%;
TEXT-ALIGN : LEFT;
MARGIN-BOTTOM : 30PX;
LINE-HEIGHT : 1.5;
OVERFLOW : HIDDEN;
}

DIV.POST_BODY A{ BORDER-BOTTOM: 1PX DOTTED #D69F36 }
DIV.POST_BODY A:LINK{ BORDER-BOTTOM: 1PX DOTTED #D69F36 }
DIV.POST_BODY A:VISITED{ BORDER-BOTTOM: 1PX DOTTED #D69F36 }
DIV.POST_BODY A:ACTIVE{ BORDER-BOTTOM: 1PX DOTTED #FFF602 }
DIV.POST_BODY A:HOVER{TEXT-DECORATION: NONE; BORDER-BOTTOM: 1PX SOLID #FFF602}

DIV.POST_TTL {
FONT-SIZE: 13PT;
FONT-WEIGHT : BOLD;
COLOR : #800000;
}

DIV.POST_TAIL {
FONT : 8PT/150% TAHOMA;
MARGIN-TOP : 10PX;
TEXT-ALIGN : RIGHT;
PADDING-BOTTOM: 20PX;
BORDER-BOTTOM-WIDTH : 5PX;
BORDER-BOTTOM-STYLE: DOUBLE;
BORDER-BOTTOM-COLOR: #FF0000;
}

DIV.COMMENT {
TEXT-ALIGN : LEFT;
BORDER : 1PX #444 SOLID;
BACKGROUND : #111;
PADDING : 10PX 15PX;
MARGIN : 20PX 0PX 20PX;
}

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

DIV.COMMENT_TAIL {
MARGIN : 8PX 0PX 5PX;
FONT : 8PT/150% VERDANA, TAHOMA;
COLOR : #AAA;
}

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_RIGHT {
MARGIN-LEFT : 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 {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/02/5/banner_5.gif);
WIDTH : 150PX;
HEIGHT : 50PX;
MARGIN : 30PX 0PX 10PX;
}

DIV.BANNER_WIK { MARGIN : 20PX 0PX;}

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

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

DIV.CAL_TOP {}

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

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

DIV.CAL_BODY {
WIDTH : 150PX;
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 : #333; COLOR : #EEE; TEXT-ALIGN : CENTER; }
.CAL_TR {}

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





＊詳細

1.

background-image : url(http://pds.exblog.jp/pds/1/200802/10/92/DSC_0626.jpg);

この部分はブログタイトル（ブログ名）のバック画像です
CSS、33列目近く、ここにイメージアップロードした画像のurlを入れます

(http://pds.exblog.jp/pds/1/200802/10/92/DSC_0626.jpg)

これです／カワセミの画像（わたしの場合）
サイズはWIDTH=900（横幅） HEIGHT=284（縦）


2.

BACKGROUND-IMAGE :URL(http://pds.exblog.jp/pds/1/200707/23/92/[1]DSC_8152_Copy2.jpg) ;

この部分は記事背景です
文章の背景に『花の赤いつぼみ』の画像が挿入されています
CSSの2列目かな？

ここのurlもイメージアップロードに登録したものを挿入します
サイズはWIDTH=500（横幅） HEIGHT=335（縦）


画像サイズは画像編集ソフト（フォトショップなど）で加工しています
（ブログタイトル画像：900×284ピクセル／本文背景：500×335ピクセル）



大まかな感じになりますが、画像挿入＆このテンプレートになります




説明がわかりづらく、申し訳ございません......号泣

Fin