お蔵入り

clip!clip!
Ads By Google

CSSの本文とサイドバーの幅の変更について。

はじめまして。
タイトルの通り本文とサイドバーの幅の変更について
お聞きしたく投稿しました。

使っているのは
livedoor Blog CSS
Vivid Style(3カラム)です。

本文とサイドバーの幅を広げるにはどうしたら良いのでしょうか?
過去ログなどを調べてみたんですが、同じデザインを使っている人を
見つけれなくカスタマイズが出来ずにいます。

このデザインの幅を広げる方法が分かる方いらっしゃいましたら宜しくお願い致します。

2009-02-16 10:57の質問
この質問は、30日間解決しなかったために自動的に質問が一旦閉じられました。

回答(2)

1.

2009-02-16 11:36:55
たとえば本文を100px広げて、サイドカラムを50pxずつ広げる場合は、下記のような変更になります。

#container{
 width:1008px; <-- +200px
}
#wrapper{
 width:733px; <-- +150px
}
#content{
 width:458px; <-- +100px
}
#left{
 width:268px; <-- +50px
}
#right{
 width:268px; <-- +50px
}
ただし、VividStyleは本文やサイドカラムの各プラグインを囲んでいる部分を背景画像で指定しています。そのため、単純に横幅を広げるだけだと、文字は広がりますが背景は広がりません。

それぞれの背景画像を広げた横幅に合わせて広くして、ファイルの管理などからアップロードし、CSSで背景画像を指定しなおす必要があります。

2.

2009-03-13 02:15:41
Ads By Google

コメント(4)

#1.  いのこ
2009-02-16 11:52:45

>>1
回答ありがとうございます。
確かにtani.masaruさんの言う通りやると文字だけ広がってしまいます。。

背景画像と言うのはbackground:url(http://parts.blog.livedoor.jp/img/usr/vivid_style/title_3c.gif)
のことでしょうか?
これをブログの画面で保存して画像ソフトで加工しまたアップロードと言うことでいいのでしょうか?
宜しくお願いします。

#2.  いのこ
2009-02-16 12:27:36

画像保存の事や加工の事を検索してみたら、かなり大変な作業ぽいですね・・・。

>本文やサイドカラムの各プラグインを囲んでいる部分を背景画像で指定しています。

と言うことはVividStyleじゃなければもう少し簡単に出来るのでしょうか?
似たようなテンプレートで各プラグインを囲んでいる部分を背景画像で指定していない物もあるのでしょうか?
宜しくお願い致します。

2009-02-16 12:27:45

そうですね、それはタイトル部分ですが、他にも本文エリアの上下パーツと両横のパーツ、サイドカラムの上下パーツと両横とのパーツなど複数あると思います。
それらの全てが加工対象になります。一度ダウンロードして、保存し画像ソフトで横に広げて、アップロードという手順になります。

2009-02-16 12:30:23

たとえば2008デフォルト系のデザインは、横幅を可変にするために四隅にだけ角丸の画像を貼り付けるという手法を採用しています。しかし、サイドカラムは結局横幅固定のために、同じような作業が必要です。

どれも大して変わらないと思います。

トラックバック(2)

トラックバックURL: