Topseesaaブログ改造>seesaaで初期テンプレートの右サイドバーが落ちない方法
2005年04月25日

seesaaで初期テンプレートの右サイドバーが落ちない方法

最近ちょこちょことブログをいじっていまして、seesaaブログを始めたばかりの方の参考にすこしでもなればと思い変更した箇所と方法をご紹介します。

今回は初期の3カラム(左右にサイドバーのあるスタイルシート)の場合記事に枠を超えるバナー等を貼った場合に右のサイドバーが下に落ちるのを最小限に防ぐ方法とスタイルシートの範囲を指定する方法です。

私はあまり詳しくないので文章が分かりにくかったり、正確ではないこともあるかと思います。
それに加え私が使用しているのは(シンプルブルー)ですのでそれ以外ではどうなのかまでは検証しておりませんのでこのカテゴリ自体おまけだと思ってご容赦下さい(w

まずは右サイドバーが落ちるのを回避する方法ですが、まず#containerを追加してください(スタイルシートの一番上のbodyの次にでも挿入してください)

#container{
margin:0px auto 0px auto;
padding:0px;

width:100%;
text-align:left;
}

#links、#links-left、#contentのそれぞれの場所に
width:○○px
とサイズを合わせていれましょう。

当初は#linksは20%、#links-leftは20%、#contentは55%になっていると思いますので、お好きな解像度に合わせて下さい。
一般的には1024×768が多いようですが800×600の方も結構いらっしゃるようです。

うろ覚えですが初期3カラムはこれを追加するだけで右側が落ちなくなります。

落ちませんが#containerが100%だと#banner等もウインドウいっぱいに表示されますので#links、#links-left、#contentは丁度合うように指定してあげないと不恰好になります(丁度合うと言ってもご自分のモニターの解像度で、見る方の解像度が大きくなれば不恰好なままです)
ご自分のモニターでブログ全体をウインドウいっぱいで表示したい方は上記の方法で良いかと思います。

それじゃイヤンと言う方は#containerもpxで指定してください。
今の所、私はそうしています。

このブログの設定は以下のようにしています。

#container=855px
#links=165px
#links-left=165px
#content=500px

#banner等も大きさが揃って自己満足的には良いですが、大きなモニターで高解像度な方は全てが小さくなってしまいます(w
私のモニターが1024×768なので恐縮ながら今の所自分の見た目に合わせているのですが、人によってモニターの解像度は様々ですので右サイドバーが落ちたとしても%の方が万人向けではあるのかもしれません・・・難しい所ですね。

逆に解像度よりも大きいpxで指定した場合はウインドウに収まりませんので横スクロールバーが出ます。

で、このままですと最大化した際に恐らく左に寄った形で表示されると思います。
そのままでも良い方はそのままで、最大化してもウインドウの真ん中に表示したい方はbody
text-align:center;
を加えてください。
これで既存の『きのこ』等のようにウインドウのセンターに表示されるようになると思います。

これだけやってもサイズに合わないバナー等を貼ると結局右サイドバーは落ちちゃうんですけどね。
HTML編集機能が使えるようになりましたので、HTMLで落ちないようにするのも良いかもしれません。

この方法が正しいのかは分かりませんが私はとりあえずこうしています。
少しはお役に立ったでしょうか?

CSSの変更は必ずご自分のご判断で行ってください。
何かあっても一切責任もてませんのでご了承くださいね。


 

 アフィリエイトランキング

posted by shin at 09:39 | Comment(0) | TrackBack(0) | seesaaブログ改造 | Main

この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:




この記事へのTrackBack URL


×

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