2004年10月02日

サイドバーの幅を変えてみた

前からサイドバーの幅が狭いと思っていました。
これは選択するテンプレートによって違うとは思うんだけどね。
テンプレートを変えてみればいいことなんだけど、
結構このデザインで長くやってきたので、それなりに愛着もあるし。

ここは思い切って(って言うほどでもないけど・・・)、
サイドバーの幅とデザインを変えてみることにしました。


サイドバーの幅を変更するには、CSSをいじります。
これはどのブログでも同じではないでしょうか。

まずはCSSのどこでサイドバーの定義をしているのか調べます。
トップ画面のHTMLを開いて眺めてみると、下のほうに

<div id="links">
<$PulginList$>


という記述が見つかります。
以前個別記事にもサイドバーを付ける時に、この辺りを個別記事にコピーしましたので、ここがサイドバーを表示する部分だと見当が付きます。
id="links"から分かるように、サイドバーにはlinksという名前のスタイルが割り当てられているようです。

次にCSSの編集です。よーく探すと、
  #links{
    width:170px;
    text-align:left;
    margin-left:587px;
    padding-top:10px;
  }
という部分が見つかります。ここがサイドバーのスタイル定義です。
ここまで見つかれば簡単です。
widthの値を大きくすればすみそうです。

気をつけなければならないのは、あまり大きくしすぎると、
サイドバーが下に落ちてしまいます。
これはページ全体の幅(800px)を超えてしまうからです。

私はmargin-leftの値を少し小さくして、
widthの値を大きくしました。
この二つの値を足して800pxを超えなければOKです。

実はこのページ全体の幅も変更は可能です。
同じようにCSS内にその定義があるのでそこを変更すればいいのです。
まあ、あまり幅を広くしすぎても仕方ないので、
今回は800px内で設定してみました。

最後に、私の選択したテーマは背景画像に縦線が入っていたので、
このままでは背景画像とサイドバーが重なって見栄えが大変悪い。
仕方ないので、背景画像も消してしまいました。
それは、CSSのてっぺんにある、
  body{・・・
内にある、backgroundの行を消してしまえばOKです。

でもこれだと少ししまりがなくなってしまったので、
また別の方法で区切り線を入れようかと思います。
人気ブログランキング。目指せトップ10入り!人気ブログランキング


Posted by hammer77 at 16:01│Comments(14)TrackBack(4)Edit

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

トラックバックありがとうございます。トラックバックスパム対策の為、この記事へトラックバックするにはそちらの記事内にこの記事へのリンク(参照リンク)が必要になります。不本意ではございますが、ご理解ほどよろしくお願いいたします。(トラックバックポリシー)
この記事へのトラックバック
「ブログをとことん調べます。」・サイドバーの幅を変えてみたを見て、私もサイドバーの幅を変えてみました。狭いよね、やっぱり。ちょっと長めのタイトルだとはみ出て見づらいです。この間から自分のCSSをプリントしておいたので、以前よりあわてなくなった。ここを変えるそ
サイドバーの幅を変えたよ【お気楽ネコののんきな日々@屋根裏】at 2004年11月04日 17:58
ついに、ゴルフとは関係ない話題になってしまいました。(笑) (本格ゴルフさんがゴルフとブログをよく打ち間違えると  おっしゃっていたので、あながち関係なくはないかも。) 今年の1/末から始めたこのブログですが、最近仕事そっちのけで ハマってしまったブログ
ブログカスタマイズ【ゴルフの気づき】at 2005年03月08日 10:49
サイドバーの幅を少し広くしたいと思って試行錯誤してきましたが、やっとできました。なかなかうまくいかなかったんですが、難しく考えすぎていたみたいです。結局CSSを3ヶ所ほど書き換えるのと、広がった幅に合わせてサイドバーの背景画像を作り変えるぐらいでした。 .
サイドバーの幅を変更する(livedoor Blog)【ZNE10Gとともに】at 2005年04月05日 12:03
ブログのデザインを前のに戻しました。 何かこっちの方が落ち着くんでねぇ。 というか、やはり3カラムはゴチャゴチャしてるから2カラムの方が良いかなと。 ニュースも出ないから鬱陶しくなくて良いですしね。 それでサイドバーの幅が狭かったのでちょこっとだけ広....
トラックバックしてみる【シバッチの世間話】at 2006年01月18日 20:53
この記事へのコメント
お陰さまで、笑えるくらいアッサリとサイドバーの幅を変えられました
ありがとうございます

で、教えていただきたいのですが・・・
メニューの枠を取り払い、コンテンツ名(?)も左寄せにしたいのです
<A Href="http://blog.livedoor.jp/kireinaoneisannano/">こちら</A>がブログです
うまく説明できないので(汗)
お手数をおかけいたしますがお願いいたします
Posted by 友華 at 2005年04月11日 11:43
友華さん。こんばんわ。

見た所、コンテンツを左寄せというより、サイドバーの幅が大きすぎるのではないでしょうか?

とりあえず左寄せするにはCSSの適当な箇所にalign:left;を入れるか、もしくはalign:right;やalign:center;を削除すればよろしいかと。

この当たり、CSSをみなければなんともいえません・・・すみません^^;
Posted by hammer at 2005年04月11日 23:09
ありがとうございます
もう少し幅を狭くしてみました
そうしたら、記事部分との間がマヌケになってしまいました(汗)
もう少し頑張ってみます
Posted by 友華 at 2005年04月14日 19:32
友華さん、こんばんわ。

ちょっとだけ分かりましたよ。
友華さんはCSSで、sidetitleとかsideの幅を変更しているのだと思います。%指定で。サイドバー全体の幅を変えるにはそこではなくて、#linksのwidthを変更します。

そうすればサイドバーと記事の間がうまく狭まると思うのですが。
Posted by hammer at 2005年04月14日 22:23
blogを始めてまもなく、
思うようにカスタマイズ出来なくて四苦八苦しています。
いろいろと直したいところがあるのですが、
この記事のサイドバーの幅を広くしたい、というのもその中のひとつです。で、試してみました。
widthを155pxの値にしまして広くなったのを確認しましたが、下に落ちてしまします。
hammerさんの説明ですと、
 私はmargin-leftの値を少し小さくして、
 widthの値を大きくしました。
 この二つの値を足して800pxを超えなければOKです。
ということですが、
私のCSSを見ると、
#links{
  width:150px;
  float:right;
  margin:75px 20px 50px 25px;
  text-align:center;
}
で、値を足しても 320pxにしかならないのに、
下に落ちてしまうのはなぜでしょうか?
お分かりでしたら教えていただけませんか?
長々すみません、よろしくお願いいたします。
Posted by スパイクのはは at 2005年07月29日 17:24
最近ブログを始めた超初心者です。
このサイトを見つけて、読むたびに「へぇ〜」の連続です。
さて質問ですがサイドバーの幅を変えるという記事だったのですが、私の選んだテンプレートでは全体が中央に寄っているように感じます。
サイドバーの幅は現状のままで、左右の余白を小さくする(本分欄を広く)ということは可能でしょうか?
どうか教えてください。お願いいたします。
Posted by はちまる at 2005年07月31日 00:20
スパイクのははさん、はちまるさん、はじめまして。

