Top＞
スタイルシート(ＣＳＳ)＞content(メイン)部分がサイドバーの下に落ちるのを防止する方法
■content(メイン)部分がサイドバーの下に落ちるのを防止する方法
スポンサードリンク
今回は､ブラウザ(IEなど)の画面を小さくした場合に､メイン部分がサイドバーの下に落ちるのを防ぐ方法について説明していきます。
古いテンプレートを使っている方は､このような現象がしばしば見られます。
私のテンプレートは､もともとシンプルグリーンを使っておりましたが､やはりメインがサイドバーの下に落ちてしまうタイプでした。
CSSの編集をするのが、めんどくさい人は､最近のテンプレートを使う事で、この現象は､回避できると思います。
色々なテンプレートを試してみてください。
デザインは､気に入っているんだけどなって人は､これからの説明を参考にCSSを編集されてください。
今回は､2ペイン(左サイドバー＋メイン)の場合です。
3ペイン(左サイドバー＋メイン＋右サイドバー)の場合は､今後説明します。
Seesaaブログ
にはもう登録した？
分からない部分がありましたら、遠慮なく言ってください。
但し､何度も言っておりますが､Seesaaカスタマイズに関しては､自己責任でお願いします。
スタイルシートの編集をするときは、メモ帳などにバックアップを取っておきましょう。
これは、CSS(スタイルシート)を編集して行います。
オフィシャルページで軽く触れてあります。
まずは、CSSを編集してページの基本設定をしてみよう！を見てください。
そして、その中の２.container(すべての要素を入れる箱)の説明に注目してください。
この値を増やせばもっと幅が広くなりますが､ブラウザでお気に入りをサイドバーにだして、閲覧している方には、はみ出して表示されてしまうので､できるだけ800px以内で設定するのがいいと思います。
container自体が､CSSにない人は､追加してください。
そして、追加したら､上の赤字にしているように編集してください。
３つの追加完了しましたか？
それでは､次の作業に移ります。
５.links-left(左サイドバー)の設定です。
widthは、pxで設定しても大丈夫です。
そして、最後に４.content(メイン部分)の設定です。
この3つの設定が、完了すれば、ブラウザの画面を小さくしてもメイン部分がサイドバーの下に落ちるのは､防げると思います。
CSSを編集した感想をお聞きたいと思います。
コメントよろしくお願いします。
古いテンプレートを使っている方は､このような現象がしばしば見られます。
私のテンプレートは､もともとシンプルグリーンを使っておりましたが､やはりメインがサイドバーの下に落ちてしまうタイプでした。
CSSの編集をするのが、めんどくさい人は､最近のテンプレートを使う事で、この現象は､回避できると思います。
色々なテンプレートを試してみてください。
デザインは､気に入っているんだけどなって人は､これからの説明を参考にCSSを編集されてください。
今回は､2ペイン(左サイドバー＋メイン)の場合です。
3ペイン(左サイドバー＋メイン＋右サイドバー)の場合は､今後説明します。
にはもう登録した？分からない部分がありましたら、遠慮なく言ってください。
但し､何度も言っておりますが､Seesaaカスタマイズに関しては､自己責任でお願いします。
スタイルシートの編集をするときは、メモ帳などにバックアップを取っておきましょう。
これは、CSS(スタイルシート)を編集して行います。
オフィシャルページで軽く触れてあります。
まずは、CSSを編集してページの基本設定をしてみよう！を見てください。
そして、その中の２.container(すべての要素を入れる箱)の説明に注目してください。
#container {widthは、幅です。
width:800px;
margin:0px;
padding: 0px;
background:#FFC;
text-align:left;
}
この値を増やせばもっと幅が広くなりますが､ブラウザでお気に入りをサイドバーにだして、閲覧している方には、はみ出して表示されてしまうので､できるだけ800px以内で設定するのがいいと思います。
container自体が､CSSにない人は､追加してください。
そして、追加したら､上の赤字にしているように編集してください。
３つの追加完了しましたか？
それでは､次の作業に移ります。
５.links-left(左サイドバー)の設定です。
#links-left {赤字にしてあるように､widhtとfloatの設定をしっかりしてください。
font-weight:bold;
width:25%;
float:left;
margin-right: 5px;
margin-top:0px;
}
widthは、pxで設定しても大丈夫です。
そして、最後に４.content(メイン部分)の設定です。
#content {先ほどのサイドバーの設定と同じように､widhtとfloatの設定をしっかりしてください。
margin-bottom:30px;
margin-top:0px;
margin-left:5px;
margin-right: 0px;
float:left;
width:73%;
}
この3つの設定が、完了すれば、ブラウザの画面を小さくしてもメイン部分がサイドバーの下に落ちるのは､防げると思います。
CSSを編集した感想をお聞きたいと思います。
コメントよろしくお願いします。
ブログは読むだけでも楽しいですが、自分で作るともっと楽しくなること間違いなし。登録はこちらから簡単にできます→→
Seesaaブログ
最後まで、読んで頂いてありがとうございます。お気に入りに追加してくれたら嬉しいです。
→→
RSSをRSSリーダーに登録しても便利だと思います。
スポンサードリンク
最後まで、読んで頂いてありがとうございます。お気に入りに追加してくれたら嬉しいです。
→→
RSSをRSSリーダーに登録しても便利だと思います。
| ■人気記事ベスト５ | |
この記事へのコメント
はじめまして、蜜と申します。
サイドバーが落ちてしまって、困っていましたが
ケンジさんのお陰で助かりました。
ありがとうございます。
サイドバーが落ちてしまって、困っていましたが
ケンジさんのお陰で助かりました。
ありがとうございます。
Posted by 蜜 at 2005年05月12日 02:07
すみません、トラックバックを間違えてしまいました。
消していただけるとうれしいです。
すみませんでした…
消していただけるとうれしいです。
すみませんでした…
Posted by 蜜 at 2005年05月12日 02:22
はじめまして、蜜さん。
サイドバーが落ちるの解決してよかったですね。
トラックバックは、問題ないようですが､
どこか間違っていますか?
サイドバーが落ちるの解決してよかったですね。
トラックバックは、問題ないようですが､
どこか間違っていますか?
Posted by Seesaa大好きケンジ(管理人) at 2005年05月12日 09:43
このままで問題ないのですね。
よく分からなくって…スミマセン。
ちょっと勉強しようと思います。
ありがとうございました。
よく分からなくって…スミマセン。
ちょっと勉強しようと思います。
ありがとうございました。
Posted by 蜜 at 2005年05月15日 14:23
こんにちは、蜜さん。
最初は､みんなわからなくて当然ですよ(^_^)
今後ともよろしくお願いします。
最初は､みんなわからなくて当然ですよ(^_^)
今後ともよろしくお願いします。
Posted by Seesaa大好きケンジ(管理人) at 2005年05月16日 12:21
おはようございます。
初めまして。
ブログデザインを変更したいと思い、いろいろ試しているところです。
更新はまだ先になると思うのですが、参考にさせていただきました。
ありがとうございます。
初めまして。
ブログデザインを変更したいと思い、いろいろ試しているところです。
更新はまだ先になると思うのですが、参考にさせていただきました。
ありがとうございます。
Posted by びぃ at 2005年10月28日 08:59
はじめまして。
ちょっとわからないことがあって、調べていたところ、こちらにたどり着きました。
私のブログで、
「記事検索すると、右サイドバーが消える」
という現象がおこっています。
いろいろ調べてみましたが、原因がわからなかったので質問させていただきました。
もし、お時間ありましたら、一度見てもらってはいただけませんでしょうか？
お忙しいところ申し訳ありません。
よろしくお願いします。
ちょっとわからないことがあって、調べていたところ、こちらにたどり着きました。
私のブログで、
「記事検索すると、右サイドバーが消える」
という現象がおこっています。
いろいろ調べてみましたが、原因がわからなかったので質問させていただきました。
もし、お時間ありましたら、一度見てもらってはいただけませんでしょうか？
お忙しいところ申し訳ありません。
よろしくお願いします。
Posted by crabe at 2006年01月29日 17:25
はじめまして ちあきといいます。
seesaaのブログでメインが左サイドの下に落ちてしまう現象がおき、解決方法を調べていたらこちらに辿り着きました。
記事は記載されていた通り表示の設定を増やすことで解決できました。
ありがとうございました。
ただ、ブログを見て頂ければわかると思いますが
なぜか 左のサイドバーにあるカレンダーの表示がおかしくて、左寄せができません。
スタイルシートのカレンダーに関するところに
text-align:left; を入れては見て 入れては見てとしても変化が現れません。
もしかしたらlinks-left の幅を変えたらできるのかな？とも思い
試してみたら カレンダー以外のコンテンツが切れてしまい。
カレンダーは変化が現れませんでした。
どのようにしたら直るのか
もしおわかりでしたら教えていただけませんでしょうか？
よろしくお願いします。
seesaaのブログでメインが左サイドの下に落ちてしまう現象がおき、解決方法を調べていたらこちらに辿り着きました。
記事は記載されていた通り表示の設定を増やすことで解決できました。
ありがとうございました。
ただ、ブログを見て頂ければわかると思いますが
なぜか 左のサイドバーにあるカレンダーの表示がおかしくて、左寄せができません。
スタイルシートのカレンダーに関するところに
text-align:left; を入れては見て 入れては見てとしても変化が現れません。
もしかしたらlinks-left の幅を変えたらできるのかな？とも思い
試してみたら カレンダー以外のコンテンツが切れてしまい。
カレンダーは変化が現れませんでした。
どのようにしたら直るのか
もしおわかりでしたら教えていただけませんでしょうか？
よろしくお願いします。
Posted by ちあき at 2006年11月01日 18:51
こんにちは。右サイドバーが下におちてしまい、調べているうちにこちらへ辿りつきました。
お蔭様で、解決することができました。
数日間 足踏み状態でしたので、本当に嬉しいです。
お気にに入れさせていただきました。
また勉強にまいります。
応援させてください。
ありがとうございました。
お蔭様で、解決することができました。
数日間 足踏み状態でしたので、本当に嬉しいです。
お気にに入れさせていただきました。
また勉強にまいります。
応援させてください。
ありがとうございました。
Posted by ララサクラ＠金持ち母さんになる方法 at 2006年12月14日 01:02
はじめまして。
とても参考になり、助かりました。
ありがとうございました。
とても参考になり、助かりました。
ありがとうございました。
Posted by yumeji at 2007年07月08日 18:33
はじめまして、yumejiさん
コメント、トラックバックありがとうございます。
これからもよろしくお願いします。
コメント、トラックバックありがとうございます。
これからもよろしくお願いします。
Posted by Seesaa大好きケンジ（管理人） at 2007年07月08日 20:08
はじめまして。あいくと申します。
右サイドバーが下に落ちていて、いろいろ検索している内にこちらにたどり着きました。
ブログを最近始めたばかりで全くの素人です。
A8ネットにてブログを作成しました。
右サイドバーの訂正方法のアドバイスをお願いいたします。
こちらの記事を参考にしましたが変わらず。
A8のブログデザインをそのまま仕様しているのにも関わらず、なぜうまく表示されないのでしょうか？
記事ページの画像サイズ・サムネイルももう少し大きくしたいのですがうまくいかず。
たくさん調べてみてもよく分からず、せっかくアフィリエイトをがんばっていこうと思ってた矢先の壁で困っております。
お忙しい中、お手数をお掛け致しますが
アドバイスをお願いいたします。
右サイドバーが下に落ちていて、いろいろ検索している内にこちらにたどり着きました。
ブログを最近始めたばかりで全くの素人です。
A8ネットにてブログを作成しました。
右サイドバーの訂正方法のアドバイスをお願いいたします。
こちらの記事を参考にしましたが変わらず。
A8のブログデザインをそのまま仕様しているのにも関わらず、なぜうまく表示されないのでしょうか？
記事ページの画像サイズ・サムネイルももう少し大きくしたいのですがうまくいかず。
たくさん調べてみてもよく分からず、せっかくアフィリエイトをがんばっていこうと思ってた矢先の壁で困っております。
お忙しい中、お手数をお掛け致しますが
アドバイスをお願いいたします。
Posted by あいく at 2015年04月01日 11:39
コメントを書く
びっくりした
Excerpt: 今回は､ブラウザ(IEなど)の画面を小さくした場合に､メイン部分がサイドバーの下に落ちるのを防ぐ方法について説明していきます。
Weblog: クラゲノ時間
Tracked: 2005-05-12 02:17
右サイドバーが落ちるのを直す。
Excerpt: シンプルホワイト（両サイドバー）を気に入っている。 ただひとつ気になっていたのがウインドウサイズが狭いと 右側のサイドバーが落っこちること。 HTMLやCSSの知識なんて皆無。 初心者の俺が調べま..
Weblog: feeling lucky for me
Tracked: 2005-05-16 15:21
SeeSaaのテンプレートに言わせて！
Excerpt: 皆さんこんにちわ。 始めて投稿です。 このシーサーのテンプレート、すぐ右が落ちちゃうんですけど。。。 落ちないで、センターがもっと幅広のテンプレート用意して欲しいなあ。 ちなみにこのブログでは「エアメ..
Weblog: ちょっと言わせて！
Tracked: 2005-05-24 19:48
IEで記事が下に折り返されてしまうのを直す方法
Excerpt: 「新・アフィリエイトで飯を食らう」さんで先日のgoogle PageRankの記事を引用してもらったのですが、その記事の中にIEでページを表示すると、「飯食う」さんのブログでは右サイドバーが折り返され..
Weblog: 待つ人のブログ 〜アフィリエイト、コンピュータ、意見など〜
Tracked: 2005-07-19 00:59
Ｓｏ Ｆａｒ Ｓｏ・・・・・Ｂａｄ ？
Excerpt: 「右サイドバーが下に落ちてるなんて・・・、誰か・・・ウソだと言ってよ・・・・！」 amazonサーチやハガレン英語版マンガの広告のある右サイドバーが、下に落ちて表示されている、多分amazonサーチの..
Weblog: 素人のひとり言
Tracked: 2005-07-22 10:53
OK,OK!マイフレンド!こっちの準備は完璧だ!
Excerpt: ふっ、完璧なデザインだ。 今までに無い完成度だ。 %単位なら、ズレる事も無いだろう。 いちいちコンテンツのタイトル画像とかも一旦加工してからやったりした。 やはり試行錯誤するのが一番だねー。 ..
Weblog: ウチ、キュアキュア妖怪やねん｡
Tracked: 2005-08-27 18:18
さくらのブログ配置崩れ修正方法発見
Excerpt: 先日の記事にアドバイスをいただき、テンプレートの初期化に成功しました。 で、アドバイスをいただいたkaishiさんのブログを拝見すると、なにやらseesaaユーザーが修正方法を掲載していそうな気配。..
Weblog: Smile's eye
Tracked: 2005-12-18 23:56
レイアウトの件、解決 2006.02.05
Excerpt: ヘルプを見たり、Ｑ＆Ａを参考にしたりと、 いろいろ調べていると、こんなページに行き着いた。 ■content(メイン)部分がサイドバーの下に落ちるのを防止する方法 http://blogdehp..
Weblog: 荷物の多いフリーターの日記
Tracked: 2006-02-05 21:38
gambling en ligne
Excerpt: Durant quatre d馗ennies nous avons cru a la construction des relations a l'aide d'une interaction fac..
Weblog: gambling en ligne
Tracked: 2006-06-02 06:41
レイアウトおおおおおおおおお
Excerpt: ﾌﾞﾛｸﾞ、ﾚｲｱｳﾄめっちゃ壊れてる!!!!聯 ﾌﾞﾛｸﾞﾊﾟｰﾂとか動画とかもしかして貼りすぎ？ 凹みつつも調べてみた。  ご選択頂いているテンプレ..
Weblog: 一言多い！
Tracked: 2007-07-08 18:44
特に､質問される方は､名前に自分のブログのリンク貼ってください。
リンクがない場合は､基本的に返事をしないつもりです。私一人で運営しておりますので､ご理解の程よろしくお願いします。
当サイトでは「トラックバック」歓迎します。ただし、相互リンクをして頂きたいと思います。
相互リンクがなく記事と関連があると判断した場合は、こちらからもトラックバックさせて頂くつもりです。お互いにとって有意義なものにしていきましょう！
トラックバックについて、まだよく分かってない方は、こちらで説明していますので参考にされてください。
特に
■記事と全く関連がないと判断される物
■「宣伝」「誘導」「誹謗中傷」を目的とした物
■リンク切れの場合
と判断したものにつきましては、「削除」させて頂こうと思いますのであらかじめご了承下さい。
同様に「コメント」も削除させて頂きます。
コメントへの返事の確認には、便利なブログコメントチェッカーを利用してください。