カテゴリ:Д気合で変えるブログデザイン( 12 )
強引スキン大改造 その1
はい。第一話です。

皆さん!何が何でもマイスキンを手に入れましょう!

小生、及ばずながら全力でサポートさせていただきます。

それではまず、ここで目指すオリジナルスキンとは何か?

ちょっとだけ考えましょう。






オリスキとは何か??




1 自分だけの「らしい」看板。(和魂要塞でいう、レッドバルタン2枚立てです)

2 自分だけの「らしい」ロゴ。(和魂要塞でいう、有澤書体の「和魂×要塞」です)

3 自分だけの「らしい」背景。(和魂要塞でいう、クマドリ乱舞です)

4 自分だけの「らしい」文字色。(和魂要塞でいう、赤と青のトリコロールです)

5 自分の好みの、間取り。(和魂要塞は投稿記事スペースが馬鹿広いです)





これですね。

これに尽きます。

ぬっふっふ。って感じです。(意味不明

ここまで弄ってしまえば原型は最早とどめていられないこと必定!

必然的にオリスキ!




で、まずは下準備ですね。

ぶっちゃけですね、HTMLやCSSなんてマジメに打ってられません。

めんどくせえ。

くそが。(逆ギレ

したがって原則的にオールコピペで行きましょう。

なぜって人生はコピペです。

先人の苦労をネコババしてるのが後続です。

ってことでまずは下のURLを「お気に入り」に突っ込んでください。




色コード写植用ウェブサイト






HTMLコード写植用ウェブサイト






CSSコード写植用ウェブサイト







1番使うのは一番上のページです。

あとの二つはあまり使わなくてもいいです。

なんでって、改造する既存スキンのコードの中からコピペすりゃいいから。爆

タコが自らの足を食う要領で行けます。大丈夫ぃ!





それではそろそろ参りましょう。

改造の際、ですね、1番大事なのは、実は間取りです。

エキブロの場合、

ここで自分の希望する間取りとは、

全く異なる間取りのスキンをベースに改造を進めると、あとあと痛い目に遭います。

だからですね、必ず理想に近い間取りのスキンをベースにしてください。

よろしいおま?

いいね。わかったね?

頼むぜ?

まーたとえ違っても後ツケで修正できるけどね。

でもちゃんと選んでね。

大変だからね。







ってことで、まずは間取りを吟味していただき、

次回・第2回では、

実際に和魂要塞の生コードを乗せます。

改造前のコードと一緒に乗せます。

で3回目から、マジで講義に入ります。




気合入れろよ!

気合だぞ人生はっ!
[PR]
by 201V1 | 2004-06-24 09:08 | Д気合で変えるブログデザイン
強引スキン大改造! (その2)

以下に現在の和魂要塞のソース(中身)と、改造前のソース(中身)を表記します。

今後の講義の際、印刷した紙があると非常に便利なので、

できれば紙媒体で保存しておいてください。

でも最悪、「 めんどくせえ 」という方はすっ飛ばしてもOK。

別になくても ( その3 )からのチュートリアルに従えば改造は楽勝です。

でわでわ。






●現在の和魂要塞の中身



1  各部分別横幅(間取り) 本文500px ロゴ150px メニュー150px







2  HTML記入スペースの中身


TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100%>
<TR><TD VALIGN=TOP WIDTH=100% HEIGHT=76 CLASS=TOP>
<DIV ID=TOP>
<DIV CLASS=HEADER><img src=http://pds.exblog.jp/pds/1/200406/23/90/wawawawa.gif></DIV>
<DIV CLASS=URL></DIV>

</DIV>
</TD></TR></TABLE>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100%>
<TR><TD WIDTH=5%></TD>
<TD VALIGN=TOP WIDTH=74%>


<DIV ID=LEFT>
<$post$>
<BR><BR>
<TABLE BORDER=0 CELLPADDING=10 CELLSPACING=10 WIDTH=100%> </A></B>

<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>
<BR><BR>
</DIV>
</TD>
<H5><A HREF="http://blog.goo.ne.jp/bouyado/">   
 ●激安貸し別荘をお探しの方はこちらをどうぞ。>>>>>>>>>>>>></A> <A HREF="http://blog.with2.net/link.php/4032">
●人気brogランキング♪ 再び本格参戦開始します。ベスト5に返り咲けるかっ?</A> </H5> </FONT>
 

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
<TD VALIGN=TOP WDITH=17%>
<DIV ID=>
<DIV CLASS=USERMENU><$adminmenu type=2$></DIV>
<DIV CLASS=MN_TOP></DIV>
<DIV CLASS=MN_BODY>
<DIV CLASS=PROFILE><CENTER><$logoimage type=1$></CENTER><$description$><$nick$></DIV>
<$calendar type=1$>
<DIV CLASS=MN><$menuright$></DIV>
</DIV>
<DIV CLASS=MN_BOTTOM></DIV>
<CENTER>
<$banner type=2$>
</CENTER>
<$xml$> 

</DIV>
</TD>
<TD WIDTH=4%></TD></TR>
</TABLE><H5> <A HREF="http://blog.with2.net/link.php/4032">人気brogランキング♪和魂要塞いま何位?</A></H5>

</CENTER>  







3 CSS記入スペースの中身




/* excite blog skin css */

BODY { BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/23/90/mitukuma1.gif);
BACKGROUND-REPEAT : REPEAT;; MARGIN : 0;PADDING : 0; }
BODY,TD,DIV,LI { FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #000; }

A:LINK { COLOR: #4169E1; TEXT-DECORATION: NONE }
A:VISITED { COLOR: #4169E1; TEXT-DECORATION: NONE }
A:ACTIVE { COLOR: #000000; }
A:HOVER { COLOR: #FF0000; TEXT-DECORATION: NONE}

TD.TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/23/90/bbbarutanr.gif);
BACKGROUND-REPEAT : NO-REPEAT;
background-position:100% 0%;

}

DIV#TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/23/90/bbbarutanl.gif);
BACKGROUND-REPEAT : NO-REPEAT;
PADDING : 0PX 0PX 0PX 0PX;
HEIGHT : 406PX;
TEXT-ALIGN : CENTER
        
}

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

DIV#RIGHT {
WIDTH : 50PX;
MARGIN : 0PX 0PX 10PX 10PX;
PADDING : 0PX 0PX 15PX;
TEXT-ALIGN : LEHT;
}

DIV.HEADER {
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 100PT;
FONT-WEIGHT : BOLDER;
        
MARGIN : 70PX 0PX 0PX 0PX;
LINE-HEIGHT : 100%;

}

DIV.HEADER A:LINK {COLOR: #000000; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #000000; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: #0000FF; TEXT-DECORATION: line-through}

DIV.URL {
FONT-FAMILY : VERDANA,TAHOMA ;
FONT-SIZE : 8PT;
FONT-WEIGHT : BOLDER;
PADING : 0PX 50PX 0PX 0PX;
        MARGIN : 3PX 0PX 0PX 505PX;
}

DIV.URL A:LINK {COLOR: #0000FF; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #0000FF; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: #FF0000; TEXT-DECORATION: NONE}

DIV.USERMENU {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 8PT;
TEXT-ALIGN : RIGHT;

}

DIV.USERMENU A:LINK {COLOR: #0000CD; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #0000CD; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #1E90FF; TEXT-DECORATION: NONE}

DIV.MN_TOP {
BACKGROUND-IMAGE : URL(ttp://pds.exblog.jp/pds/1/200406/21/90/badei2.jpg);

WIDTH : 180PX;
HEIGHT : 15PX;
FONT-SIZE : 1PT;
}

DIV.MN_BODY {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/23/90/mitukuma4.gif);
WIDTH : 100PX;
PADDING : 0PX 0PX 30PX 30PX;
}

DIV.MN_BOTTOM {
BACKGROUND-IMAGE : URL(ttp://pds.exblog.jp/pds/1/200406/23/90/mitukuma3.gif);
BACKGROUND-REPEAT : REPEAT;
WIDTH : 200PX;HEIGHT :20000 PX;
FONT-SIZE : 1PT;
}

DIV.PROFILE {
WIDTH : 200PX;
PADDING : 10PX 10PX 10PX;
LINE-HEIGHT : 150%;

}

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

DIV.MNTTL {
WIDTH : 200PX;
BORDER-BOTTOM : 1PX #FF0000 SOLID;
FONT-SIZE : 9PT;
FONT-FAMILY :,VERDANA;
PADDING : 2PX 0PX 0PX;
MARGIN : 25PX 0PX 10PX;
COLOR : #000;
}

DIV.MEMOBODY {
WIDTH : 300PX;

}

DIV.POST {
        BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/23/90/mitukuma4.gif);

WIDTH : 95%;
MARGIN-BOTTOM : 0PX;
        PADDING-LEFT : 15PX;
PADDING-RIGHT : 15PX;
}

DIV.POST_HEAD {
MARGIN-BOTTOM : 15PX;
PADDING-TOP : 15PX;
BORDER-TOP : 1PX #FF0000 SOLID;
}

DIV.POST_BODY {
WIDTH : 95%;
TEXT-ALIGN : LEFT;
MARGIN: 3PX 0PX 0PX;
        PADDING-LEFT : 15PX;
PADDING-RIGHT : 15PX;
LINE-HEIGHT : 150%;
OVERFLOW : HIDDEN;


}

DIV.POST_BODY A:LINK { COLOR: #0000FF; TEXT-DECORATION: NONE}
DIV.POST_BODY A:VISITED { COLOR: #0000FF; TEXT-DECORATION: NONE}
DIV.POST_BODY A:ACTIVE { COLOR: #0000FF; }
DIV.POST_BODY A:HOVER { COLOR: #FF0000; TEXT-DECORATION: NONE}

DIV.POST_TTL {
FONT-SIZE : 15PT;
COLOR : #FF0000;
FONT-WEIGHT : BOLD;
}

DIV.POST_TAIL {
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 8PT;
MARGIN-TOP : 10PX;
PADDING-BOTTOM : 15PX;
MARGIN-RIGHT : 10PX;
TEXT-ALIGN : RIGHT;

}

DIV.COMMENT {
TEXT-ALIGN : LEFT;
BORDER : 1PX #BFB69A SOLID;
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/23/90/gosyoB.gif);
PADDING-LEFT : 15PX;
        PADDING-RIGHT : 15PX;
MARGIN : 20PX 0PX 20PX;
        OVERFLOW : HIDDEN;
}

DIV.COMMENT_BODY {
        WIDTH : 95%;
MARGIN : 6PX 0PX 20PX;
PADDING-LEFT : 15PX;
        PADDING-RIGHT : 15PX;

LINE-HEIGHT : 140%;
}

DIV.COMMENT_TAIL {
MARGIN : 8PX 0PX 5PX;
FONT-FAMILY : VERDANA, TAHOMA,;
FONT-SIZE : 8PT;
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_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;
MARGIN-RIGHT : 8PX;
}

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

DIV.BANNER {

MARGIN : 0PX 0PX 0PX;

}

.SMALL {
FONT-SIZE : 11PX;
}

.DATE {
FONT-FAMILY : VERDANA, TAHOMA,;
FONT-SIZE : 8PT;
FONT-WEIGHT : BOLD;
}

.TIME {
FONT-FAMILY : VERDANA, TAHOMA,;
FONT-SIZE : 8PT;
TEXT-ALIGN : LEFT;
}

.AUTHOR {
FONT-SIZE : 9PT;
FONT-WEIGHT : BOLD;
}

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




DIV.CAL_TOP {
}

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

DIV.CAL_HEAD {
WIDTH : 150PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
TEXT-ALIGN : CENTER;
PADDING-TOP : 4PX;
PADDING-BOTTOM : 4PX;
MARGIN-BOTTOM : 10PX;
}

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

DIV.CAL_BOTTOM {
}

.CAL {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_DAY {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_SUN {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #D36654;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_SAT {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #3572A1;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_TODAY {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
BACKGROUND : #7FFFD4;
COLOR : #3D5586;
TEXT-ALIGN : CENTER;
}

.CAL_TR { }

DIV.XML {
TEXT-ALIGN : CENTER;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
MARGIN-BOTTOM : 80PX;
}





● 雛形になった本来のスキンの中身



1   各部分別横幅(間取り) 本文700px ロゴ150px メニュー150px



2  HTML記入スペースの中身

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100%>
<TR><TD VALIGN=TOP WIDTH=100% HEIGHT=76 CLASS=TOP>
<DIV ID=TOP>
<DIV CLASS=HEADER><$header$></DIV>
<DIV CLASS=URL><$blogurl$></DIV>
</DIV>
</TD></TR></TABLE>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100%>
<TR><TD WIDTH=5%></TD>
<TD VALIGN=TOP WIDTH=74%>
<DIV ID=LEFT>
<$post$>
<BR><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>
</TABLE>
<BR><BR>
</DIV>
</TD>
<TD VALIGN=TOP WDITH=17%>
<DIV ID=RIGHT>
<DIV CLASS=USERMENU><$adminmenu type=1$></DIV>
<DIV CLASS=MN_TOP></DIV>
<DIV CLASS=MN_BODY>
<DIV CLASS=PROFILE><CENTER><$logoimage type=1$></CENTER><$description$><$nick$></DIV>
<$calendar type=1$>
<DIV CLASS=MN><$menuright$></DIV>
</DIV>
<DIV CLASS=MN_BOTTOM></DIV>
<CENTER>
<$banner type=1$>
</CENTER>
<$xml$>
</DIV>
</TD>
<TD WIDTH=4%></TD></TR>
</TABLE>
</CENTER>



3 CSS記入スペースの中身


/* excite blog skin css */

BODY { BACKGROUND : #E7E3D6 ; MARGIN : 0;PADDING : 0; }
BODY,TD,DIV,LI { FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #000; }

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

TD.TOP {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/top_5.gif);
HEIGHT : 76PX;
}

DIV#TOP {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/top_left_5.gif);
BACKGROUND-REPEAT : NO-REPEAT;
PADDING-TOP : 1PX;
HEIGHT : 75PX;
TEXT-ALIGN : LEFT;
}

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

DIV#RIGHT {
WIDTH : 180PX;
MARGIN : 0PX 0PX 40PX 40PX;
TEXT-ALIGN : LEFT;
}

DIV.HEADER {
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 14PT;
FONT-WEIGHT : BOLD;
MARGIN : 23PX 140PX 0PX;
LINE-HEIGHT : 100%;
}

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

DIV.URL {
FONT-FAMILY : VERDANA,TAHOMA ;
FONT-SIZE : 8PT;
MARGIN : 0PX 140PX;
}

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

DIV.USERMENU {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 8PT;
TEXT-ALIGN : CENTER;
PADDING : 35PX 10PX 10PX 0PX;
}

DIV.USERMENU A:LINK {COLOR: #727272; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #727272; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #98A6E4; TEXT-DECORATION: UNDERLINE}

DIV.MN_TOP {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/mn_top_5.gif);
BACKGROUND-REPEAT : NO-REPEAT;
WIDTH : 180PX;
HEIGHT : 32PX;
FONT-SIZE : 1PT;
}

DIV.MN_BODY {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/mn_body_5.gif);
WIDTH : 150PX;
PADDING : 0PX 20PX 15PX 10PX;
}

DIV.MN_BOTTOM {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/mn_bottom_5.gif);
BACKGROUND-REPEAT : NO-REPEAT;
WIDTH : 180PX;
HEIGHT : 15PX;
FONT-SIZE : 1PT;
}

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

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

DIV.MNTTL {
WIDTH : 150PX;
BORDER-BOTTOM : 1PX #AAA SOLID;
FONT-SIZE : 9PT;
FONT-FAMILY :,VERDANA;
PADDING : 2PX 0PX 0PX;
MARGIN : 25PX 0PX 10PX;
COLOR : #000;
}

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

DIV.POST {
WIDTH : 100%;
PADDING : 0PX 0PX 20PX;
}

DIV.POST_HEAD {
MARGIN-BOTTOM : 15PX;
PADDING-TOP : 15PX;
BORDER-TOP : 1PX #BBB DASHED;
}

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

DIV.POST_BODY A:LINK { COLOR: #5990BF; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:VISITED { COLOR: #5990BF; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:ACTIVE { COLOR: #5990BF; }
DIV.POST_BODY A:HOVER { COLOR: #0B226D; TEXT-DECORATION: UNDERLINE }

DIV.POST_TTL {
FONT-SIZE : 9PT;
COLOR : #000;
FONT-WEIGHT : BOLD;
}

DIV.POST_TAIL {
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 8PT;
MARGIN-TOP : 10PX;
TEXT-ALIGN : RIGHT;
}

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

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

DIV.COMMENT_TAIL {
MARGIN : 8PX 0PX 5PX;
FONT-FAMILY : VERDANA, TAHOMA,;
FONT-SIZE : 8PT;
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_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 {
MARGIN : 30PX 10PX 0PX;
}

.SMALL {
FONT-SIZE : 11PX;
}

.DATE {
FONT-FAMILY : VERDANA, TAHOMA,;
FONT-SIZE : 8PT;
FONT-WEIGHT : BOLD;
}

.TIME {
FONT-FAMILY : VERDANA, TAHOMA,;
FONT-SIZE : 8PT;
TEXT-ALIGN : LEFT;
}

.AUTHOR {
FONT-SIZE : 9PT;
FONT-WEIGHT : BOLD;
}

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




DIV.CAL_TOP {
}

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

DIV.CAL_HEAD {
WIDTH : 150PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
TEXT-ALIGN : CENTER;
PADDING-TOP : 4PX;
PADDING-BOTTOM : 4PX;
MARGIN-BOTTOM : 10PX;
}

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

DIV.CAL_BOTTOM {
}

.CAL {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_DAY {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_SUN {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #D36654;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_SAT {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #3572A1;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_TODAY {
FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
BACKGROUND : #DAD1B4;
COLOR : #3D5586;
TEXT-ALIGN : CENTER;
}

.CAL_TR { }

DIV.XML {
TEXT-ALIGN : CENTER;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
MARGIN-BOTTOM : 80PX;
}





ワードに写植して印刷すると38ページでした。頑張れ。

必ずオリスキを作らせるからっ!




ちなみにうちのコードはかなり強引に「安定」させている豪気なコードなので

多分上級者の方がみると「 吹き出す 」くらいヒドイことになってます。



「撃てっ!あ、やっぱやめろ突撃だ!じゃなくて隠れろ!」みたいなコード。
[PR]
by 201V1 | 2004-06-24 08:56 | Д気合で変えるブログデザイン
強引スキン大改造 その3 (壁紙編)


うし。

それじゃ。いくぜ。


まずですね。

1番始めに画像系から行きましょう。




ちなみにうちは結構、画像に凝ってます。

バルタン星人なんて小癪にも身体以外がちゃんと透過してます。

バルタン、何気なくGIFファイルです。(どーん

壁紙背景の前にすんなり立てています!

JPGと違い、GIFファイルは画像の一部を透過状態にできるんですね。

へらへら。





しかしながら我が家において、

フォトショップやペインターの積んであるPCは、全力でイカレポンチな状態の上、

ネットに接続できないという業を背負っています。

その上、ネットと接続している当機との情報交換も色々あって不能です。

したがって小生は、かなり絶望的な状況下で画像を加工しているわけです。




試用している画像処理ソフト(?)は、

① マイクロソフトフォトエディタ

② このPCにくっついてきた、20世代くらい前の「 ペイント 」とかいうウンコソフト。

③ このPCにくっついてきた、ホームページビルダー・ライト 

以上の3点です。






①は画像の拡大・縮小・各種効果・トリミング用。

②は、いい加減なペンツールと消しゴム機能用。(ファミコン並)

③はロゴ製作と、画像の一部を透過させるためのGIFへの出力用です。




これらを行ったり来たりしながら、画像を作っているのが現状です。

きつい。

タブレットが使いたい。

あらゆるレスポンスが遅い。

だいたい「戻る」が2回しか使えない。

毎回毎回、見事に思惑と違うことになる。

死にたい。




それでも、できるんです。

根性と気合で。

ぶっちゃけ、小生以上に環境のヒドイ人はいないハズです。

だから大丈夫。人間工夫でなんでもできます。




とゆーわけで、画像処理ソフトがないなんていい訳は聴きません。

やりなさい。




まずですね、

壁紙です。

和魂要塞でいうところの「 クマドリ乱舞 」です。



バルタン星人の背景の「 メイン壁紙 」や

投稿記事やメニューの背景になっている「 メイン壁紙を薄く加工したサブ壁紙 」

コメント欄のの背景になっている「 クマドリかるた壁紙 」

がこれに当たります。




通常、ネット上の素材屋さんに転がっている壁紙素材は色調が「濃く」、

そのまま使うと文字が極めて読みづらくなります。

したがって一端DLして保存した後、

画像処理ソフトの「 明るさ調整 」を使い、

「 色を飛ばす作業 」を行ないます。




バルタンの背景の「 クマドリ 」と、

投稿記事とメニューの背景の「 クマドリ 」は元々は同じ素材でした。

前者に「 明るさ調整 」を行い、色を飛ばして後者に変えたのです。

色を飛ばしてしまえば、どんな画像も壁紙になります。

がんがん飛ばしましょう。






最終的に必要になってくる画像は以下のものになります。




① ブログタイトルロゴを作りましょう。 (和魂要塞で言う「 和魂×要塞 」です)

② 旧和魂要塞の「 黒い獅子 」や「 変な柄 」。現行の「 バルタン 」のような、看板になる画像をゲットしましょう。

③ 壁紙画像。全体用一枚。投稿記事背景用一枚。メニュー用一枚。コメント用一枚。です。できれば違っていたほうが面白いでしょう。


問題はエキブロの素材画像スペースに送れるの要領が一枚につき100キロバイトって点です。

できるだけ軽く作ってください。

でわ次回、本格的にコード弄りに入ります。
[PR]
by 201V1 | 2004-06-24 08:33 | Д気合で変えるブログデザイン
強引スキン改造その4

まずは収拾した画像を送りましょう。

スキン編集画面の「 マイイメージアカウントにイメージ登録 」で

全部の画像を送ってください。

まずはそこからです。




で、それが終わったらいよいよ編集。

まずはメイン壁紙です。

バルタンの背景になっている壁紙ですね。

弄る部分はスキン編集画面の「 CSSのコード 」が書かれたスペースです。




上から2行目あたりに、生スキンの場合。

BODY { BACKGROUND : #E7E3D6 ; MARGIN : 0;PADDING : 0; }

って書いてあるはずです。

これを弄ると壁紙が変わります。

和魂要塞の場合こうなっています。

BODY { BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/23/90/mitukuma1.gif);
BACKGROUND-REPEAT : REPEAT;; MARGIN : 0;PADDING : 0; }




つまりですね。

BACKGROUND : #E7E3D6 ; を削って、

BACKGROUND-IMAGE : URL(●);  を張ればいいわけです。

●の部分に貴方がメイン壁紙にしたい画像のURL(絶対パス)を張れば終わり。

これでオッケーです。

コピペしてカマしてください。










次は投稿記事部分の背景画像を入れ替えます。

スキン編集画面のCSS編集スペースの、上から40パーセントくらい下に下ると




DIV.POST {
WIDTH : 100%;
PADDING : 0PX 0PX 20PX;
}




ってコードがあります。

ここを弄ると投稿記事の背景が変わります。

和魂要塞はこうなっています。




DIV.POST {
        BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/23/90/mitukuma4.gif);

WIDTH : 95%;
MARGIN-BOTTOM : 0PX;
        PADDING-LEFT : 15PX;
PADDING-RIGHT : 15PX;
}






単純にいうと、


 BACKGROUND-IMAGE : URL(●);

上のコードの●の部分に、

任意の壁紙画像のURLを叩き込んで張ればオッケーです。


現在の和魂要塞の、投稿記事の内容を司るDIV.POSTに

WIDTH : 95%;
MARGIN-BOTTOM : 0PX;
        PADDING-LEFT : 15PX;
PADDING-RIGHT : 15PX;

という本来のコードと全くちがうコードが張り付いているのは、

1番最初に述べた「間取り」の段階のミスを補正するためです。

したがって今は深く考える必要はじぇろ。無視してください。





さて、お次はコメントの背景画像の挿げ替えです。

先ほどのPOSTなんたらのすぐ下に、

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

ってコードがあります。

ここのBACKGROUND : #D7D2C0;をぶっ壊して、

新たなコードを張ります。(もちろん#のあとの数字は元のスキンによって違う)

和魂要塞の場合、ぶっ壊した後に、

BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/23/90/gosyoB.gif);

を変わりに張ってるワケです。

今までと同様、

BACKGROUND-IMAGE : URL(●);

の●の部分に任意の背景画像のURLを張ってぶち込んでください。

楽勝です。




問題は、カテゴリやメモ帳、カレンダー、エキサイトブログなどのある

「 メニュー 」の背景画像の差し替えです。

実はここのコードは雛形のスキンによって異なっているのです。

エキブロの生スキン「ワイド」の場合、

メニューは「板の画像」の上にある状態なので、ちょっとやっかいです。

ワイドの場合は、板が「頭」と「胴」と「尾」に別れており、

CSS編集画面の上から20パーセントくらい下にいったトコロに


DIV.MN_TOP {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/mn_top_5.gif);
BACKGROUND-REPEAT : NO-REPEAT;
WIDTH : 180PX;
HEIGHT : 32PX;
FONT-SIZE : 1PT;
}

DIV.MN_BODY {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/mn_body_5.gif);
WIDTH : 150PX;
PADDING : 0PX 20PX 15PX 10PX;
}

DIV.MN_BOTTOM {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/mn_bottom_5.gif);
BACKGROUND-REPEAT : NO-REPEAT;
WIDTH : 180PX;
HEIGHT : 15PX;
FONT-SIZE : 1PT;
}



こういう感じで、頭と胴と尾に分割されています。

ほとんどの生スキンは

DIV.MN{

で終わりです。

背景のコードは

BACKGROUND : #D7D2C0; ってタイプと

BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/mn_body_5.gif);の2つがあります。



通常は、

DIV.MN{



BACKGROUNDうんたら

ってコードを削り、

BACKGROUND-IMAGE : URL(●);

とゆーコードをぶち込めばOKです。


雛形が和魂要塞と同様に「ワイド」で、

DIV.MN_TOP {

DIV.MN_BODY {

DIV.MN_BOTTOM {

って分割されている場合は、

TOP と BOTTOM の「 BACKGROUNDうんたら 」を削って放置し、

DIV.MN_BODY{   の「 BACKGROUNDうんたら 」を削って

BACKGROUND-IMAGE : URL(●);

を張ってください。









これで壁紙は完璧です。


次回は、ブログの顔である、看板の設置に入りましょう。


でわでわ。
[PR]
by 201V1 | 2004-06-24 08:02 | Д気合で変えるブログデザイン
強引スキン大改造  その5


ぶっ飛ばしていきます。

まず看板のコードですが、エキブロの生スキンの場合、

スキン編集画面(css)の上から14行目当たりにあります。


TD.TOP {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/top_5.gif);
HEIGHT : 76PX;
}

DIV#TOP {
BACKGROUND-IMAGE : URL(http://md.exblog.jp/skn/img/a/01/01/8/top_left_5.gif);
BACKGROUND-REPEAT : NO-REPEAT;
PADDING-TOP : 1PX;
HEIGHT : 75PX;
TEXT-ALIGN : LEFT;
}


これがそうです。

生スキン「ワイド」の場合、

TD.TOPの「 板 」の画像の上に

DIV#TOP の「風車のマーク」が乗っかって、看板ができてます。



あとで詳しく述べますが、

DIV#TOP の最後にあるTEXT-ALIGN : LEFT; とは

ブログタイトル(ロゴ)を左詰めにするという命令です。

LEFTをCENTERやRIGHTに書き換えることで、

おおざっぱな位置変更が可能です。




ちなみに和魂要塞は以下のように改造済み。


TD.TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/23/90/bbbarutanr.gif);
BACKGROUND-REPEAT : NO-REPEAT;
background-position:100% 0%;

}

DIV#TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/23/90/bbbarutanl.gif);
BACKGROUND-REPEAT : NO-REPEAT;
PADDING : 0PX 0PX 0PX 0PX;         ←意味ない
HEIGHT : 406PX;
TEXT-ALIGN : CENTER
        
}

バルタン画像2枚によるの挟み撃ちです。







よーするにですね、看板コード改造でできるのは以下のことです。


①画像を差し替える。(イメチェン)

②画像の高さを変える。(看板の巨大化)

③画像の位置を自由に変える。(さらに自由で大きな看板が作れる)

④ブログタイトル位置を決めれる。(微調整は別のコード改造でやります)


ってことですね。




注意しなきゃいけないのは、

い)  TD.TOP の画像の高さがDIV#TOPの画像の高さに準じちゃうってトコ。

ろ)  TD.TOPもDIV#TOPも、特別な指示を与えない場合、両方とも上方左詰めで画像がアップされます。

は)  あと当然、  BACKGROUND-REPEAT : NO-REPEAT;  ってコードを入れないと、リピートされちゃいます。壁紙みたくなっちゃうんですね。嫌な場合は気をつけて。




ってことでやってきましょう。

まずは①の「画像の差し替え」。

楽勝ですね。

BACKGROUND-IMAGE : URL(●);

に任意のURLを叩き込めばOKです。

楽勝!




続いて②の看板の高さ。

DIV#TOPに張り付いてる

HEIGHT : 75PX; ってコード見つかりました?(勿論数字はスキンに順じる)

ここの数字を好みのピクセル数(高さ)にしてください。

ちなみにバルタンは  HEIGHT : 406PX;となってます。(デカすぎ)

楽勝!




で、次。

③画像の位置を自由に変える。

和魂要塞の場合、右側にいて欲しいTD.TOPのバルタンに、

background-position:100% 0%;  ってコードで

「右端に行け!上に詰めろ」 と指示し、

BACKGROUND-REPEAT : NO-REPEAT;  ってコードで

「連続表示したら殺す」 と脅しています。




よーするにTD.TOPとDIV#TOPの画像位置の設定に必要なのは、

BACKGROUND-REPEAT : NO-REPEAT; 

ないし

BACKGROUND-REPEAT : REPEAT; 

ってのをそれぞれに書き込み、連続表示するかどうか決定し、

background-position: ?% ?%; 

ってコードを叩き込んで画像の位置を指示する2点です。

バックグラウンド・ポジションのパーセンテージは




簡単に書くと●詰めで、それぞれ


0%0%            100%0%

●■■■■■■■■■■●
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■画面■■■■■
■■■■■■■■■■■■
●■■■■■■■■■■●
0%100%          100%100%


って感じになります。

通常は background-position: ?% 0%; 

で大まかな位置を決めて、

MARGIN-TOP : ?PX;  (画面上から画像までの距離を指示するコード)

ってコードを加筆して、画面上からの距離をピクセル単位で設定してください。

これが1番混乱が起きないはずです。

これで画像の位置が決まりました。

ド楽勝!










次はブログタイトル(ロゴ)の設定です。


まずはロゴをアップします。

スキン編集画面のHTML記入スペースの上から五行目、

<DIV CLASS=HEADER><$header$></DIV>

ってのがあります。

まずはこいつをこのように弄ります。

<DIV CLASS=HEADER><img src=http://pds.exblog.jp/pds/1/200406/23/90/wawawawa.gif></DIV>
<DIV CLASS=URL></DIV>



貴方が作ったロゴのURLを●とすると

<DIV CLASS=HEADER><img src=●></DIV>
<DIV CLASS=URL></DIV>

こうなるわけですね。

書き換えてください。これでロゴがアップされます。


次は位置の決定です。

既に、左詰め・中央揃え・右詰めのどれでアップするかは、

DIV#TOPの  TEXT-ALIGN : ■■■;  で決定しました。

DIV#TOPの最後にある、

TEXT-ALIGN : LEFT;  (左詰め)を

TEXT-ALIGN : CENTER  (中央そろえ)とか

TEXT-ALIGN : RIGHT   (右詰め)とかに変え、

おーざっぱに位置を決めたアレのことです。

あとはこれの調整です。


CSS編集画面の1番上から10パーセントくらい下がったところにある

DIV.HEADER {
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 14PT;
FONT-WEIGHT : BOLD;
MARGIN : 23PX 140PX 0PX;
LINE-HEIGHT : 100%;
}



MARGIN : 23PX 140PX 0PX;



MARGIN : 23PX 140PX 0PX 0PX;

に挿げ替えてください。

で、ご自由に数字を設定。これで位置が調整できます。


ロゴを使わない場合は、

FONT-SIZE : 14PT;

の数字を大きくするとブログタイトルのフォントがでかくなります。







それが終わったら次は微調整に入ります。

DIV#TOPからちょっと下ったトコに


DIV.HEADER {
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 14PT;
FONT-WEIGHT : BOLD;
MARGIN : 23PX 140PX 0PX;
LINE-HEIGHT : 100%;

ってのがあります。

ここの

MARGIN : 23PX 140PX 0PX;

ってのが「 位置を調整してるコード 」です。

深く考えず、まずはこれを

MARGIN : ?PX ?PX ?PX ?PX;

に挿げ替えてください。

左から、画面上からの下までの、左まで、右までの余白距離(余白ピクセル数)です。

ここに任意の数字を打つことで、

先のDIV#TOPで決められたブログタイトル(ロゴ)の位置が調整できます。






うし、看板とロゴは完璧ですね。

ひと段落。

次回は文字色の変更です。

でわでわ。










ここまでで、「え?」となった方は、

エキサイトブログの女傑

=素直になりたい=

の「技」カテゴリに行ってください。

http://darkrose4.exblog.jp/i13

ここの「CSS編」をコピーして、うちの解説と睨めっこすると理解がしやすいはずです。

頑張ってね。

頑張ってオリスキ作りましょう!
[PR]
by 201V1 | 2004-06-24 08:02 | Д気合で変えるブログデザイン
強引スキン大改造

いよいよ佳境です。

ここまでちゃんとついてきてる人は気合がありますね。

気合が足りない場合は落伍しているものと思われます。

理屈ぬきで改造するのは大変なんです。

とゆーわけでここで一端小休止。

誰かが追いついてきたら書くことにしまする。

でわでわ。
[PR]
by 201V1 | 2004-06-24 08:01 | Д気合で変えるブログデザイン
強引スキン大改造 その6

うし、次は色だぜ、坊ちゃん嬢ちゃん。

準備はいーかね?


まずだね、もー壁紙はキャンペキね。

看板もキャンペキ。


あとは文字の色よ。

いくぜい??

弄るのはCSSのコードでっせ。






CSSの最上部の2行ほど下に

BODY,TD,DIV,LI { FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #000; }

ってコードがある。

ここの

COLOR : #000;

ってトコが、ページ全体の文字の基本色です。

主に投稿記事やメニュー(メモなど)の文字の色ですね。

数字の部分に任意のカラーナンバーをぶちこんでください。


色見本はこちらをどうぞ。http://hp.vector.co.jp/authors/VA013937/cssref/colname1.html


で、

BODY,TD,DIV,LI

のすぐ下に、


A:LINK { COLOR: #4169E1; TEXT-DECORATION: NONE }
A:VISITED { COLOR: #4169E1; TEXT-DECORATION: NONE }
A:ACTIVE { COLOR: #000000; }
A:HOVER { COLOR: #FF0000; TEXT-DECORATION: NONE}


ってのがあります。

A:LINK    はカテゴリやリンクブログなどの、違うページに飛ぶ文字のコード。

A:VISITED    はA:LINKの中で、既に行ったことのある場合の文字のコード。

A:ACTIVE    はA:LINKをクリックした時、文字が何色に変わるかってコード。

A:HOVER    はA:LINKの上をカーソルが通過した際に何色に変わるかってコードです。



個人的には、ページのデザインを堅守するために、

A:LINKとA:VISITEDのカラーナンバーは一緒にしちゃったほうがいいです。

A:ACTIVE  は BODY,TD,DIV,LI  のカラーを同じでいいでしょう。

A:HOVER  は その性質上A:LINKやA:VISITEDとは全く異なる色がいいです。

和魂要塞では

BODY,TD,DIV,LI と A:ACTIVE を 黒

A:LINK と A:VISITED        を 青

A:HOVER                 を 赤

にしています。

こういう感じで色彩を変化させると、効果が増大します。




で、ここを終えてちょっと下に下がると

今度は


DIV.HEADER {
FONT-FAMILY : TAHOMA,;
FONT-SIZE : 100PT;
FONT-WEIGHT : BOLDER;
        
MARGIN : 70PX 0PX 0PX 0PX;
LINE-HEIGHT : 100%;

}

DIV.HEADER A:LINK {COLOR: #000000; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #000000; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: #0000FF; TEXT-DECORATION: line-through}


ってコードが出てきます。

これはブログタイトルの文字色です。

ロゴをアップしていない場合は、ここの

FONT-SIZE : 100PT; の数字を変更して文字の大きさを決めます。

色は先ほどと同じ要領で変更です。

楽勝!




で、その下にあるコード。

DIV.URL {
FONT-FAMILY : VERDANA,TAHOMA ;
FONT-SIZE : 8PT;
FONT-WEIGHT : BOLDER;
PADING : 0PX 50PX 0PX 0PX;
        MARGIN : 3PX 0PX 0PX 505PX;
}

DIV.URL A:LINK {COLOR: #0000FF; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #0000FF; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: #FF0000; TEXT-DECORATION: NONE}


は、通常、ブログタイトルにコバンザメしているブログのURLに関するコードです。

サイズの変更とカラーの指定ができます。

楽勝!



で、さらにこの下にある、

DIV.USERMENU A:LINK {COLOR: #0000CD; TEXT-DECORATION: NONE}
DIV.USERMENU A:VISITED {COLOR: #0000CD; TEXT-DECORATION: NONE}
DIV.USERMENU A:HOVER {COLOR: #1E90FF; TEXT-DECORATION: NONE}


ってコードは、=センター・投稿・設定=って文字のコードです。

同じ要領で変更どうぞ。

ちなみに TEXT-DECORATION: NONE これを弄る必要はあまりありません。

取り消し線とかを入れますかってコードですからね。

そんなもんいらん。笑



で、ココまでやっつけれたら、

ちょっとマウスをコロコロ下に動かします。

すると

DIV.POST_BODY A:LINK { COLOR: #0000FF; TEXT-DECORATION: NONE}
DIV.POST_BODY A:VISITED { COLOR: #0000FF; TEXT-DECORATION: NONE}
DIV.POST_BODY A:ACTIVE { COLOR: #0000FF; }
DIV.POST_BODY A:HOVER { COLOR: #FF0000; TEXT-DECORATION: NONE}

ってコードがでてきます。

これが投稿記事部分の文字コードです。

おなじ要領でどうぞ。



その直ぐ下にある

DIV.POST_TTL {
FONT-SIZE : 15PT;
COLOR : #FF0000;
FONT-WEIGHT : BOLD;
}

は投稿記事のタイトルの文字コードです。

フォントサイズとカラーが変更できます。




で、そのちょっと下には

DIV.COMMENT_TAIL {
MARGIN : 8PX 0PX 5PX;
FONT-FAMILY : VERDANA, TAHOMA,;
FONT-SIZE : 8PT;
COLOR : #777;
}

という、コメントの文字コードがあります。弄ってください。




これで文字コードは全部弄れたことになります。

次回はイヨイヨ、ラインの色です。

投稿記事とメニューとコメント欄の横棒の色を変更しましょう。

でわでわ。
[PR]
by 201V1 | 2004-06-24 08:01 | Д気合で変えるブログデザイン
強引スキン大改造 その7

はい。

ここまで頑張ったみんなのブログは、

最早十分オリスキになっているものと思われます。

最後にラインを変えちゃいましょう。




CSSコードの上から30パーセントくらいのトコロに

DIV.MNTTL {
WIDTH : 200PX;
BORDER-BOTTOM : 1PX #FF0000 SOLID;
FONT-SIZE : 9PT;
FONT-FAMILY :,VERDANA;
PADDING : 2PX 0PX 0PX;
MARGIN : 25PX 0PX 10PX;
COLOR : #000;
}

ってコードがあります。

ここの

BORDER-BOTTOM : 1PX #FF0000 SOLID;

ってのがメニュー(メモ帳やカレンダー・カテゴリの入っているスペース)の

横棒(敷居棒)の太さと色のコードです。

PXの数字を変えて太さを設定。色も変えちゃってください。


そのちょっと下にある

DIV.POST_HEAD {
MARGIN-BOTTOM : 15PX;
PADDING-TOP : 15PX;
BORDER-TOP : 1PX #FF0000 SOLID;
}

で、同じように投稿記事の横棒が変更できます。

コメント欄の横棒はそのちょっと下にある


DIV.COMMENT {
TEXT-ALIGN : LEFT;
BORDER : 1PX #BFB69A SOLID;
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200406/23/90/gosyoB.gif);
PADDING-LEFT : 15PX;
        PADDING-RIGHT : 15PX;
MARGIN : 20PX 0PX 20PX;
        OVERFLOW : HIDDEN;
}

のBORDER : 1PX #BFB69A SOLID;


を弄れば、カンタンに変更できます。


これで相当ブログのデザインがオリジナルに為ったはず。

次回では、最低限知っておきたいCSSコードの意味について勉強しましょう。

でわでわ。
[PR]
by 201V1 | 2004-06-24 08:00 | Д気合で変えるブログデザイン
強引スキン大改造 ( その8 )

うい。

理論上は、皆様のスキンは見事オリスキになっているはず。

理屈を排除してスキン改造を進めるのは大変だったと思います。ご苦労様です。

では、そろそろ理屈を追いつかせましょう。

以下に最低限、覚えておきたいCSSコードを列記します。

まぁ、<A HREF="http://www.openspc2.org/reibun/css/">ココ</A>に飛べば、ちゃんと勉強できるので、本来はこっちに行って欲しい。笑



それでは勉強しましょう。

すでにどのコードが、ページのどこを司っているのかは、

御理解いただけていると思います。

したがって理解の困難と思われるトコロを重点的にやりましょう。




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

MARGIN : 0PX 0PX 0PX 0PX;

このコードは、余白に関するコードで( 外側余白 )のサイズを指示するコードです。

上の場合、上側外余白なし・下側外余白なし・左側外余白なし・右側外余白なしってコトです。

ぶっちゃけると、ここの数字によって、

投稿記事スペースとメニュースペースの「間の空間の広さ」とかが決まります。

画像位置の微調整とかでも、使います。(外側余白の大きさで位置を変える)


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
実際にCSSコードにある MARGIN でムカつくのは、


MARGIN-TOP : 15PX;

MARGIN-BOTTOM : 15PX;     

MARGIN-LEFT : 15PX;      

MARGIN-RIGHT : 15PX;     


と書かれている場合です。混乱の元ですね。

これはカンタンニいうと、

MARGIN-TOP : 15PX;      = MARGIN : 15PX 0PX 0PX 0PX;

MARGIN-BOTTOM : 15PX;     =  MARGIN : 0PX 15PX 0PX 0PX;

MARGIN-LEFT : 15PX;      =  MARGIN : 0PX 0PX 15PX 0PX;

MARGIN-RIGHT : 15PX;     =  MARGIN : 0PX 0PX 0PX 15PX;


ってコトです。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

で、さらにムカつく混乱の元が、

MARGIN : 0PX 0PX 15PX ;

ってやつ。数字入力部が3つしかありませんが、

MARGIN : 0PX 0PX 15PX ;   =  MARGIN : 0PX 0PX 15PX 15PX;

という意味です。混乱の元ですね。


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
で、

MARGIN : 5PX 10PX ;

とかもあるわけですが、こいつも同様に

MARGIN : 5PX 10PX ;    =    MARGIN : 5PX 5PX 10PX 10PX;

という解釈になります。ウザァイですね。


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

当然、

MARGIN : 10PX ;   =   MARGIN : 10PX 10PX 10PX 10PX;

です。

・・・・・おお、こりゃ便利。(笑

ってことで皆様、MARGIN はカンペキですね。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

お次は

PADDING : 0PX 0PX 0PX 0PX;

です。

これはですね、( 内側余白 )の上下左右の長さ指定になります。

カンタンに言うとですね、

投稿記事スペースに打たれる「 記事=文字 」を

投稿記事スペースのギリギリまで打つのか、余裕を持たせるのかって感じです。

左右の内側余白をゼロにすると圧迫感が出てしまいます。

15PXくらいは余裕を持たせてあげましょう。

PADDING-TOP : 15PX; とか

PADDING : 10PX ;  とかは

MARGIN で勉強したのと同じです。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

次は画像位置(看板)についてです。

画像位置の決定にはいくつか方法があり、

background-position:100% 0%;

でおーざっぱに左右軸の位置を決め、

その次に

MARGIN-TOP : ?PX;

を叩き込んで

で上下軸の位置をきめる方法がひとつ。

もうひとつは単純に

background-position:200px 200px 80px 80px;

って感じで「 一撃 」で決定する方法です。

個人の好みでやってください。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ちなみに余談ですが、

メモスペースなどにGIF動画を貼り付ける場合、

まずは画像をマイイメージに登録し、

<IMG SRC="●">

●部分に画像URLをぶち込んで貼り付ければOKです。


また、当然のことですが、スキン編集画面のHTML欄そのものが

実は「 第二のメモスペース」だったりします。(笑

画像から文字から打ちまくれます。

頑張ってください。笑



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

まぁこんなもんでしょう。後はCSSコードに詳しいページで理解を深めれば楽勝です。


オススメは、

http://darkrose4.exblog.jp/i13

エキサイトブログ素直になりたいの「技」におけるエキブロスキン解体データと

http://www.openspc2.org/reibun/css/

CSS例文事典です。


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

なお、CSSを弄りまくり、

雛形のスキンとかけ離れた「 間取り 」になってしまった場合、

エキブロ特有の不具合が発生する場合があります。



投稿した記事の右側が見えなくなるという現象です。



この現象を止める1番早い方法は

CSSコードにある

DIV.POST {

DIV.POST_BODY {



WIDTH : ?%;

の数字を、100より低い、95とか90に設定してしまう方法です。

これで問題は解決されます。


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



えー、じっくり読めば問題なくオリスキが完成するものと思われますが、

どーしてもうまく行かないときはご連絡ください。

微力ながらお手伝いさせて頂きます。


あとはですね、画像ですね。

看板などの加工がうまくできない場合、ご一報いただければ加工して返送します。

まーソフトがソフトなので限界はありますが、

ウンコソフトでも3つ合わせれば結構な効果がだせますので。笑



でわでわ。

皆様がオリジナルスキンを持てることを祈って。



アディオス!
[PR]
by 201V1 | 2004-06-24 08:00 | Д気合で変えるブログデザイン

[PR]
by 201V1 | 2004-06-24 07:59 | Д気合で変えるブログデザイン