Seesaaブログさんが提供しているテンプレートの中で
比較的古めの3カラムの物(サイドバーが両側にある物)を使用すると
右サイドバーが落ちてしまうと言う現象があります。
今回はCSSだけでこれを何とか回避する方法をご紹介します^^

CSSを以下のように変更していきます。

■コンテナーを追加する。
HTML記述で言う所のテーブルタグに近い役割を果たします。
この記述をする事により両サイドバーと中央全てがコンテナー内に
収納されるので形の崩れを防いでくれます。
#container{
margin:0px auto 0px auto;
padding:0px;
align:center;
width:○○px;(○○の所はお好きなサイズを指定)
}


■各サイドバーと記事本文のサイズを自分で指定する
#links(右サイドバー)#links-left(左サイドバー)
#content(記事本文(中央))のそれぞれに
width:○○px(○○の所はお好きなサイズを指定)と追加して下さい。
すでにwidth:100%など%で数値が入っているテンプレートの場合も
PXに変更して指定しなおして下さい。

【注意点】
1:これらサイズを指定しても指定したサイズより大きなサイズの
  写真などを投稿したり、大きなバナーを貼ってしまうと崩れてしまいます。
  指定したサイズ内で収まる大きさの物を使用して下さい。

2:人によって使用しているPCのモニターサイズが違います。
  これは「解像度」という物なのですが、一般的なサイズとされるのは
  最近はそれより大きな物が主流となっていますが800×600です。
  これ以上のサイズで「px」を指定した場合、それ以下のサイズの
  モニターで見ると「横スクロールバー」が登場するようになります。

↓情報を色々集めるなら
人気ブログランキング


2004年12月25日




■ コメントはこちらからお願いします ■  ※宣伝・誘導と判断されるものは削除します。
お名前:

メールアドレス:

ホームページアドレス:

コメント:

■ コメントありがとうございました ■
こんばんは
この前はモヤシコメントありがとう御座いました。

Beryyさん のカスタマイズ記事はとてもタメになります。脱帽です・・・。今回のサイドバーが落ちる現象についても私は理由がわからないから、他のテンプレートを使ってみたらと指南しただけでした・・(汗)
なるほど・・。コンテナーでくくってしまうのですね。勉強になりました(笑)またこの記事を参考に
私の記事も修正を加えなくては(汗)
これからも特にカスタマイズ関係には期待してます!
Posted by ダイ at 2004年12月27日 00:51
>ダイさん
こんばんは^^
もやし、本当はあの根から先が1番栄養がつまってるんですって。
でもやっぱり歯の間とか挟まるから取ってしまうんですが(笑)
ちっちゃいお子さんだったらほんと喉につまらせてしまうかも知れないですもんね!

普通ブログの場合サーバさんがテンプレを作る際に指定して
くれてるはずでサイドバーが落っこちるなんて現象は起き・・(以下自粛(笑))
ええと(笑)
HTMLが使えればテーブルタグで画面崩れ防止出来るんですが
CSSの場合いかがなもんかと色々いじった結果これに至りました(^^;
でも他のブラウザで見たら崩れてしまってるかも知れないので
「これで絶対大丈夫!」とも言い切れない所がおはずかしいのですが。。。
もっと勉強して来ます(笑)
Posted by Berry@管理人 at 2004年12月27日 01:37
Berryさんこんにちわ。

アドバイスに習って修正してみました。
ちょっと横幅が広めだけど、落ちなくなったのでは?とおもいます。

今回は、ご指摘いただきありがとうございました〜
お礼にいろいろ押しておきます(笑)
Posted by afl at 2005年01月02日 12:47
>aflさん
こんにちは〜^^
いえいえどういたしまして、しかもお気遣いまで(>▽<)

うちがもっと大きなスクリーンにすればいいだけなんですよね(笑)
でもコンテナー入れておけばどこのスクリーンで見ても
とりあえず落ちないはず。。。はずなので(←ちょっと曖昧w)
Posted by Berry@管理人 at 2005年01月04日 13:01
はじめまして!
1週間ほど前から、ブログでアフィリを試みてます。
ブログのカスタマイズに悩んでいて、こちらにたどり着きました。
両サイドを指定してるのですが、どうしても右側が下に落ちてしまい悩んでいたのですが、数値をいじっているうちに解決しました。ありがとうございました!

それから・・・・
お尋ねしてもいいでしょうか?
ウィンドウズ画面の上下にはスクロールバーは動くのですが、左右には動きません。これは、CSSをいじることによって解決できることなのでしょうか?
すみません。初めてなのに、ずうずうしく・・・。

Posted by tomomama at 2005年01月17日 15:55
>tomomamaさん
はじめまして^^
お役に立ててよかったです♪
サイドバーはこの記事に書いてある数値をいじったり、
コンテナーを追加しても、もし大きな画像などを
使用してしまうと、その時にまた落ちてしまう場合があるので注意して下さい〜^^

横スクロールバー。。
tomomamaさんの所にお伺いしますね★
Posted by Berry@管理人 at 2005年01月17日 17:05
ご丁寧にありがとうございました!
助かりました〜!
#container{
margin:0px auto 0px auto;
padding:0px;
align:center;
width:○○px;(○○の所はお好きなサイズを指定)
}
は、最初どこに入れればいいのかわからなかったのですが、ここかな??と思うところに入れたら出来ました!そうしたら、なぜかスクロールバーも出てきてびっくり!でもうれしかったです!

