知識、知恵のカタマリ

[PR]コレがGoogleの検索ストーリー

解決済

clip!clip!
Ads By Google

2カラムから3カラムになりません。

現在「Blueline」のブログを使っていて、
2カラムから3カラムに変えたいのですが

#container
#blogcontainer
#wrapper
#content
#left
#right

をCSSに書き加えても、2カラムのままで更に
崩れてしまいます。
「Blue Line」を3カラム化する方法を教えて欲しいです。お願いします。

2006-09-14 23:33の質問
livedoor  blog  
livedoor Blog
livedoor Blog のホームページはこちらです
blog.livedoor.com/
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(1)

1.

2006-09-15 21:35:43ベスト
[デザインの設定]-[カスタマイズ]で「トップページ」などに、<div id="blogcontainer"> の下に<div id="wrapper">などの記述はありますか?
なければ追加しなくてはなりません。

既にカスタマイズされていたら、もう一度「Blueline」を選択してから以下のように変更してみてください。

1.HTMLの変更
トップページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブを以下のように変更します。

1)<div id="blogcontainer"> と<div id="content">の間に
<div id="wrapper">
を追加する。

2)<div id="links"> を
<div id="left">
に変更する。

3)<$PluginList_A$>の後に
</div></div></div>
<div id="right">
<div id="linkstop"></div>
<div id="linksbody">
を追加する。

2.CSSの変更
1)「#links」を「#left」に変更

2)「#content」の「width:540px;」を「width:350px;」に変更し、「float:left;」を「float:right;」に変更

3)「#left」の「float:right;」を「float:left;」に変更

4)以下を追加
#right{
width:190px;
float:right;
}
#wrapper{
float:left;
width: 540px;
}

なお、#wrapperと#contentの幅を広げる場合には、#banner,#subbannerの背景画像を、画像処理ソフトなどを使って横幅を広げる必要があります。

分かりやすい回答、ありがようございます。
思ったとおりに変更できました。

Ads By Google

コメント(2)

2006-09-15 00:32:23

ちなみに過去ログはご覧になりましたか?
http://knowledge.livedoor.com/1108
が参考になりそうな気がします。

また、「Blue Line」というデザインテンプレートはどのカテゴリにあるのでしょうか…?
探してみたのですが見つからず…。
出来ればブログのURLを教えて頂けると助かります。

#2.  yozu
2006-09-15 02:01:42

コメントありがとうございます。
正しくは「Blueline」で、コレです↓
http://blog.livedoor.com/design_demo/simple_line_b...

その過去ログは見て、一応変更入れてみたのですが
3カラムにならず苦戦してます。

トラックバック(2)

トラックバックURL: