サイドバーの位置を変更するには

先日コメントで次のような質問をいただきました。

こちらのサイトのように、本文を左側に配置したいのですが、どうやればいいのでしょうか。
教えていただけませんでしょうか。

確かにライブドアの場合はサイドバーの位置もデザインに組み込まれてしまっているので、最初に選んだデザインテンプレートで決まってしまいますからね。試しにこのブログの右サイドバーを左サイドバーに変えてみました。
※でもやっぱり違和感があったので右サイドバーに戻してしまいました。

ライブドアブログのデザインは、３つの部分で構成されています。ヘッダー部分とメインコンテンツ部分とサイドバー部分です。そしてそれぞれの位置や幅はCSS（スタイルシート）で設定されています。今回はサイドバーの位置を変えるので、CSSを編集すればよさそうです。

デザインの編集で、CSSをざっと眺めてみると#content、#linksという記述が見つかると思います。これがそれぞれコンテンツ部分とサイドバーの設定のようです。デザインによって多少の違いがあるかとは思いますが、私のブログでは次のようになってました。

#content{
   float:left;
   width:540px;
}

#links{
   width:220px;
   text-align:left;
   margin-left:570px;
   padding-top:0px;
}

これを次のように変えてみます。

#content{
   float:right;
   width:540px;
}

#links{
   float:left;
   width:220px;
   text-align:left;
   margin-left:20px;
   padding-top:0px;
}

まずは#contentのfloat：をleftからrightにします。#contentの位置の指定です。逆に#linksにfloat:left;を追加します。これでなんとなくサイドバーが左に来そうですね。でももう一つ、#linksのmargin-left:の値を20pxに変更します。これは左余白の指定なので、もともとの570pxでは大きすぎます。

これで私のブログはサイドバーが左側に移動しました。おそらく多少の違いはあるでしょうけど、大体この辺りの修正でどのデザインでもサイドバーの位置を変えられるのではないかと思うのですが。また逆に左から右にするときは下のCSSから上のCSSにしてもらえればいいかと思います。

でも、私の選択したデザインもそうですが、ライブドアブログのデザインは背景の柄とサイドバーの位置がマッチしているのが多いので、サイドバーの位置だけを変えるとデザインが崩れてしまうような気がします。枠やラインの位置を変えるとか背景画像を消してしまうなどの処理も必要かもしれませんね。

参考記事：サイドバーの幅を変えてみた

Comments

こんにちは＾＾
先日サイドバーの幅を広くしてうまくいったので喜んでいたのですが、その後投稿したらサイドバーが消えてしまいました。
それであわてて　#content　の設定を変えました。
私のテンプレートは％指定なので、本文68％、サイドバー30%にしてみたら、見えるようになりました。
なぜ100%で見えないのかは謎です・・

Posted by nyaまたはk2002 at 2004年11月07日 18:05

それは災難でしたね。私もつい先日までサイドバーの問題に悩まされておりました。サイドバーはデリケートですから本当に注意しないとね。
しかし、何故でしょうね。％指定するというのはいい方法だと思うので、私も真似したいところですが、足し算がうまくいかないのは謎ですね。
この辺りHTMLをもっと調べる必要がありそうですね。何か分かったら報告しますので。

Posted by hammer at 2004年11月07日 23:33

サイドバーを両側につけることは、livedoorでは無理ですかね？
ヤプログとかではできてるみたいですけどね。。。

Posted by 初心者かな？ at 2004年11月15日 00:32

サイドバーを両側につけることはlivedoorでは無理なんですかね？？
欲張りなもので・・・。

Posted by 初心者かな？ at 2004年11月15日 00:34

出来るみたいですよ。一時期ライブドアの共通カテゴリのカスタマイズに、「３カラム化」と言う記事が目立ったことがあります。検索してみてはいかがでしょうか。
私はコンテンツが狭くなりそうなので、ここではやってないんですよ。そのうちネタとして取り上げるかもしれません。

Posted by hammer at 2004年11月15日 01:57

参考にさせて頂きました。ありがとうございましたm( _ _ )m

Posted by 鵺 at 2004年11月27日 00:01

先日はご指導ありがとうございました
またまたサイドバー関連の質問なのです
（本文の関わりになるのかしら？）

サイドバーの幅を狭くしたら間延びした感じになってしまいます
当たり前なんですが(汗)
本文とサイドバーをもう少し中央寄せというか
両サイドの余白を多くしたいのです
よろしくお願いします

http://blog.livedoor.jp/kireinaoneisannano/
テンプレートはblackflameだったと思います

Posted by 友華 at 2005年04月25日 12:52

hammerさん、こんにちは★

content + links = container
widthを全部設定して、
>足し算がうまくいかないのは
隣のブロック要素に対しての余白（margin）を入れてるせいではないでしょうか。
そうすると、ブロック要素以外にも余白を足されるので合計が合わなくなり、サイドバーが落ちてしまうのだと思います。

古い記事へのレス、もし解決済みでしたらごめんなさい。。

Posted by qmi at 2005年07月04日 15:22

qmiさん。はじめまして。

おっしゃるとおりですね。余白の扱いはむずかしいですね＾＾；IEとFireFoxで解釈が少し違うみたいですし。また訂正記事上げておかないといけませんね。

Posted by hammer at 2005年07月05日 00:40

こんばんわ、初めまして。
カスタマイズの練習にサイドバーの位置を変更してみました。
とても解りやすく、なにより『試して旨くいった』というのが自信とやる気に繋がった気がしました。
それで、これまた練習にとトラックバックもさせて頂こうかと思いまして。
今後も色々と参考にさせて頂きたいと思います。

Posted by 涼雪 at 2005年07月27日 03:31

はじめまして。涼雪さん。
参考にしていただいてなによりです＾＾
カスタマイズは常に試行錯誤ですからね。いろいろ試した事を記事にしているのでネタには困りません＾＾

トラックバック、お待ちしています＾＾

Posted by hammer at 2005年07月28日 01:21

コメントお待ちしています。こちらではコメント認証もコメント保留も行っておりません。お気軽にコメントください＾＾