ただどうしても
#「links(右サイドバー)、#links-left(左サイドバー)、
#content(記事本文(中央))
それぞれの所にもwidth:○○px・・・・」
という点は、場所がどこにあたるかが分からなくて、何も手を入れていません。とりあえず、支障がないのでこのままです。
すみません。頭がしょぼくて・・・・。

「続き・・・」
のことですが、発見です!
わかりました!本当に、教えていただかなければ分からないことでした。大感謝!です。ありがとうございました。
また、分からないことがあったら聞きにきてもいいでしょうか?
Posted by at 2005年01月17日 19:15
>tomomamaさん
いいえ〜、誰かのお役に立てるのがうれしくてやってるサイトなので
そう言って頂けるだけでも私の方こそ励みになります^^

CSSは慣れない時は本当に何かの暗号みたいでちっとも
分からないですよね(^^;
私も勉強する前は何の事を言ってるのかさっぱりでした。

私の分かる範囲の事でしたらいくらでも聞いて下さい♪
Posted by Berry@管理人 at 2005年01月17日 21:34
手取り、足取り・・・・・
ありがとうございます!
おかげさまで、なんとか様になったような気がします。
大感謝!です!
今回のことで、CSSって言葉初めて知りました。当然、自分で手を入れるということも。少しずつですけど、覚えていくと自信に繋がるようでなんだか自己満足してしまいます。アフィリよりも、ページを充実させる満足感のほうが大きかったりして!
Posted by tomomama at 2005年01月18日 00:51
>tomomamaさん
いえいえ、お役に立てて本当にうれしいです^^
はじめのうちは何だか分からなくて困っていた物が
少しづつ使い方が分かったり、自分でいじれるようになると
本当に楽しいですよ〜♪
ページを充実させていく事がアフィリエイトの収入にも
必ず繋がっていくので、大変だとは思いますが頑張って下さい(^▽^)/
Posted by Berry@管理人 at 2005年01月18日 04:27
TB打たせていただきました。

ついでにコメントっとw

ブラウザ間での互換性はOperaとSafariが特殊みたいで、表示がおかしくなることが多いです。

とくにOperaではバナーがはみ出ていても作り方によってははみ出たまんま落ちないとかできますしw

ちょこちょこきてます。
今日のも読んでてためになりました。
(デザインが重要w)

ではでは〜
Posted by *マーキュ* at 2005年02月19日 04:56
>*マーキュ*さん
こんにちは&トラバありがとうございます^^
そうなんですよね、OperaやSafari、最近では
FireFOXなんかで見ると全く違った表示のされ方するんですよね(^^;

以前、友人の所のSafariで自分のサイト見て笑ってしまいました〜。
どうにかしないといけない所なんですが、
完璧に改良出来るほどの知識もないのでIEの人のみで
すみません!状態です(苦笑)

デザインは関係ないなんて最近よく見かけますが
やはりよくよく自分の行動を考えるとデザインで他の記事も
読む・読まないって決めている所ありますし、
やっぱりデザインってすごく大事だと思います^^
Posted by Berry@管理人 at 2005年02月19日 12:50
相変わらずお世話になってます。

Seesaaに引っ越すとき思ったのは、
やっぱり強みなのはBerryさんが
Saaseeでブログしているからっていうのも、
ありました。

このカテゴリー記事関連は、たいへん参考にさせていただきました。

ありがとうござます。
Posted by ふれふぇに at 2005年03月07日 16:58
>ふれふぇにさん
いらっしゃいませ〜^^

Seesaaブログの事、書いているようで実はたいした事を
書いていないので(笑)そう言って頂けるとすごくうれしいです!
こちらこそありがとうございます♪
Posted by Berry@管理人 at 2005年03月07日 20:31
とても勉強になります。
私も右カラムが落ちるのが気になっていました。

コンテナ内に入れて固定は出来たのですが、こちらのブログのようにセンタリングしたいと思っています。
align:center;で活きてるのだとは思いますが、何度やっても左寄せに表示されてしまいます。
なにかが間違っているのか、足りないのでしょうか?
注意する点などありますでしょうか?
Posted by みゅーたろー at 2005年05月10日 04:00
>みゅーたろーさん

Seesaaさんのは何故か右サイドバーが元のままだと落ちるんですよね(^^;

>コンテナ内に入れて固定は出来たのですが、こちらのブログのようにセンタリングしたいと思っています。
>align:center;で活きてるのだとは思いますが、何度やっても左寄せに表示されてしまいます。

サイト全体が左に寄って表示されてしまうという事ですか?
(実はうちのPCのブラウザの解像度が小さくてうちからだとみゅーたろーさんのサイト、
左に寄らずに普通に見えちゃうんです(^^;)

試しになんですが、align:center; を、コンテナーの部分のかわりに、CSS1番はじめの body { で始まる所に
追加してみてもらえますか? これで再構築をかけてみても真ん中に寄らなかったらまた教えて下さい^^
Posted by Berry@管理人 at 2005年05月10日 12:13
Berryさん、すみません。
昨日はテストブログて試していましたので、見ていただいた私のサイトはいじってませんでした。
今日はこのサイトで追加で教えていただいたことと、ネット情報をあさりながら悪戦苦闘したのですが、やはり左寄せになってしまいます。
どうしたものか・・・です。
bodyにtext-align: center;と入れて、contentと左右linkにtext-align: left;としてみたのですが、ダメでした。
書籍など入手していろいろやってみますので。
本当にありがとうございます。

PS.ブログカスタマイズ本もたくさん出ていますが、Seesaaが載っているものって少ないですね。
Posted by みゅーたろー at 2005年05月11日 02:13
>みゅーたろーさん

ありゃりゃ、ダメですか(@〜@;)

>bodyにtext-align:center;と入れて、contentと左右linkにtext-align: left;としてみたのですが、ダメでした。

試しにお時間のある時にでも

bodyにtext-align:center; contentには入れずに替わりにfloat:left; 左右linkにtext-align:left;
それから #bannerにtext-align:left; .blogbodyにtext-align:left; 

ってな感じで入れてもらってみても良いですか?
私の所はこれで真ん中になっているのですが、元のテンプレートによっても
他に変えなきゃいけない部分があったりする場合もあるのでうまくいかなかったらごめんなさい(><)
すみません、お役に立てず・・・

Seesaaさんのカスタマイズの殆ど本には載ってないですね(^^;
おそらく小さい会社(?)&デザインに使用している関数が他ブログと全く違う
独自のものが多いのが原因かも知れないです。本とか出てくれるとほんと楽なんですけどね〜^^
Posted by Berry@管理人 at 2005年05月11日 12:19
 初めまして。
 私もSeesaaの3カラムのテンプレートを利用させてもらっています。
 やはり右のサイドバーが落ちる現象に悩まされましたので、参考までに。
 私の場合は単純なことで、アマゾンのアソシエイトリンクを入れた時になりました。
 すなわち、長いアドレスのまま記述していれば、画面が横に長くなるため、右のサイドバーが落ちてしまいます。
 これを防ぐためには、今はやりの短縮アドレスを使う方法もあるでしょうが、私はタグを記述してアドレスを消し、文字リンクにすることで解決しました。
 今後Seesaaブログに関する有意義な情報を期待しています。
Posted by なぜ学 at 2005年11月03日 23:21
>なぜ学さん

はじめまして&コメントありがとうございます^^

>長いアドレスのまま記述していれば、画面が横に長くなるため、右のサイドバーが落ちてしまいます。

はい。URLは自動改行されないようになっていますので、
(改行が入ってしまうととソースがおかしくなりリンクが作動しなくなる)
そのままそのコードを貼るとサイドバーが落ちてしまいます。

特にアマゾンさんなどアフィリエイト関連のリンクアドレスは長いので
文字リンクなどに変えて表示させないと、目も当てられない長さになりますよね(^^;
Posted by Berry@管理人 at 2005年11月05日 16:43
初めまして。現在ブログ準備中です。
私もSeesaaの3カラムのテンプレートを利用させてもらっていまが、
やはり右のサイドバーが落ちる現象に悩まされています。

#contentの所にコメントを記載した所、落ちが発生してしまいました。
コメントを非表示にすると、右サイドバーに表示されるのですが・・・
いろいろと試してみたもののなかなかうまくいきません。

よろしければアドバイスお願いします。



Posted by yoshi at 2005年11月10日 04:13
>yoshiさん

はじめまして^^

>#contentの所にコメントを記載した所、落ちが発生してしまいました。
>コメントを非表示にすると、右サイドバーに表示されるのですが・・・

ええと「#contentの所にコメントを記載」というのはどういった状況でしょうか?
こんな感じでコメントを投稿するとサイドバーが落ちてしまうという事ですか?
それともCSSの中に何かを書き込まれたという意味でしょうか?

実際の画面が見れないので、出来れば具体的にどこにどんな感じのものを書きこむと
サイドバーが落ちるかを教えて頂けるとありがたいのですが・・・。
Posted by Berry@管理人 at 2005年11月11日 05:26
こんにちは
お返事有難うございます。
なんだか、あやふやな質問ですみません・・。
実際に画面を見てもらうのが分かりやすいですね!
CSSの書き込み追加などはしてないです。

すみません初心者すぎて・・・。
Posted by yoshi at 2005年11月11日 11:20
>yoshiさん

お返事遅くなりまして大変申し訳ありません(体調崩して寝込んでおりました・・汗)

サイトを確認させて頂いたのですが、#contentの上の「特典〜」「サポート〜」の2つ、
こちらをtableタグで貼られていらっしゃいますが、そのソースの中に、
<td width="800"> という部分があるかと思います。(この800という数字は横幅を示しています。)

CSSを見て頂くと、#contentで始まる部分にもwidth="○○"という記述があると思います。
この数値に対し、↑上記のテーブルの数値の方が大きいとサイドバーが落ちます。

直接yoshiさんの管理画面を見れないので確実な事は言えませんが、1度ためしに、
テーブル部分の<td width="800"> 部分を、 <td> という記述に変えてみてもらえますか?

また、もしかすると、そのテーブルの上に貼られていらっしゃるバナーも大きすぎる可能性があります。
(バナーの横幅がwidth="380" なので、これも同様にCSS内の#contentに設定されている
数値よりも大きければサイドバーが落ちます)
Posted by Berry@管理人 at 2005年11月14日 15:48
berryさんこんにちわ。
体調不調みたいでしたが、大丈夫ですか?

アドバイスに習って、ひととうり修正してみましたが、やはり落ちてしまいます。試しに、緑の枠を外してみたところ、落ちは解消されました。
枠の設定に問題があったのでしょうか?
Posted by yoshi at 2005年11月15日 14:23
>yoshiさん

こんにちは&ご心配下さってありがとうございます。
おかげさまでようやく少しづつ回復して参りました^^

この枠設定なのですが、おそらく幅の%に原因がありそうです。
・・・という事でちょと今度はこちらを試して頂きたいのですが・・・

1度今使用されている枠部分を全部削除して下さい。
そして、↓以下のタグに書き換えてみてどうなるか確認下さいますか?
(【ここに文章を】の所にお好きな文をお入れください)

<table cellspacing="2" bgcolor="#8fbc8f"><tr><td width="360" bgcolor="white">ここに文章を。</td></tr></table>

これでもまだ落ちるようでしたら、CSSをいじって幅を変える方法をお伝えしますので
またいらして頂けますか? よろしくお願い致しますm(_ _)m
Posted by Berry@管理人 at 2005年11月17日 06:02

CSS第3回「コンテナ」
第3回、コンテナ編です。 「コンテナってなに?」 という、的確な突っ込みをもらいそうですが(笑)。 コンテナとは別に綿私がそう呼んでいるだけで正確には何ていうんでしょうね? ようは格納箱と思っ..
思いの袖丈
2005-02-19 04:47
スタイルシート ☆その1☆
☆このブログのCSSについて☆ このブログのスタイルシートは、Seesaaブログさんが提供している既成のテンプレートを使っています。しかし、それが殆ど分からないくらいにカスタムしています。 元のテ..
★ 魅力的ブログを目指そっと♪ ★
2005-03-07 16:48
右サイドバーが落ちるのを防ぎ、左右固定&中央可変の3カラムにする
3カラムなどのテンプレートを採用した場合に、 特に問題になってくるのが、 右サイドバーが記事の下へ落ちてしまうこと。 これを防ぐには、containerと呼ばれるcssを追加し、 サイトの構成要素(..
んー?( ̄ー ̄;)
2005-12-01 20:59
アクセス解析 無料レンタル 無料レンタル