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

すいません、BLOGのHELPを読んでみたのですが、 [Blogtimes] の設定というのはわたしのプラグインの設定画面にありません。^^;

もともと２カラムだったものを３カラムにしてみたのですが、２カラムのときに使っていたプラグインを左へ移行しただけなんですが…まいりました。
先は長そうです。

http://blog.livedoor.jp/blog_guide/archives/649787...
↑こちらも確認しましたか？
私も Liquid シリーズを使っていますが、画像の大きさに問題が無ければ、大抵（１）か（２）が原因です。。

それが確認したんですよ…-_-;

ちょっと気付いたのは、どうやらカテゴリーのプルダウンの長さに問題があるみたです。
ちなみに、FireFoxだと正常に見えてるそうです。
IEに対応させるためにはCSSの書き換えが必要なのかな？というところです。

わたしのblogはココ↓ですが、
http://blog.livedoor.jp/sitty_mint/
何か問題点があったらご指摘ください。m(_ _)m

＞ちょっと気付いたのは、どうやらカテゴリーのプルダウンの長さに問題があるみたです。

サイトを確認しましたが、
原因は、その部分だと思います。。

幅を狭くしてみて下さい
１９０ｐｘがこのデザインのサイドバーの幅なので、試しに１７０ｐｘ程度に・・

すごく初歩的な質問になってしまいますが、プルダウンの幅って狭められるんですか？^-^;

もし、やりかたをご存知なら教えていただきたいです。
何度もお願いして申し訳ないですが、よろしくお願いします。(_ _)

私はプルダウンメニューを使った事がないので・・
ごめんなさいm(_ _)m
↓に過去の質問で同じようなのがあったので載せときます
http://knowledge.livedoor.com/4908

過去の質問をよく捜せば答えが見つかるかも？
しれません・・

>>#6
>>2のCSSの追加ではダメでしたでしょうか？
それでしたら、マイケルボーンさんの回答でお願いします。

CSSを以下のごとく書き換えたところ、

#container{
width:1000px;
margin:0 auto;
text-align:center;
background:url(http://parts.blog.livedoor.jp/img/usr/liquid_plant/bg02.gif) repeat-y 50% 0;
word-break:break-all;
}
#wrapper{
width:700px;
float:left;
text-aling:center;
}

#content{
width:405px;
float:right;
text-aling:center;
}

#blog{
width:395px;
margin:0 auto;
text-align:left;
}

#lefttop,#righttop{}

#left{
width:200px;
float:right;
text-align:center;
}

#right{
width:190px;
float:left;
text-align:center;
}

左サイドバーは正常に見えるものの、右サイドバー部分が狭くなり、下部へずれ込む結果となってしまいました。

本文と右サイドバーに間隔を開ける方法があったら教えて下さい。(_o_)

>>#9
うーん、、大きな手入れになってしまいましたね。。

一応確認しておきたいのですが、

.side select{width:170px;}

を追加してもプルダウンが縮まらなかったので、サイドバーの幅を広げる改造をしているという解釈でよろしいでしょうか？
というのも、このデザインでは画像のカスタムも必要で、それなりに手間がかかるんです。

.side select{width:170px;}もCSSには追加しましたよん。^-^ﾉ
しかし、何故か反映されなかった…何度も再構築してみたんですけどね、でもこうなったらこのまま頑張ってみようかな？というところです。

>>#11
こちらPCでチェックしたらIEでもFirefoxでも縮まったのですけど、どうしてなのでしょうかね。


サイドバーの幅を広げるなら、ポイントは大体このようになります。

1.まずは#rightと#leftの幅を広げます。
2.#wrapperの幅は#leftと#contentの合計です。
3.#blogcontainerの幅は#wrapperと#rightの合計です。

カスタム前のwidthの値を参考にするとうまくいきます。
現在カスタムで追加されているfloatなどの指定は全て削除してください。
あと、背景画像も変更しないとレイアウトと合わないです。

>>#9のCSSは
#wrapperが大きすぎるのと、#blogcontainerを変更していないのが原因で、サイドバーが落ちていると思います。

#containerの幅は#blogcontainerよりも広ければ問題ありませんが、敢えてwidthを指定しなくてもいいような気がします。

imgさんの言うとおり、以下のごとくCSSを書き換えました。

#blogcontainer{
width:765px;
margin:5px auto 0;
padding-bottom:30px;
background:url(http://parts.blog.livedoor.jp/img/usr/liquid_plant/bg01.gif) repeat-y 50% 0;
}

