« ナビゲーション・メニュー設置 | メイン | 4:サイドバーをいぢる(2::項目ごとに囲む) »

4:サイドバーをいぢる(1::背景)

まずは、背景の色をめいいっぱい下に広げて、上下左のスキマをなくしたいのだ。

20060406-04

20060406-05 

  1. 左側のスキマが20pxあるので0pxにつめる。
  2. alphaの幅が200pxなので、 220pxに変更。
  3. 上のスキマが20pxあるので0pxにつめる。
  4. alpha(サイドバー)の背景部分をコピーライトいっぱいまでつめる。

と、こんな感じである。

mt-static/themes/original/フォルダoriginal.cssにつけたし。 (赤字から青字へ)

で、page layoutと、two-column-left tweaksで、同じ項目が並んでいる場合、two-column-left tweaksの記述の方が優先されるみたいなので、page layoutの方の記述は削除してしまいました。

/* page layout */

#alpha { margin: 20px 0px 20px 20px; width: 260px; } (削除)   
#beta { margin: 20px 0 0 40px; width: 420px; } (削除)


/* two-column-left tweaks */

.layout-two-column-left #alpha {
 height:100%; (追加)
 width: 200px; → 220px
 background-color:#ffcc66;
 margin: 0px;  (追加)
}

.layout-two-column-left #beta {
 width: 540px;
 margin: 20px 0 0 20px;
}

・・・っと、あれ?下にいっぱいいっぱいまで広がらないぞ・・・。何度やってもダメ。(;´д`)

20060406-09
 ←ほらこんな感じ。

 

 

 

 

検索してあちこち調べてみたら、100%の記述をしても無理みたいね・・・。しゃーないので、 #ffcc66の背景は、画像で対処することに・・・。

●800px×4pxの横長の画像(bar-l-bg.gif)を用意する。

original.cssの以下の部分を書き換え。(赤字から青字へ)

/* two-column-left tweaks */

 .layout-two-column-left #container-inner { background: none; } → #ffffee

 .layout-two-column-left #pagebody {
 background-color:#ffffee; → background: transparent url(bar-l-bg.gif)  repeat-y;
}

よっしゃ!できたできた。

    20060406-07 20060406-08

トラックバック

このエントリーのトラックバックURL:
http://m.vv.cx/b_mt/mt-tb.cgi/25

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)