2005/06/28
開設当時、このブログは2カラムでした。(左にメイン記事、右にメニュー)
その理由というのは3カラムにすると、デザインが崩れるからでした。
サイドバーや、ひどいときにはメインの記事までが下に落ちてしまい、
とんでもないことになってました。


それを何とかしようと、あれこれ試してみて、ようやく今の形ができあがりました。
今回は、自分なりの落ちない対策を述べていきたいと思います。

まず最初に、

 デザイン ⇒ スタイルシート ⇒ (使用するスタイルシート)

を選択します。

初めて見る人は思わず身を引いてしまうような英語の羅列が表示されます。
でも安心してください。
最低限これから述べる部分だけ修正すれば大丈夫のはずです。

1.ブログ全体の大きさを決める
文字の羅列の上の方に、containerと書かれていると思います。
スタイルシートによっては、ない場合もあります。
その場合は追加してください。
#container{
margin:0px; 余白
width:800px; 全体の大きさ
background:#FFF; 背景色
text-align:left; 文字の位置
}

実際もう少し項目があると思いますが、widthの部分は必ず設定してください。

2.メインの大きさを決める
次にcontentと書いてある部分を探してください。
#content{
margin:0px 15px 0px 15px; 余白(上 右 下 左)
float:left; 記事の位置
width:400px; 大きさ
background:#FFCCCC; 背景色
}

3.左サイドバーの大きさを決める
#links-left{
margin: 0px;
width: 120px;
float: left;
}

4.右サイドバーの大きさを決める
#links{
margin: 0px;
width:140px;
float:left;

}

それぞれに赤で示しているように、floatをleftに設定した方がいいようです。

この4つを設定すれば大丈夫のはずです。

メイン、左、右を合計してcontainerの大きさに収まればいいのですが、
ここで注意しなければならないのが余白です。

marginやpaddingの値は余白や空白を表しているのですが、これもきちんと計算しなければなりません。
計算するのが面倒な場合は(現にわたしがそうなのですが……)、合計の値をcontainerの大きさよりも少し小さめに設定するのがいいと思います。
少し空白が大きくなるかもしれませんが、3カラムで表示されるようになるはずです。
デザインにこだわりたい場合はこの余白の大きさを調整してみてください。

それから大きさには、%とpxの2種類の設定の仕方があります。
%は画面全体に対する割合で、pxは絶対的な値です。
経験上、%の場合、ブラウザを小さくしてみると、サイドバーが下に落ちること多いように感じました。
なので、このサイトは全てpxで設定してあります。恐らくブラウザを小さくしても表示は崩れないはずです。そこら辺は好みで使い分けてもいいかもしれません。

全ての設定が終わり、プレビューを見て、大丈夫だと思ったら保存し、再構築してください。

ちなみにわたしの場合、何かいじってはプレビューを繰り返し、どれが何を表しているのか自力で確認してみました。もしかすると上の説明も、おかしなところがあるかもしれませんが、ご了承ください。

広告を読むだけで、数十万以上の極秘攻略情報がすべて無料に!
この記事へのコメント
ご祝辞、ありがとうございます。
画面を小さくすると、画面がくずれるんですよねぇ。
ここまで綿密に設計しないとだめなんですね。大変です。
Posted by トーネ at 05/06/28 19:20
記事の通り4箇所を修正すれば大丈夫だと思います。
まだ手探り状態ながら、いろいろわかってきました。
Posted by サガシヤ at 05/06/28 21:54
サガシヤさん
コメントありがとうございます!