#wrapper{
width:585px;
float:left;
text-aling:center;
}

#content{
width:380px;
float:right;
text-aling:center;
}

#blog{
width:340px;
margin:0 auto;
text-align:left;
}

#lefttop,#righttop{}

#left{
width:200px;
text-align:center;
}

#right{
width:180px;
text-align:center;
}

        .side select{width:170px;}

概ね完成に近いようなニオイはすすのですが…^-^;
左サイドバーが下部へずれ込み、上がって来ませんでした。
どこか不具合があるようならご指摘ください。m(_ _)m

サイドバーを広げた分を記事で狭めたいのかもしれませんが、そうするとまた記事の方が原因でサイドバーが落ちるので、サイドバーのみを広げるということで修正してみます。

#container{
	width:826px;
	margin:0 auto;
	text-align:center;
	background:url(http://parts.blog.livedoor.jp/img/usr/liquid_plant/bg02.gif) repeat-y 50% 0;
	word-break:break-all;
}

幅を40px広げました。

#banner{
	width:767px;
	height:155px;
	text-align:left;
	margin:0 auto;
	background:url(http://parts.blog.livedoor.jp/img/usr/liquid_plant/header.jpg) no-repeat 50% 0;
}

高さを155pxに戻してください。ブラウザによっては表示が崩れます。

#blogcontainer{
	width:805px;
	margin:5px auto 0;
	padding-bottom:30px;
	background:url(http://parts.blog.livedoor.jp/img/usr/liquid_plant/bg01.gif) repeat-y 50% 0;
}

幅を40px広げました。

（つづき）

#wrapper{
	width:605px;
	float:left;
	text-aling:center;
}

幅を20px広げました。

#content{
	width:405px;
	float:right;
	text-aling:center;
}
#blog{
	width:395px;
	margin:0 auto;
	text-align:left;
}

初期値に戻しました。

#left{
	width:200px;
	float:right;
	text-align:center;
}
#right{
	width:200px;
	float:left;
	text-align:center;
}

20px広げました。floatが逆になっていたので戻しました。

あと、CSSの最後にあるbody、#right、#leftはすべて削除してください。

画像は、
#containerの背景
http://parts.blog.livedoor.jp/img/usr/liquid_plant...
をダウンロードして、
自分のPCで横幅を40px広げ（センターの白抜きの部分）、
ブログに画像をアップロード、
上記のCSSをアップした画像のURLに更新、
という手順を踏んでください。

#blogcontainerの背景
http://parts.blog.livedoor.jp/img/usr/liquid_plant...
これも同様の操作でお願いします。

.calendarheadと.sidetitleの背景に指定されている
http://parts.blog.livedoor.jp/img/usr/liquid_plant...
は20px広げてください。

imgさんのアドバイスを元にCSSを書き換え、GIFもアップロードしてやっと、ちょっとブサイクですが、３カラム化成功しました！
今まで相談に乗って下さったHSさん、usaさん、マイケルボーンさんにも感謝、感謝です。
ほんとうにありがとうございました。m(_ _)m
今後も日々、精進してまいりまーす！

どういたしまして。
お役に立てて何よりでした。

ps.
あとはこんなところを変更してみてください。

CSS最初の行の頭にアットマークを入れます。

@charset "EUC-JP";

#containerの幅を829pxにします。前回の幅は画像の幅を考慮していませんでした。すみません。

#blogcontainerの背景画像は前に書いたの同様の編集ではダメでした。すみません。
よろしければこれをDLして使ってください。
http://site.box.net/ping/download/81269725/nq5sqbh...

.calendarheadと.sidetitleの背景画像が広がっていませんでした。
ついでに作ったのでこれをDLして使ってください。
http://site.box.net/ping/download/81269791/nq5sqbh...

あとは#bannerの幅を807pxに広げて、それに合わせて画像を広げると見栄えが良くなるかもしれません。

imgさん、@charset "EUC-JP";は最初から入ってました。^-^; たぶんデフォルトでついていたのかと。

画像はありがたく頂戴させていただきました。
とても見栄えは良くなったと思います。
何から何まで…ありがとうございます。

どういたしまして。
乗りかかった船だったので。

最初の1行の件は書き方が悪かったみたいですみません。

正

@charset "EUC-JP";

誤（現在のCSS）

charset "EUC-JP";

はじめの1文字「@」が抜けているので、
動作が少しおかしいみたいです。

では。

あっ、@、確かに入っていませんでした。さっそくなおして再構築しました。
どうもありがとうございます。m(_ _)m

トラックバックURL: