人気ブログランキング | 話題のタグを見る
強引スキン改造その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(●);

を張ってください。









これで壁紙は完璧です。


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


でわでわ。
by 201V1 | 2004-06-24 08:02 | Д気合で変えるブログデザイン
<< 強引スキン大改造 その3 (壁紙編) 強引スキン大改造  その5 >>