幅の設定は難しいですよね^^;私のこの記事も訂正しなければならないかもしれませんね。また調べて記事にしますね。もうしばらくお待ちを。
Posted by hammer at 2005年07月31日 11:14
hammerさん、こんにちは。

適当に幅の設定と思われる個所の数値を変えていったところ、
なんとか変更することが出来ました。
・・・といってもサイドバーの幅ではなく、
本文の幅を変えたらサイドバーが下に落ちなくなったので、
とりあえず問題終結しました。
質問しておきながら申し訳ありませんがごめんなさい。
でもやっぱりサイドバーをもう少し広くしたいので、
ご教授お願いいたしますm(_ _)m
Posted by スパイクのはは at 2005年08月09日 16:28
スパイクのははさん、こんばんわ。
すみませんね^^;記事にするといっておきながら放置常態で・・・

サイドバーの幅をうまく広げるには、サイドバーの幅を広げて本文のところの幅を狭めないといけません。スパイクのははさんは本文のところの幅の設定箇所まで分かっているわけですから、そこを狭めてみては?それと気をつけないといけないのはマージンです。ここも場合によっては小さくしないと、サイドバーが落ちてしまいます。

中途半端な回答ですみません・・・
Posted by hammer at 2005年08月12日 02:02
hammerさん、お忙しいところコメントありがとうございます。
ちょっとCSSのソースとにらめっこしながら、がんばってみたいと思いますが、
マージンってなんでしょうか?
サイドバーが右側にあるとしたら、そのまた右側の余白みたいなところのことですか?
もしそうだとすると、ここの余白を狭くしたいなぁと思っていたので、その個所を探して狭めてやってみようと思います。
ありがとうございました。
Posted by スパイクのはは at 2005年08月12日 13:29
マージンとは、サイドバーだけでなく、本文の部分も含めて余白のことです。
margin:75px 20px 50px 25px;
がマージンの設定ですが、20px、25pxがそれぞれ左と右の余白です。
ここを小さくすれば余白が小さくなるはずです。
Posted by hammer at 2005年08月12日 22:41
ためになる情報ありがとうございました。
ちょうど、フォームがはみだしていたんです。
助かりました。
Posted by のり美 at 2007年09月21日 15:18
のり美さん、ご丁寧にどうも^^
もう20日も前のコメントでしたね・・・
Posted by hammer at 2007年10月07日 00:51
I simply couldn’t go away your web site prior to suggesting that I really enjoyed the standard information an individual supply for your visitors? Is going to be again regularly to inspect new posts.
Posted by Brooklyn at 2014年02月23日 10:57
コメントお待ちしています。こちらではコメント認証もコメント保留も行っておりません。お気軽にコメントください^^