質問する
質問を探す 詳しく検索する

解決済

Clip!
とらとら

サイドばーの幅を広くしたいのでスタイルシートのどこを修正すればいいか教えてください。

ライブドアブログのデフォルト2005（ブルー, 3カラム）です。

・サイドバーの幅を１５０ｐｘに大きくしたいので方法を詳しい方、詳細に教えてください。

サイドバーの幅の変更に伴い、全体の大きさも修正しないといけないことはlivedoor ナレッジでわかったのですが、どこの部分をどういう数値にすればいいかがわかりません。

お願いします。

2007-07-28 11:48の質問
サイドバー  スタイルシート  幅  
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。
Ads By Google
<<前の質問を見る
次の質問を見る>>

回答(1)

1.

2007-07-28 14:50:11ベスト
imq
画像の編集があるので比較的手間のかかるデザインだと思います。

CSS下の各項目のwidthを変更します。
以下の3つは増やしたい幅をピクセル数で加算します。
#left
#right
#wrapper

こちらの3つは上で増やした分×2を増やします。
#container
#banner,#subbanner
#blogcontainer

背景画像は、
1. SSの各項目のbackground要素にあるURLの画像をダウンロード
2. 自分のPCで編集（ペイントなどで）
3. ブログにアップロード
4. CSSのbackground要素をアップした画像のURLに指定しなおす
という手順を踏みます。

変更する画像は、
#containerの中の
background:url(http://parts.blog.livedoor.jp/img/usr/new_default_blue/base.gif) repeat-y;
中央の白抜きの部分が記事、左右の有色の部分がサイドバーの背景になりますので、
白抜きの幅はそのままに、有色の部分を上記で増やしたピクセル数だけ横に広げます。

.sidetitleと.calendarheadの
background:url(http://parts.blog.livedoor.jp/img/usr/new_default_blue/title_bar.gif) no-repeat;
サイドバーのタイトルの背景です。
ここも広げたピクセル数に合わせて増やしてください。
Ads By Google

コメント(8)

コメントする
#1.  imq
2007-07-31 18:01:35

分からないところがあればコメントでどうぞ。

#2.  とらとら
2007-08-03 10:49:19

#containerとsidetitleと.calendarheadのピクセル数の変更場所がわかりません。ピクセル数の変更部分の名前の詳細と変更前の数値（念のため）を教えてください。

#3.  imq
2007-08-03 18:37:48

＞#containerとsidetitleと.calendarheadの

これは背景画像の変更の方でよろしいでしょうか？
そちらはCSSで幅を指定するのではなく、自分のパソコンに画像をダウンロードして、画像編集ソフト（ペイント）を使って幅を広げます。
CSSで変更するのは「background:url(…)」の…の部分で、編集後にアップロードした画像のURLに置き換えます。

それと、具体的な数値を挙げたいところですが、とらとらさんの質問にある150pxという値は初期値（188px）よりも小さくなってしまいます。
サイドバーを狭めたいのでしょうか？
それとも数値の間違いでしょうか？

#4.  とらとら
2007-08-04 02:14:37

すみません。間違いです。２５０ｐｘです。

#5.  imq
2007-08-04 11:32:47

まずは各項目のwidthを変更します。

	#container{
		width:919px;
		margin:0 auto;
		padding-bottom:100px;
		background:url(http://parts.blog.livedoor.jp/img/usr/new_default_blue/base.gif) repeat-y;
		text-align:center;
		word-break:break-all;
	}
	#banner,#subbanner{
		width:897px;
		margin:0 auto;
		background:url(http://parts.blog.livedoor.jp/img/usr/new_default_blue/title_new.gif);
		border-bottom:5px solid #0a4976;
		text-align:left;
		color:#fff;
	}
	#blogcontainer{
		width:897px;
		margin:0 auto;
	}
以上はそれぞれwidthを124px増やしました。

#6.  imq
2007-08-04 11:34:58


	#wrapper{
		float:left;
		width:645px;
	}
	#left{
		float:left;
		width:250px;
	}
	#right{
		float:right;
		width:250px;
	}
こちらはwidthを62px増やしました。

ここまで変更した状態でサイドバーが落ちていないことを確認してください。

#7.  imq
2007-08-05 23:18:26

現状でどこまでできていて、何が問題になっているのかなどを返していただくと、こちらも何かしらの対応できるのですが。

どこが問題なのか分からない場合は、ブログのURLを教えていただければ、こちらで判断しますよ。

#8.  とらとら
2007-08-09 17:38:26

すみません。当初設置予定のバナーの小さい物があることがわかりました。広げなくて済みました。
今回は
詳しい説明していただきありがとうございました。
とてもいい勉強になりました。
今後サイズ変更するときはこの質問の回答を見返して参考にしようと思います。
ありがとうございました。

トラックバック

トラックバックURL: