So-netブログのサイドバーの幅を変えてみる （２）

前回は、サイドバーの幅を変えてみました。こんな感じです。




サイドバーの幅は、あらかじめ設定された幅よりも広げることはできません。その幅の定義は見当たりませんでしたが、"Content"　という定義セクションと、"Articles"　という定義セクションから求まります。このテンプレートの場合は、下記のように 310px になります。

/*-----Content-----*/ #content{ width :900px; margin:50px auto 0 auto; text-align:left; clear:both; } ・・・省略・・・ /* Articles */ #main { width:590px; float:right; overflow:hidden; }

サイドバーを広げたはいいものの、フォントが小さくて少しバランスが悪いですね。少しずつ調整をしていきましょう。まず、見出しのフォントを大きくしてみます。

変更前	変更後
.sidebar-title { font-size:13px; margin:30px 0 20px 0; }	.sidebar-title { font-size:15px; margin:30px 0 20px 0; }

ちょっと分かりにくいですが、少し大きくなりました。




次はカレンダーを大きくしてみましょう。変更範囲はちょっと多めです。テンプレートによって、全体のバランスを見ながら、調整をしてみてください。

変更前	変更後
/*--Calendar--*/ .calendar-date { text-align:center; font-size:10px; margin:15px 0 0 0; } #calendar table { margin:4px auto; text-align:center; border-collapse:separate; border-spacing:6px; } #calendar th { height:19px; width:19px; font-weight:normal; font-size:10px; } #calendar td{ height:15px; width:15px; font-size:12px; font-family: Helvetica,Arial,sans-serif; }	/*--Calendar--*/ .calendar-date { text-align:center; font-size:12px; margin:15px 0 0 0; } #calendar table { margin:0px auto; text-align:center; border-collapse:separate; border-spacing:5px; } #calendar th { height:22px; width:22px; font-weight:normal; font-size:12px; } #calendar td{ height:18px; width:18px; font-size:15px; font-family: Helvetica,Arial,sans-serif; }

この設定を反映したものです。カレンダー全体が拡大されて、バランスがよくなってきました。




細かいところを修正しましょう。プロフィールが左よりですので、その位置修正と、読者登録の文字を大きくしましょう。Profile セクションと、RSS Regist セクションを変更します。

変更前	変更後
/*--Profile--*/ ・・・省略・・・ dt.profile-img { float:left; margin:10px; } ・・・省略・・・ /*--RSS Regist--*/ #rssRegist { margin-bottom:20px; padding:8px 0 10px 0; font-size:12px; text-align:center; line-height:1; background: #000000; }	/*--Profile--*/ ・・・省略・・・ dt.profile-img { float:left; margin:30px; } ・・・省略・・・ /*--RSS Regist--*/ #rssRegist { margin-bottom:20px; padding:8px 0 10px 0; font-size:14px; text-align:center; line-height:1; background: #000000; }

大分、よい感じになってきました。




さて、いよいよ最後の仕上げです。サイドバーのフォントを少しだけ大きくしてバランスをとりましょう。

変更前	変更後
/*-----Side-----*/ #side-a { float:left; font-size:12px; width:270px; overflow:hidden; }	/*-----Side-----*/ #side-a { float:left; font-size:13px; width:270px; overflow:hidden; }

こんな感じになりました。う～ん、こうやってみると、あまり変わりないですねぇ。




さて、最初と最後を比べてみましょう。こんな感じになりました。




幅を変えるのは簡単でしたが、調整のほうが手間がかかってしまいました。もし、このブログを参考にデザインをカスタマイズしたいと思う方がいたら、自己責任でやってくださいね～。（＾－＾）／～

---

現場でかならず使われている CSSデザインのメソッド

• 作者: 北川 貴清
• 出版社/メーカー: エムディエヌコーポレーション
• 発売日: 2013/09/25
• メディア: 単行本

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】

• 作者: 大藤 幹
• 出版社/メーカー: エムディエヌコーポレーション
• 発売日: 2013/08/01
• メディア: 単行本

ゼロからわかる HTML&CSS超入門

• 作者: 太木 裕子
• 出版社/メーカー: 技術評論社
• 発売日: 2011/02/11
• メディア: 大型本

---

タグ：CSS HTML

コメント 6

こんばんは、すごく参考になります。So-netブログが気に入っていますので、色々アレンジしてみたいと思っていました。
by onemore (2013-12-08 00:46) 

コメントありがとうございます！
テンプレートによって表現が異なるみたいですので、ご参考になるかわかりませんが、お役にたてれば幸いです！
by ys_oota (2013-12-08 09:19) 

勉強になります。
私は、幅の調整に苦戦しています(笑)
by 司馬亮 (2013-12-09 20:44) 

ものすごく勉強になりました。
ありがとうございます！
by miturin_s (2013-12-09 22:24) 

　ys_ootaさん、初めまして！

ドンまること、小松と申します。

有益な記事を拝読させて頂き、非常に参考に

なりました。

以下が、私のブログです　↓

http://donmaru.blog.so-net.ne.jp/

有難う御座いました！m(__)m
by ドンまる。 (2015-02-03 20:23) 

昨日に引き続き、今度はこちらの記事を参考にカレンダーを大きくしてみました。
おかげさまで上手くいきました！
どうもありがとうございました＼(^o^)／

by saia (2016-01-17 20:08)