ブログカスタマイズのブログ

HOME > その他 > 右サイドメニューが落ちる
【Dr.Hさんのコメントはこちら】
テンプレートによっては右サイドメニューが画面下に落ちることがあります。

この現象は、スタイルシートの編集で#containerを追加することで解決できます。

#container{width:900px;}

900pxがコンテンツ全体の幅です。この値をお好みの数値に変えてお試し下さい。
次にサイドメニュー、メインの幅設定ですが、拝見したところ、

#content {
width:55%;
}
#links-left {
width:20%;
}
#links {
width:20%;
}

となっていました。それぞれメイン、左サイドメニュー、右サイドメニューの幅指定です(詳細はこちらで)。このパーセンテージを変更するか○○pxのように値を決め打ちすればコントロールすることが可能です。

オリジナルテンプレートはさすがに勝手に使うとダメだと思います(笑)。気に入ったテンプレートがあれば、そのブログの管理人に相談してみてはどうでしょう?意外ともらえると思いますよ。
22:11 | Comments(26) |
この記事へのコメント
2005年06月12日
ありがとうございます。
さっそく試したところ成功しました。

#container{width:900px;}はbodyのすぐ下に追加しましたが、それでいいのですよね。

申し訳ありませんが、全体をセンタリングする方法をお教えていただけないでしょうか。
text-align:center;を追加したところページではなく文字がセンタリングせれてしまいました。

よろしくお願いします。
Posted by Dr.H at 03:47
2005年06月12日
このたびは、ありがとうございました。

教えてもらったことを参考にして
他のテンプレートにしてみました。

正直言って、今回の設定の仕方が分からず
変更ができずにいたような気がします。
(メインの幅が狭すぎるなどの理由で。)

ということでセンタリングの方法は、また必要になったときに教えて下さい。

とても助かりました。
どうもありがとうございました。

ps.トータルの数値(210px+500Px+210px=920pxですが、
Widthを920pxにすると右のサイドバーが落ちてしまいました。
そこで少しずつ数値を上げてゆき、980pxで落ち着きました。
シンプルホワイトのときはこのようなことは起きませんでした。
どうしてこのようなことが起こるのでしょう。
また、逆に920と980のように一致になくても良いということですか?
ぜんぜん急ぎではありませんので、時間があるときにお教え下さい。

#container{
margin:0px auto 0px auto;
width:980px;    ← それぞれの合計は920px
color:#5D5D5D;
font-size:12px;
font-family:Verdana;
text-align:center;
}
Posted by Dr.H at 13:41
2005年06月13日
Dr.Hさん、ブログ拝見しました。完全オリジナルですね!できてよかったです。

(1)#containerの追加場所はbodyのすぐ下で大丈夫です。

(2)ページ全体のセンタリングはブラウザによって方法が違います。

http://www.blogcustomize.com/customize_total_design.html

の「2. container IDによるコンテンツ全体のコントロール」です。デザインを変更する際に参考にして下さい。

(3)#containerの幅980pxは、#contentと#linksのmarginが足されているようです。それぞれmarginの4つ目に30pxが指定されています(4つ目は左側のmargin)。920px+30px+30px=980pxです。
Posted by 管理人 at 02:48
2005年06月15日
管理人さま

このたびは、大変お世話になりました。

(2)は「2. container IDによるコンテンツ全体のコントロール」を参考にしながらやってみたつもりですが・・・。また機会があったら挑戦して見ます。

(3)の980pxは偶然一致していたということですね。理由は分かりました。


 コメントで、見やすくなったといわれました。

 本当にありがとうございました。
Posted by Dr.H at 02:25
2005年06月16日
このブログのスタイルシート、

http://blogcustomize.seesaa.net/styles-index.css

を参考に試してみて下さい。
出来ない場合は出来てない状態でサイトを見せてもらえるとアドバイス出来ると思います。そのときは書き込みして下さいね!
Posted by 管理人 at 01:00
2005年07月15日

はじめまして、いつもためになる記事楽しみにみております。私のHPでも右サイドバーが落ちてしまい困っております。現象としてはTOPページはメインの一番最後にAMAZONの広告を載せることで改善されましたが(なぜかそのAMAZONの広告はTOPに反映されません。)記事を個々に選んで見ようとすると右サイドバーがAMAZONの広告の下に落ちてしまいます。
色々試したのですがうまくいかなくて困っております。

