本文へジャンプします。

ココログサポート Top>>Questions List>>右サイドバーの幅変更が反映されない（真っ...

question

右サイドバーの幅変更が反映されない（真っ白になってしまう）

いつもお世話になっております。
現在、オリジナルテーマ(Hills Dusk)で3列レイアウトにしています。
左サイドバーは固定したまま（スライドショーを載せているため）記事中の写真を大きく掲載したいので、過去の質問を見て

#container{width: 804px;}
#center{width:500px;}
#left{width: 200px;}
#right{width: 100px;}

としたのですが、右サイドバーに載っていたバックナンバーや最近の記事がなくなり、真っ白になってしまいます。
あと、列の間に入っている区切り線？なようなものがそのまま残り、おかしいです。

#center{
width:500px;　}

#container{
width:804px; }

（左サイドバーが狭くなると困るので「可変」にしない）のようにしても変わりませんでした。
右サイドバーを小さくし、かつ変な区切りの縦線が入らないようにする方法を教えてください。

あと、
804px は記事欄の幅＋サイドバーの幅＋枠線の幅　ですが
（オリジナルテーマだと、800pxが横幅だと思います）

他の回答をみると、1000px以上の幅に設定している人
がいるようですが、カスタムテーマにしないと広げられないのでしょうか？　写真を載せる幅をできるだけ広くしたいのでページ全体の幅が広がれば嬉しいです。
長くなりましたがよろしくお願いします。
basic infomations

ふぉれすと | 2009/11/29 13:44(5683days ago) | permalink | デザインの変更／管理

Please login to comment.

Re: 右サイドバーの幅変更が反映されない（真っ白になってしまう）
ブログを拝見しましたが、ご質問の文章中にあるようなCSSの追記が見受けられませんでした。
もしかしてカスタムCSSの設定が反映されていないのかも知れませんが…。
それと、ご自身のブログのソースは確認されていますか？
拝見した限りでは、「Hills Dusk」の3列レイアウトでの両サイドバーと記事表示領域の<div>のidは、「left」「center」「right」ではなく「alpha」「beta」「gamma」のようです。
「#left」等では追記が反映されていたとしても指定した幅にはなりません。

＞右サイドバーが真っ白
この現象は（私のPCでは）再現されませんでした。
憶測になってしまいますが、カスタムCSSを編集したこと以外に原因（システムエラーやブラウザのキャッシュ等）があるような気がします。

＞列の間の区切り線
これは<div id="pagebody">（<div id="banner">の下の領域）の中の<div id="pagebody-inner">に適用されている背景画像です。
「#pagebody-inner{background-image:none;}」等の記述で非表示にできると思います。

以上、あまり有効な回答ではありませんが、ご参考まで。

fzqblue | 2009/11/29 17:25(5683days ago) | permalink

Re: 右サイドバーの幅変更が反映されない（真っ白になってしまう）
オリジナルテーマはもともとのCSSがかなりキッチリ出来上がっているので、カスタムテーマよりも修正が難しいですね。

ソースを見たところ、このテンプレートでは
「center」、「right」、「left」がそれぞれ、
「beta」、「gamma」、「alpha」というidで指定してありました。
プラス、bodyに対して「layout-three-column」というクラスが指定されています。

よって、セレクターは
左サイドバー： .layout-three-column #beta
中央（記事欄）： .layout-three-column #gamma
右サイドバー： .layout-three-column #alpa
となります。

私が試した限りでは左：200、右：100にした場合の記事欄の最大は540pxでした。
（それ以上だと右サイドバーが落ちます）
更に、記事欄の左右に10pxずつ余白が入っていますのでこれを減らすことが出来ます。

それから『列の間に入っている区切り線』はborderでの指定ではなく画像でした。

.layout-three-column #pagebody-inner

という部分に背景画像として指定してあるので、これを非表示にすれば罫線が消えます。

以上をまとめると

/*左サイドバー*/
.layout-three-column #alpha{ width: 200px; }
/*記事欄*/
.layout-three-column #beta{ width: 540px; }
/*右サイドバー*/
.layout-three-column #gamma{ width: 100px; }
/*罫線非表示*/
.layout-three-column #pagebody-inner { background:none; }
/*記事欄余白削除*/
.entry-content{
margin-right:0px;
margin-left:0px;
}

という感じのCSSでご希望に近いものが出来るのではないかと思います。

尚、このテンプレートで幅を1000px以上にするのは私には難しくてうまく対応出来ませんでした。
もっと詳しい方の回答をお待ち下さい。

以上、ご参考まで。

no-name. | 2009/11/29 17:36(5683days ago) | permalink

Re: 右サイドバーの幅変更が反映されない（真っ白になってしまう）
no-name.さんのご回答を基にちょっと試してみたのですが
#bannerの背景画像の幅が1090pxだったので

#container{width:1090px;} /*全体の幅 */
#banner{width:100%;} /*bannerの背景画像を幅いっぱいまで表示*/
.layout-three-column #pagebody-inner{background:none;} /*罫線非表示*/
.layout-three-column #alpha{width:200px;} /*左サイドバー*/
.layout-three-column #beta{width:670px;} /*記事欄*/
.layout-three-column #gamma{width:100px;} /*右サイドバー*/

までは、現在のレイアウトに近い形で記事欄の幅を広げられそうです。
（ただしFirefoxでしか確認していないので、IEだと崩れるかも知れませんが…）

また、no-name.さんのご回答にもあるように記事欄の余白削除や、左右サイドバーと記事欄との間のmargin（現在は40pxほど空いてます）を減らしたり削除したりすると、記事欄の幅をもう少し広げることも出来ると思います。

fzqblue | 2009/11/29 19:04(5683days ago) | permalink

Re: 右サイドバーの幅変更が反映されない（真っ白になってしまう）
fzqblueさん、no-nameさん、詳しい回答をありがとうございました。

cssは初心者なので、
alpha-beta-gammaで幅を指定する方法は初めて知りました。
今までの写真が小さく、写真横のあきが目立ってしまうので、とりあえず
#beta{ width: 480px; }
#gamma{ width: 160px; }

にしています。
でも、これだけでも横位置の写真がかなり大きくなりましたので、大満足です。

＞幅を1000px以上に
カスタムテーマにしても良いのですが、見出しや両端のデザインが変わってしまうので…
またトライしてみます。

ふぉれすと | 2009/11/29 19:52(5683days ago) | permalink