人気ブログランキング | 話題のタグを見る
強引スキン大改造  その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編」をコピーして、うちの解説と睨めっこすると理解がしやすいはずです。

頑張ってね。

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