お手数かとは思いますがよろしくお願いします。
Posted by ボギー at 12:49
2005年07月16日
ボギーさん、こんばんは。問題が2箇所ありました。

(1)記事コンテンツ

おそらく記事コンテンツのカスタマイズ中の誤操作だと思うのですが、コメントに関する記述の中で、article_child__article_idの行がおかしそうです。カスタマイズされたソースを見れないのでココがこう間違えてます!とまでは特定できないですが、その行がおかしいと思います。そのせいでトップページにもコメント記入用のtextareaが表示されてしまっています。

(2)スタイルシート

スタイルシートもwidthやpaddingをいろいろと変更されているようで、その値がおかしそうです。containerのwidthを修正しただけでは戻らなかったので、一度スタイルシートを初期値に戻した方がいいかも。デフォルトのスタイルシートならば正しく表示されました。

お勧めは(1)の修正とスタイルシートの初期化です。ちょっとスタイルシートのpaddingとmarginを修正するのは難しそうですね・・・。
Posted by 管理人 at 02:31
2005年07月19日
お世話になります。ボギーです。ご回答ありがとうございました。ご指摘のとおり記事コンテンツとスタイルシートを初期化してみたらバッチリでした。
早々にご回答していただいていたのに私事で今まで試せずにいたためお返事が遅れました。
このたびはありがとうございました。今後ともまた何かありましたら相談乗ってくださいね。
Posted by ボギー at 08:41
2005年08月19日
はじめまして。kenと申します。

現在私のブログではテンプレートの「ブルー」をそのまま使用していて、トップページだと3カラムで表示されるのですが、単体の記事ページに行くとIEでは右サイドバーが左サイドバーの下に表示されてしまいます。

これは何が原因になっているかお分かりになりますでしょうか?
Posted by ken at 18:21
2005年08月19日
kenさん、こんばんは。

IEで個別記事を見たけど落ちませんでしたよ!横幅の大きな画像を掲載したときなど落ちることがあります。もし良かったら落ちる個別記事ページのアドレスを教えてもらえますか?

# blog-templateさん、すみません。せっかくコメントを頂いたのですが当ブログの方向性とちょっと違っていたので削除させて頂きました。ゴメンなさい。
Posted by 管理人 at 23:57
2005年08月21日
素早いお返事ありがとうございます。

私の環境ではどの記事ページ(例えば8/17)でも右のサイドバーが落ちてしまうのですが、これは表示環境のせいなのでしょうか?ちなみに私のパソコンの解像度は1280×1024です。

8/21の記事にスクリーンショットを載せてあるので、参考になれば幸いです。

どうぞよろしくお願いします。
Posted by ken at 23:23
2005年08月23日
kenさん、こんばんは。

標準設定のWindowsXP&IEでは正しく表示されるようです。アップしてもらった画像を見るとWindowsのスタートメニューの文字が大きかったのでkenさんの環境ではその辺りを変更されているようです。見よう見まねで変更してみたのですが再現できませんでした。。。ゴメンなさい、原因がわからないです!
Posted by 管理人 at 00:14
2005年08月23日
度々すみません。

私の環境ではDPI設定を25%上げているのですが、それを戻したら右サイドバーが落ちないで表示されました。

ご丁寧な回答本当にありがとうございました。
Posted by ken at 22:13
2005年08月24日
kenさん、こんばんは。

なんかお役に立てたのか立てなかったのかわからないですけど、原因が分かって良かったです。でもDPI設定でブラウザの表示環境が変わるのはちょっと問題ですね・・・。
Posted by 管理人 at 02:58
2005年08月25日
おはようございます。
最近までは大丈夫だったのですが、右サイドバーが記事ページで落ちてしまいます^^;何がいけないのかわからなくて。対処の仕方を教えていただけませんか?時間が空いたときで構いません。宜しくお願いします。
Posted by ひろっち at 05:47
2005年08月25日
はじめまして。
なんとかカスタマイズできないものかと検索しまくってたどり着きました・・・。
はんとにスゴイ!サイトですね。
参考にさせていただいて、色々イジリました(笑)
ありがとうございます。
ただ、どうしても上手くいかないのです。お助けください。

現在、オレンジのテンプレートを使っていますが、記事ページに468pxの広告を貼ると右サイドバーがおちてしまいます。
ご指南のようにスタイルシートを覗いて・・・

#containerがwidth:750px
#contentがwidth:467px
#linksがwidth:253px

となっていましたので、#contentの部分を468にしたり470にしたり・・・
もちろん#content+#links=#containerとなるようにやってみましたが、ダメでした。

