解決済

clip!clip!
Ads By Google

3カラムの右サイドバーを広げたら本文に重なってしまいました。それを修正し、本文の文字数を現在の45から30程度にしたいです。お教えください。

default_2008_gray_3cリキッドを使用しています。

右サイドバーに、横幅234pixのバナーを必ず入れたいです。

左サイドバーは、現状の幅で結構なのですが、3カラムのブログで、カラムのひとつひとつのサイズがばらばらの物を見たことがありません。もしもばらばらのデザインが無理でしたら、右サイドバーの幅とおなじで結構てす。よろしくお願いします。

2008-10-09 04:22の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(1)

1.

2008-10-10 18:33:25ベスト
こんにちは。

左右別幅は可能です。
サイドバーの幅を広げるときはdiv#main div.column-innerのmarginの数値もいっしょに変えてください。
今はmarginの数値が2つです。このときは上下と左右でマージンを指定しています。
div#main div.column-inner {
	margin: 0 220px;	/* 上下 左右 */
	border-bottom: 1px solid #484848;
}

これを以下のように4つに分けると上・右・下・左の順に独立して指定できます。
div#main div.column-inner {
	margin: 0  280px 0 220px;	/* 上 右 下 左 */
	border-bottom: 1px solid #484848;
}

直された左サイドバーが260px、右サイドバーが230pxなので、それぞれ+20pxくらい増やした値を指定すると良いです。

と、ここまでは簡単ですが、
更に左サイドバーに指定してある背景画像の幅を10ピクセルほど広げる必要があります。
「div#sub」と「div#sub div.column-inner」の「background」指定の中にある
url(画像URL)
の2つの画像を自分のパソコンにダウンロードして、
ペイントなどの画像編集ソフトで幅を10ピクセル広げて(2ともです)、
編集が終わった画像をブログにアップロード(2ともです)、
上記CSSをアップした画像のURLに変更(2ともです)
…という手順が必要です。

imgさん本当にありがとうございます。

おかげさまで納得のいく変更ができました。

ライブドアブログは、再構築するのが連続8回までしか許されていないため、作業中にその回数を超えてしまい、次の作業まで3時間、間隔をとる必要があり、要領が悪い私は、今までかかってしまいました。ご心配をかけてすみません。

もしもライブドアブログで同じような変更をお考えの方がいましたら、参考になるのではないかと、私の10/11の変更を載せさせていただきます。

body {min-width: 640px;}

div#container {width: 1000px;}

div#main div.column-inner {
margin: 0 260px 0 230px;}

div#sub {width: 230px;}

div#extra {margin-left: -260px;
display: inline;
width: 260px;}

Ads By Google

コメント(5)

#2.  F.Barrel
2008-10-10 22:40:39

imgさん、お答えありがとうございます。申し訳ないです。最初の私の質問の文章がまずかったかもしれないと反省しています。(※とりあえず、背景の画像の加工は、後まわしにします。)

1.私が横幅を拡大したのはスクリーン画面に向かって右側のカラムです。そうしたら、中央のカラム(記事の本文)に文字が乗ってしまいました。

2.+20px広げるのは、"margin: 0 280px 0 220px"の数値の方でしょうか?

3.本文の文字数を45→30程度に減らすのも、同時に実現するのでしょうか?

重ね重ね恐縮です。

#4.  imq
2008-10-10 22:48:57

1と2についてですが、回答したときから少し変えられているようですね。
今は両サイド240pxですので、左右を+20pxした、

	margin: 0 260px;
で良いと思います(↑は+20した変更後です)。

3については、中央の記事の部分はブラウザのウィンドウサイズで可変するようにできていて、更に見る人の環境によって文字サイズやフォントの種類も変わりますので、厳密に文字数を固定することはできません。

ウィンドウ幅を固定にして、だいたい30文字くらいにしたいということでよろしければ、
div#container
の中の
width: 94%
となっているのを
width: 980px;
くらいにしてみてはいかがでしょうか。

#5.  BLUEPIXY
2008-10-11 16:55:26

再構築って連続8回しかできないのですね。
過去に結構再構築しまくったりしたことがあるような気がするのですが、
(負荷軽減のために?)最近そのようになったのでしょうか?

#6.  imq
2008-10-11 23:14:47

+20はしないで詰めたんですね。
うまくいってよかったです。
また気軽にどうぞ。

>再構築
多くなるときはローカルで作業するのでいつからなのかは知らないですが、昔は多分そうではなかったと思います。

#7.  F.Barrel
2008-10-12 09:11:33

BLUEPIXYさん、はじめまして。

私は、本当にうっかり者でして、CSSを編集するページの上の方にある「結果を反映させる」を見落としていまして、「再構築」という方だけを使用していました。

なので、もし、「結果を反映させる」を使って作業してたなら、8回などという限度がなかったのかもしれません。

トラックバック(2)

トラックバックURL: