右サイドバーの落ちを防ぐ

 今回は、ブログの表示でウィンドウサイズが小さい場合に、右サイドバーの情報が消えてページの下の方に移動してしまう現象の改善方法の紹介です。

  ○右サイドバーの落ちを防ぐ方法

 この方法自体はSeesaaブログ限定の情報になります。とりあえずうちのブログではずっとそういう現象が出ていましたので、今回の修正で直って助かりました。どうも古いテンプレートと現在の仕様の食い違いが原因のようですね。

 Seesaaブログを使っている方は、自分のブログにこういう現象が出るかを試してみてくださいね。ウィンドウサイズを右サイドバーより小さくすればわかります。そのまま表示されていれば、問題はありません。もし右サイドバーがメイン記事の下の方に落ちてしまうようでしたら、今回の対応が必要です。

 右サイドバーには見せたい情報を載せている場合が多いので、これが見えなくなるのはつらいです。初めてブログを訪問する人にとってみれば、右サイドバーが下にあっても気がつきませんもんね。リピータを減らさないためにも、早めの確認と対処を行ってくださいね。

■スタイルシートの変更

 テンプレートを構成しているのは、スタールシートの記述になります。各コンテンツの配置や背景画像時の大きさなど、レイアウトに関することは全てスタイルシートをカスタマイズすることで行えます。
 今回の現象も、このスタイルシートの記述不足が原因ですので、これからその不足部分の修正方法を説明しますね。

1)スタイルシートの管理画面を開く
 @マイブログ→デザイン→スタイルシート
  →タイトル(スタイルシート名)をクリック
 A左側の「ページ」からトップを選択
  (変更作業は記事、過去ログ、カテゴリも行う)

2)スタイルシート記述の変更
  css_ketaochi.jpg

 @"#banner"の上に新しく記述を増やす

 A増やす記述
  #container{
  margin:0px auto 0px auto;
  width:850px;
  }

 B横幅を自分のブログのものに合わせる
   自分のブログの横幅は、スタイルシートの中の以下の3つの部分に
  書かれた"width"の値の合計になります。実際はこれより少し大きめに
  調整した方がいいと思いますね。
   "#content" 中央の記述
   "#links-left" 左サイドバーの記述
   "#links" 右サイドバーの記述

 Cプレビューをクリックして確認
   実際にどう表示されるかがわかります。最初に説明した確認方法で
  右サイドバーの落ちがないか確認します。落ちて表示されるようなら
  Bに戻って"width"の数値を増やしてみます。

 D設定を保存
   「プレビュー」で問題なく右サイドバーが表示されるようになった
  ら、「スタイルシートを変更する」をクリックして、変更を保存する。

以上が変更手順になります。


■不具合の理由の確認

 今回の手順で作業をすれば右サイドバーの落ちはなくなります。一応ここで不具合が直った理由を確認しておきますね。まずはこれをみて下さい。

body
container
banner
links-leftcontentlinks
footer



 先ほどのスタイルシートの中の記述にあった、"#content"や"#links-left"、そして今回増やした"#container"はこの図のようなレイアウトの位置関係を表現しています。そして、それぞれの"width"の値は、その幅を指定しているんです。

 今回の右サイドバーの落ちがなくなったのは、ヘッダ、フッタ、左右サイドバーとメインをまとめた"#container"部分の幅を固定してあげたことで、ウィンドウのサイズに影響受けなくなったんです。Seesaaの以前の仕様だとこの"#container"という概念がなかったようです。最近のテンプレートはこの仕様変更を意識しているので、右サイドバーが落ちるようなことはないですね。


 今回はちょっと難しい内容でしたが、このスタイルシートがわかってくると色んなデザインの変更が簡単に出来ちゃいます。興味を持った方は挑戦してみてくださいね。Seesaaブログのスタイルシートの仕様をリンクしておきますね。

これからもブログを楽しんでいきましょうね!


参考になったと思う方は、応援ポチをお願いします。(^O^)/

ブログランキング


挑戦!ディスカバリーネットへ戻る

posted by ひろみ at 22:45 | Comment(7) | TrackBack(1) | ブログ運営

【PR】
これを読んでるあなたも是非一緒に
ディスカバリーネットに参加しませんか?
一緒に稼ぎたい方はここをクリックしてくださいね。
ディスカバリーネット

この記事へのコメント
こんばんは〜!

大変参考になりました!
この現象は、どうすればいいのかちょっと手におえなかったので、
助かりました!

ありがとうございます。
Posted by わらしべ at 2005年08月30日 23:17
師匠、こんばんは。
今悩んでいる私にとってもリアルタイムな情報ありがとうございます。
次に私が悩んでいるのは、ブログ名、ブログ内容の記述をもっと左に寄せる方法です。
文字と画像のいいところがかぶって見難いので文字をずらそうと思います。
良いネタをお願いします。
Posted by じゅん at 2005年08月31日 01:02
現状でも落ちていますよ。直っていません。
Firefox ,解像度800x600 で。
Posted by 通りすがり at 2005年08月31日 09:10
・・・と思ったんですけど、勘違いでした。
最初から右サイドバーには何もないんですね。
つまり意図的に、下に落ちたのと同じデザインにしているんですね。あまりにも奇妙なので、勘違いしました。
Posted by 通りすがり at 2005年08月31日 09:17
通りすがりさん、おはようございます!

 本来は右サイドバーは表示されるデザインです。
 どうもFirefoxでみると、スタイルシートの扱いが若干違うみたいですね。
とりあえずFirefoxでも表示されるようには変更してみました。でも、行間や余白の扱いが違うようなので、ズレがでるのだけは我慢していただけると助かります。

全てにあわせるのは難しいですね(^_^;)
Posted by ひろみ at 2005年08月31日 11:17
わらしべさん、おはようございます!

お役に立ててうれしいです。
特にSeesaaブログだと困ってる人多いようだったので・・・
これからもいい情報があったら載せていきますね。

Posted by ひろみ at 2005年08月31日 11:22
ファッション 通販 海外
Posted by クリチャンルブタン at 2013年07月19日 02:03
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/6391211

この記事へのトラックバック

カスタマイズテスト用ブログ、作っちゃいました♪
Excerpt: ディスカバリーネットのサポートをする時、 ブログに関しても出来る限りサポートをする様にしています(^-^) ですが私の場合、人様にサポートするからには、 きちんと表示なるのかなど自分でテストしてみ..
Weblog: ディスカバリーネット~初心者編~
Tracked: 2007-03-16 23:05
×

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