カスタマイズ、とても参考になります。
3カラムとか意味がようやくわかりました。(^^ゞ
2カラムのものを3カラムに出来るとは
驚きですね。
変えられない物と思ってましたから。

ちょっと難しそうですけど、2カラムの
ものを変えるとすれば、
是非、参考にさせていただきたいです!
Posted by micchy at 05/06/28 22:37
>micchyさん
参考になったようでよかったです。
自分もかなり苦労した記憶があるので、そういう人は少なくないのではと思い、記事にしてみました。
Posted by サガシヤ at 05/06/29 08:37
>サガシヤさん
初めまして!コメントありがとうございます〜
早速試してみたところ
『崩れなくなった!!!』
ホント助かりました。

サガシヤさんのページにはまだまだ
試してみたい情報があったのでまたお邪魔しますね。

         はるでした。
Posted by はる at 05/07/06 15:26
>はるさん
崩れなくなりましたか。お役に立ててうれしいです。
わたしも最初はこれにずいぶん苦労させられました。
ぜひぜひ他の記事も参考になさってください。
Posted by サガシヤ at 05/07/06 17:12
サガシヤさん、こんにちわ♪

記事を参考に行ってみました。
800pxにされているのは他のパソコン(低い解像度)でも見れるようにとの配慮ですよね?
迷ったのですがあこは1000pxにしてみました。
また、
#links-reft{
行が見当たらないのですが、追記した方がいいのでしょうか?
それと
#links-left{
で左側が変わったように思いましたが・・・
違ってたらごめんなさい。

でもおかげでどうにか落ちなくなりました。
いつもホントにありがとうございます。
Posted by あこ at 05/07/21 18:27
>あこさん
それもありますが、お気に入りを表示しながら閲覧していると、見えなくなるので、それを防ぐためでもあります。

#links-reftは明らかに記述間違いですね。
すみません。

普通は、
#links-leftが左、
#linksが右になるはずです。

記事の方は訂正しておきました。
Posted by サガシヤ at 05/07/21 22:12
サガシヤさんいつもありがとうございます。
記事を参考に再度修正してみました。
これからも宜しくお願いします。

コメントあれだったら削除してもらってもかまいませんので・・・

また勉強しにきますね。
Posted by あこ at 05/07/23 00:12
>あこさん
今、サイトの方にいってみて、ブラウザを小さくしてみましたが、大丈夫でしたね。これで落ちることもないと思います。

コメントはせっかくなので残しておくことにしますね(^^
Posted by サガシヤ at 05/07/23 00:42
こんにちは。はじめまして。

私は右サイドバーのスタイルシートで
2カラムから3カラムに変えたくてこの記事を読みながら試してみたのですが
プレビューで左サイドバーが現れませんでした。

再構築しないと現れないってことはないですよね?
再構築を試してみる勇気はありませんでした^^;
Posted by ジャっちゃん at 05/08/21 20:59
デザイン変更の場合、再構築しないと反映されないと思います。

2カラムのテンプレートの場合、もう片方のサイドバーの設定自体がないので、新たにその部分を書き足さなければなりません。

それからテンプレートに画像が用いられている場合、サイズが固定されていたりするので、それにより合計が大きくなってしまい、サイドバーが下に落ちてしまうということも考えられます。

再構築する場合は、メモ帳などに、スタイルシートを保存しておけば、おかしくなってしまった場合もやり直せるので、バックアップをとることもお勧めします。
Posted by サガシヤ at 05/08/21 21:38
早速のお返事ありがとうございます!

あっというまにテストで3カラムにしてしまうなんて!
すごいです!!

背景の色を消したりとまだいろいろしなければ
ならないんですね・・・><

まだ勉強不足の私には早すぎたのかもしれません。

親切な回答ありがとうございました!!
Posted by ジャっちゃん at 05/08/22 00:02
>ジャっちゃん
背景の構成がよくわからなくて、少し手間取ってしまいました。
はじめてやる人には少し難しいかもしれませんね。
Posted by サガシヤ at 05/08/23 22:09
グッチ
Posted by クリスチャンルブタン通販 at 13/07/17 15:21
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/4694099

勉強になるなぁ
Excerpt: 何もわからずに始めたブログですが、本を読んでいるだけじゃ わからない事が沢山ありますよねぇ。こんな時、先輩方に教えて もらえるのはすんごくありがたいもんです! 昨日初めてコメントというものを頂きま..
Weblog: ぐうたら主婦の小遣い稼ぎ
Tracked: 05/07/07 09:35

ブログカスタマイズ「ネットで本当にもうかるの?」
Excerpt: ネットで本当にもうかるの? サガシヤさんが運営しているサイトで、seesaaBLOGを使っている方にはとっても役立つブログカスタマイズ方法を公開されています。 そこで、ボクもずっとほったらかしてい..
Weblog: アフィリエイト★絶対役に立つことしか書きません!
Tracked: 05/07/28 03:15
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。