Ｓｅｅｓａａブログさんが提供しているテンプレートの中で
比較的古めの３カラムの物（サイドバーが両側にある物）を使用すると
右サイドバーが落ちてしまうと言う現象があります。
今回はＣＳＳだけでこれを何とか回避する方法をご紹介します＾＾
CSSを以下のように変更していきます。
■コンテナーを追加する。
ＨＴＭＬ記述で言う所のテーブルタグに近い役割を果たします。
この記述をする事により両サイドバーと中央全てがコンテナー内に
収納されるので形の崩れを防いでくれます。
#container{
margin:0px auto 0px auto;
padding:0px;
align:center;
width:○○px;（○○の所はお好きなサイズを指定）
}
■各サイドバーと記事本文のサイズを自分で指定する
#links（右サイドバー）、#links-left（左サイドバー）、
#content（記事本文（中央））のそれぞれに
width:○○px（○○の所はお好きなサイズを指定）と追加して下さい。
すでにwidth:100％など％で数値が入っているテンプレートの場合も
ＰＸに変更して指定しなおして下さい。
【注意点】
１：これらサイズを指定しても指定したサイズより大きなサイズの
写真などを投稿したり、大きなバナーを貼ってしまうと崩れてしまいます。
指定したサイズ内で収まる大きさの物を使用して下さい。
２：人によって使用しているＰＣのモニターサイズが違います。
これは「解像度」という物なのですが、一般的なサイズとされるのは
最近はそれより大きな物が主流となっていますが８００×６００です。
これ以上のサイズで「px」を指定した場合、それ以下のサイズの
モニターで見ると「横スクロールバー」が登場するようになります。
↓情報を色々集めるなら
★人気ブログランキング
|
|
|
|
ＣＳＳ第３回「コンテナ」
第３回、コンテナ編です。 「コンテナってなに？」 という、的確な突っ込みをもらいそうですが（笑）。 コンテナとは別に綿私がそう呼んでいるだけで正確には何ていうんでしょうね？ ようは格納箱と思っ..
第３回、コンテナ編です。 「コンテナってなに？」 という、的確な突っ込みをもらいそうですが（笑）。 コンテナとは別に綿私がそう呼んでいるだけで正確には何ていうんでしょうね？ ようは格納箱と思っ..
思いの袖丈
2005-02-19 04:47
2005-02-19 04:47
スタイルシート ☆その１☆
☆このブログのCSSについて☆ このブログのスタイルシートは、Seesaaブログさんが提供している既成のテンプレートを使っています。しかし、それが殆ど分からないくらいにカスタムしています。 元のテ..
☆このブログのCSSについて☆ このブログのスタイルシートは、Seesaaブログさんが提供している既成のテンプレートを使っています。しかし、それが殆ど分からないくらいにカスタムしています。 元のテ..
★ 魅力的ブログを目指そっと♪ ★
2005-03-07 16:48
2005-03-07 16:48
右サイドバーが落ちるのを防ぎ、左右固定＆中央可変の3カラムにする
3カラムなどのテンプレートを採用した場合に、 特に問題になってくるのが、 右サイドバーが記事の下へ落ちてしまうこと。 これを防ぐには、containerと呼ばれるcssを追加し、 サイトの構成要素（..
3カラムなどのテンプレートを採用した場合に、 特に問題になってくるのが、 右サイドバーが記事の下へ落ちてしまうこと。 これを防ぐには、containerと呼ばれるcssを追加し、 サイトの構成要素（..
んー？（￣ー￣;）
2005-12-01 20:59
2005-12-01 20:59
この前はモヤシコメントありがとう御座いました。
Beryyさん のカスタマイズ記事はとてもタメになります。脱帽です・・・。今回のサイドバーが落ちる現象についても私は理由がわからないから、他のテンプレートを使ってみたらと指南しただけでした・・（汗）
なるほど・・。コンテナーでくくってしまうのですね。勉強になりました（笑）またこの記事を参考に
私の記事も修正を加えなくては（汗）
これからも特にカスタマイズ関係には期待してます！
こんばんは＾＾
もやし、本当はあの根から先が１番栄養がつまってるんですって。
でもやっぱり歯の間とか挟まるから取ってしまうんですが（笑）
ちっちゃいお子さんだったらほんと喉につまらせてしまうかも知れないですもんね！
普通ブログの場合サーバさんがテンプレを作る際に指定して
くれてるはずでサイドバーが落っこちるなんて現象は起き・・（以下自粛（笑））
ええと（笑）
ＨＴＭＬが使えればテーブルタグで画面崩れ防止出来るんですが
ＣＳＳの場合いかがなもんかと色々いじった結果これに至りました（＾＾；
でも他のブラウザで見たら崩れてしまってるかも知れないので
「これで絶対大丈夫！」とも言い切れない所がおはずかしいのですが。。。
もっと勉強して来ます（笑）
アドバイスに習って修正してみました。
ちょっと横幅が広めだけど、落ちなくなったのでは？とおもいます。
今回は、ご指摘いただきありがとうございました〜
お礼にいろいろ押しておきます（笑）
こんにちは〜＾＾
いえいえどういたしまして、しかもお気遣いまで（＞▽＜）
うちがもっと大きなスクリーンにすればいいだけなんですよね（笑）
でもコンテナー入れておけばどこのスクリーンで見ても
とりあえず落ちないはず。。。はずなので（←ちょっと曖昧ｗ）
1週間ほど前から、ブログでアフィリを試みてます。
ブログのカスタマイズに悩んでいて、こちらにたどり着きました。
両サイドを指定してるのですが、どうしても右側が下に落ちてしまい悩んでいたのですが、数値をいじっているうちに解決しました。ありがとうございました！
それから・・・・
お尋ねしてもいいでしょうか？
ウィンドウズ画面の上下にはスクロールバーは動くのですが、左右には動きません。これは、CSSをいじることによって解決できることなのでしょうか？
すみません。初めてなのに、ずうずうしく・・・。
はじめまして＾＾
お役に立ててよかったです♪
サイドバーはこの記事に書いてある数値をいじったり、
コンテナーを追加しても、もし大きな画像などを
使用してしまうと、その時にまた落ちてしまう場合があるので注意して下さい〜＾＾
横スクロールバー。。
tomomamaさんの所にお伺いしますね★
助かりました〜！
#container{
margin:0px auto 0px auto;
padding:0px;
align:center;
width:○○px;（○○の所はお好きなサイズを指定）
}
は、最初どこに入れればいいのかわからなかったのですが、ここかな？？と思うところに入れたら出来ました！そうしたら、なぜかスクロールバーも出てきてびっくり！でもうれしかったです！
ただどうしても
#「links（右サイドバー）、#links-left（左サイドバー）、
#content（記事本文（中央））
それぞれの所にもwidth:○○px・・・・」
という点は、場所がどこにあたるかが分からなくて、何も手を入れていません。とりあえず、支障がないのでこのままです。
すみません。頭がしょぼくて・・・・。
「続き・・・」
のことですが、発見です！
わかりました！本当に、教えていただかなければ分からないことでした。大感謝！です。ありがとうございました。
また、分からないことがあったら聞きにきてもいいでしょうか？
いいえ〜、誰かのお役に立てるのがうれしくてやってるサイトなので
そう言って頂けるだけでも私の方こそ励みになります＾＾
CSSは慣れない時は本当に何かの暗号みたいでちっとも
分からないですよね（＾＾；
私も勉強する前は何の事を言ってるのかさっぱりでした。
私の分かる範囲の事でしたらいくらでも聞いて下さい♪
ありがとうございます！
おかげさまで、なんとか様になったような気がします。
大感謝！です！
今回のことで、CSSって言葉初めて知りました。当然、自分で手を入れるということも。少しずつですけど、覚えていくと自信に繋がるようでなんだか自己満足してしまいます。アフィリよりも、ページを充実させる満足感のほうが大きかったりして！
いえいえ、お役に立てて本当にうれしいです＾＾
はじめのうちは何だか分からなくて困っていた物が
少しづつ使い方が分かったり、自分でいじれるようになると
本当に楽しいですよ〜♪
ページを充実させていく事がアフィリエイトの収入にも
必ず繋がっていくので、大変だとは思いますが頑張って下さい（＾▽＾）/
ついでにコメントっとｗ
ブラウザ間での互換性はＯｐｅｒａとＳａｆａｒｉが特殊みたいで、表示がおかしくなることが多いです。
とくにＯｐｅｒａではバナーがはみ出ていても作り方によってははみ出たまんま落ちないとかできますしｗ
ちょこちょこきてます。
今日のも読んでてためになりました。
（デザインが重要ｗ）
ではでは〜
こんにちは＆トラバありがとうございます＾＾
そうなんですよね、ＯｐｅｒａやＳａｆａｒｉ、最近では
FireFOXなんかで見ると全く違った表示のされ方するんですよね（＾＾；
以前、友人の所のＳａｆａｒｉで自分のサイト見て笑ってしまいました〜。
どうにかしないといけない所なんですが、
完璧に改良出来るほどの知識もないのでIEの人のみで
すみません！状態です（苦笑）
デザインは関係ないなんて最近よく見かけますが
やはりよくよく自分の行動を考えるとデザインで他の記事も
読む・読まないって決めている所ありますし、
やっぱりデザインってすごく大事だと思います＾＾
Seesaaに引っ越すとき思ったのは、
やっぱり強みなのはBerryさんが
Saaseeでブログしているからっていうのも、
ありました。
このカテゴリー記事関連は、たいへん参考にさせていただきました。
ありがとうござます。
いらっしゃいませ〜＾＾
Seesaaブログの事、書いているようで実はたいした事を
書いていないので（笑）そう言って頂けるとすごくうれしいです！
こちらこそありがとうございます♪
私も右カラムが落ちるのが気になっていました。
コンテナ内に入れて固定は出来たのですが、こちらのブログのようにセンタリングしたいと思っています。
align:center;で活きてるのだとは思いますが、何度やっても左寄せに表示されてしまいます。
なにかが間違っているのか、足りないのでしょうか？
注意する点などありますでしょうか？
Seesaaさんのは何故か右サイドバーが元のままだと落ちるんですよね（＾＾；
＞コンテナ内に入れて固定は出来たのですが、こちらのブログのようにセンタリングしたいと思っています。
＞align:center;で活きてるのだとは思いますが、何度やっても左寄せに表示されてしまいます。
サイト全体が左に寄って表示されてしまうという事ですか？
（実はうちのPCのブラウザの解像度が小さくてうちからだとみゅーたろーさんのサイト、
左に寄らずに普通に見えちゃうんです（＾＾；）
試しになんですが、align:center; を、コンテナーの部分のかわりに、CSS１番はじめの body { で始まる所に
追加してみてもらえますか？ これで再構築をかけてみても真ん中に寄らなかったらまた教えて下さい＾＾
昨日はテストブログて試していましたので、見ていただいた私のサイトはいじってませんでした。
今日はこのサイトで追加で教えていただいたことと、ネット情報をあさりながら悪戦苦闘したのですが、やはり左寄せになってしまいます。
どうしたものか・・・です。
bodyにtext-align: center;と入れて、contentと左右linkにtext-align: left;としてみたのですが、ダメでした。
書籍など入手していろいろやってみますので。
本当にありがとうございます。
PS.ブログカスタマイズ本もたくさん出ていますが、Seesaaが載っているものって少ないですね。
ありゃりゃ、ダメですか（＠〜＠；）
＞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さんのカスタマイズの殆ど本には載ってないですね（＾＾；
おそらく小さい会社（？）＆デザインに使用している関数が他ブログと全く違う
独自のものが多いのが原因かも知れないです。本とか出てくれるとほんと楽なんですけどね〜＾＾
私もSeesaaの3カラムのテンプレートを利用させてもらっています。
やはり右のサイドバーが落ちる現象に悩まされましたので、参考までに。
私の場合は単純なことで、アマゾンのアソシエイトリンクを入れた時になりました。
すなわち、長いアドレスのまま記述していれば、画面が横に長くなるため、右のサイドバーが落ちてしまいます。
これを防ぐためには、今はやりの短縮アドレスを使う方法もあるでしょうが、私はタグを記述してアドレスを消し、文字リンクにすることで解決しました。
今後Seesaaブログに関する有意義な情報を期待しています。
はじめまして＆コメントありがとうございます＾＾
＞長いアドレスのまま記述していれば、画面が横に長くなるため、右のサイドバーが落ちてしまいます。
はい。ＵＲＬは自動改行されないようになっていますので、
（改行が入ってしまうととソースがおかしくなりリンクが作動しなくなる）
そのままそのコードを貼るとサイドバーが落ちてしまいます。
特にアマゾンさんなどアフィリエイト関連のリンクアドレスは長いので
文字リンクなどに変えて表示させないと、目も当てられない長さになりますよね（＾＾；
私もSeesaaの3カラムのテンプレートを利用させてもらっていまが、
やはり右のサイドバーが落ちる現象に悩まされています。
#contentの所にコメントを記載した所、落ちが発生してしまいました。
コメントを非表示にすると、右サイドバーに表示されるのですが・・・
いろいろと試してみたもののなかなかうまくいきません。
よろしければアドバイスお願いします。
はじめまして＾＾
＞#contentの所にコメントを記載した所、落ちが発生してしまいました。
＞コメントを非表示にすると、右サイドバーに表示されるのですが・・・
ええと「#contentの所にコメントを記載」というのはどういった状況でしょうか？
こんな感じでコメントを投稿するとサイドバーが落ちてしまうという事ですか？
それともＣＳＳの中に何かを書き込まれたという意味でしょうか？
実際の画面が見れないので、出来れば具体的にどこにどんな感じのものを書きこむと
サイドバーが落ちるかを教えて頂けるとありがたいのですが・・・。
お返事有難うございます。
なんだか、あやふやな質問ですみません・・。
実際に画面を見てもらうのが分かりやすいですね！
CSSの書き込み追加などはしてないです。
すみません初心者すぎて・・・。
お返事遅くなりまして大変申し訳ありません（体調崩して寝込んでおりました・・汗）
サイトを確認させて頂いたのですが、#contentの上の「特典〜」「サポート〜」の２つ、
こちらをtableタグで貼られていらっしゃいますが、そのソースの中に、
<td width="800"> という部分があるかと思います。（この８００という数字は横幅を示しています。）
ＣＳＳを見て頂くと、#contentで始まる部分にもwidth="○○"という記述があると思います。
この数値に対し、↑上記のテーブルの数値の方が大きいとサイドバーが落ちます。
直接yoshiさんの管理画面を見れないので確実な事は言えませんが、１度ためしに、
テーブル部分の<td width="800"> 部分を、 <td> という記述に変えてみてもらえますか？
また、もしかすると、そのテーブルの上に貼られていらっしゃるバナーも大きすぎる可能性があります。
（バナーの横幅がwidth="380" なので、これも同様にＣＳＳ内の#contentに設定されている
数値よりも大きければサイドバーが落ちます）
体調不調みたいでしたが、大丈夫ですか？
アドバイスに習って、ひととうり修正してみましたが、やはり落ちてしまいます。試しに、緑の枠を外してみたところ、落ちは解消されました。
枠の設定に問題があったのでしょうか？
こんにちは＆ご心配下さってありがとうございます。
おかげさまでようやく少しづつ回復して参りました＾＾
この枠設定なのですが、おそらく幅の％に原因がありそうです。
・・・という事でちょと今度はこちらを試して頂きたいのですが・・・
１度今使用されている枠部分を全部削除して下さい。
そして、↓以下のタグに書き換えてみてどうなるか確認下さいますか？
（【ここに文章を】の所にお好きな文をお入れください）
<table cellspacing="2" bgcolor="#8fbc8f"><tr><td width="360" bgcolor="white">ここに文章を。</td></tr></table>
これでもまだ落ちるようでしたら、ＣＳＳをいじって幅を変える方法をお伝えしますので
またいらして頂けますか？ よろしくお願い致しますｍ（＿ ＿）ｍ