人気ブログランキング | 話題のタグを見る
マイスキン試行錯誤その2
☆トップにタイトル画像を表示させよう☆
まず、タイトル画像を用意して、エキサイトブログにアップロードします。
次に、HTML(全体)にタイトル画像を入れるエリアを設定します。
デフォルトソースの頭のこの部分
<CENTER>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=700>
<TR><TD HEIGHT=30></TD></TR>
<TR><TD VALIGN=TOP>
<DIV CLASS=HEADER><$header$></DIV>
<DIV CLASS=URL><$blogurl$></DIV>
<DIV CLASS=USERMENU><$adminmenu type=1$></DIV>
</TD></TR>
<TR><TD HEIGHT=30></TD></TR>
</TABLE>

に、以下の部分を書き加えます。
<CENTER>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=700>
<TR><TD HEIGHT=30></TD></TR>
<TR><TD HEIGHT=135>
<DIV CLASS=TOP>
</DIV></TD></TR>

<TR><TD VALIGN=TOP>
<DIV CLASS=HEADER><$header$></DIV>
<DIV CLASS=URL><$blogurl$></DIV>
<DIV CLASS=USERMENU><$adminmenu type=1$></DIV>
</TD></TR>
<TR><TD HEIGHT=30></TD></TR>
</TABLE>

赤字の部分が新しく書き加えたクラス「TOP」で、
TD HEIGHT=~には自分のタイトル画像の高さを指定します。
緑字の部分はタイトル画像の上の余白、
青字の部分はヘッダーと本文・メニューエリアの間の余白です。
余白を調節したいときはこの部分のTD HEIGHT=~の数値を変えてください。
ちなみに現在このスキンではタイトル画像上の余白0(緑の行まるごと消してある)、
ヘッダー下の余白10にしてあります。

続いて、HTMLで設定した「TOP」というクラスに、実際タイトル画像を入れましょう。
CSSソースの、DIV.HEADER~…の前辺りに、このように書き加えます。
DIV.TOP { BACKGROUND : #FFFFFF URL(http://~自分の画像のurl) NO-REPEAT CENTER; HEIGHT : 135; }

{BACKGROUND : 背景色 画像url 繰り返し指定 画像を置く場所 ; 画像の高さ ;}
という風に、自分で好きなように設定してください。

タイトル画像設定後、私はデフォルト指定のマイブログタイトルが邪魔だったので
HTMLの<DIV CLASS=HEADER><$header$></DIV>の部分と
CSSのDIV.HEADER~…の部分をサクッと消しちゃいました。

あ、上のソースサンプルではタグを囲む<>を、実際投稿本文に反映させるタグと区別つけさせるためにすべて全角にしてあります。
そのためサンプルからそっくりそのままコピーして使おうとするとおかしくなっちゃうので注意してくださいね。
by kaokaopon | 2004-08-03 15:28 | SKIN
<< マイスキン試行錯誤その3 ↑ページTOP マイスキン試行錯誤その1 >>



KAOと旦那と3匹の猫のたわむれの日々。家に引きこもってるのでネタがありません。最近猫日記となりつつあります(笑)。
by kaokaopon
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
カテゴリ
全体
BBS
雑記
プレマタ
入院日記


観た
読んだ
作った
お取り寄せ
レシピ
SKIN
BLOG
WEB
日々。
ABOUT
以前の記事
2010年 10月
2010年 04月
2009年 08月
2009年 01月
2008年 10月
2008年 07月
2008年 06月
2008年 04月
2008年 03月
2008年 02月
2008年 01月
2007年 12月
2007年 11月
2007年 10月
2007年 09月
2007年 08月
2007年 07月
2007年 06月
2007年 05月
2007年 04月
2007年 03月
2007年 02月
2007年 01月
2006年 12月
2006年 11月
2006年 10月
2006年 09月
2006年 08月
2006年 07月
2006年 06月
2006年 05月
2006年 04月
2006年 03月
2006年 02月
2006年 01月
2005年 12月
2005年 11月
2005年 10月
2005年 09月
2005年 08月
2005年 07月
2005年 06月
2005年 05月
2005年 04月
2005年 03月
2005年 02月
2005年 01月
2004年 12月
2004年 11月
2004年 10月
2004年 09月
2004年 08月
フォロー中のブログ
食卓から愛をこめて
* もなこの手づくり石け...
だって私はドラマ好き♪
ベジタリアンの厨房
気ままな星遊び
笑門来福
pumilus sapo
母ちゃんちのご飯
***いつか出会えるあな...
茶タローくぅぅぅん.2
ほんの小さな庭
***やっと出会えたあな...
ゆっくりのんびりいこうじ...
ライフログ
タグ
(92)
(77)
(22)
(15)
(6)
検索
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