宜しくお願い致します。
Posted by Gahaha! at 16:45
2005年08月27日
はじめまして。いつも拝見してます。

私のブログも右ツールバーが下に落ちてしまいます。
記事ページでだけは正常に表示できるのですが…。
上で仰られてるように#containerを追加し、メイン、左右ツールバーの幅を各55%、20%、20%に設定したのですがうまくいきません。(最初はpxで入力したのですがやはりうまくいきませんでした)
テンプレートはシンプルホワイトです。
どうかアドバイスお願いします。
Posted by tebasaki at 00:08
2005年08月27日
最近、右サイドバーが落ちるというのが多いですねー!

ひろっちさん、Gahaha!さん、tebasakiさん、
右サイドバーの解析は時間がかかるのでもう少しお待ち下さい!
Posted by 管理人 at 01:39
2005年08月27日
お忙しそうですね、時間もかかるのでしょうし、お時間があいた時でかまいません。宜しくお願いします^^
Posted by ひろっち at 18:40
2005年08月29日
自己解決しました(右サイドバー削りました)
お手数おかけしました。
Posted by tebasaki at 21:33
2005年08月31日
Posted by XX at 15:19
2005年09月01日
ひろっちさん、こんばんは。お返事遅くなりました。

記事ページを見てみました。右サイドメニューがメインとして認識されてしまっています。<div class=blog>か<div class=blogbody>どっちかの</div>が足りてないようです。記事コンテンツのHTMLソースを見直してみて下さい!
Posted by 管理人 at 01:53
2005年09月01日
Gahaha!さん、こんばんは。
ブログ&スタイルシートを拝見しました。

.blog {
margin-left:15px;
}

この margin-left:15px; が原因かもしれないです。
記事の左側に15pxのスペースを空けます。
ざっと見たところこの15pxが気になったのですが、
詳しくみると他にもmargin/paddingがあるかもしれません。

#container=#content+#links+(left/rightのmargin/padding)

を計算して試してもらえますか?
Posted by 管理人 at 02:06
2005年12月02日
どうもはじめまして。色々検索してるうちにここに
行き着きました。ものすごく丁寧で解りやすくて感動しました。勉強させてもらってます。

質問があるんです。
トップページのフッターにpowered by seesaa blogを
表示したいんですが表示されないで右サイドバーに表示されます。他のコンテンツとかも全くフッターには
表示されません。どうしてなんでしょうか?
Posted by おん at 00:47
2005年12月02日
おんさん。

はじめましてイタチ(@管理人様にいろいろと教えていただいた者)です。

HTMLをちらりと見ましたが、
右側のサイドバーにあるA8の横長広告が入っているコンテンツにおいて、</div>が抜けているようです。

『・・・A8のアドレス・・・+ZVKWX” alt=””>』の後ろに</div>を追加してみると解決すると思います。

細かい話をすると、
</div>が一つ足りないために右サイドバー(#links)を閉じるはずの</div>が無く、結局#footerの下に出てきた</div>を#linksが奪って使っているので、フッターの内容が全て右サイドバーの中に入ってしまっている状態になっています。
※HTMLの構文の流れで表すと下のような感じになっています。

・・・
<div id=”links”>
 右サイドバーのコンテンツいろいろ
(</div>)  ←本来#linksを閉じるはずの</div>が無い

<div id=”footer”>
 フッターの内容いろいろ
</div> ←#footerを閉じる</div>です。

</div> ←本来なら#containerを閉じるはずの</div>だが、
     これを#linksが使っている。
     つまり、右サイドバーの中にフッターが全て入っている状態。
     (また、サイト全体としても</div>がひとつ足りていない状態とも言えます)
Posted by イタチ at 02:22
2005年12月03日
イタチさん、どうもはじめまして!

</div>を付けたらフッターに表示されました。ずっと悩んでたので解決して凄くうれいいです。
本当に感謝です。ありがとうございました!

イタチさんのブログを見せてもらいました。自分も
あんな風にキレイなページにできるようにがんばりたいです。

話しがそれるんですが自分も2年前に行政書士の試験を受けたことがあります。ちょうど前年が合格率が高くてちょっと勉強すれば試験に通るみたいな感じだったので。

でもその年から異常に難易度が上がってちょっと勉強したぐらいじゃ全然ダメで普通に落ちました。
それっきり諦めちゃったんですけどね〜。
Posted by おん at 16:59
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

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