So-net無料ブログ作成
検索選択

So-netブログのサイドバーの幅を変えてみる (2) [ソフトウェア関連のもろもろ]

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

ba_original_layout.png


サイドバーの幅は、あらかじめ設定された幅よりも広げることはできません。その幅の定義は見当たりませんでしたが、"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;
}
i_Sidebar_width.PNG



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

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


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

cb_Font_Title13to15_Sidea12to13.png


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

変更前 変更後
/*--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;
}



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

ec_CalendarChanged.png


細かいところを修正しましょう。プロフィールが左よりですので、その位置修正と、読者登録の文字を大きくしましょう。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;
}



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

ge_RSSRegsitChanged.png


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

変更前 変更後
/*-----Side-----*/
#side-a {
float:left;
font-size:12px;

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

width:270px;
overflow:hidden;
}



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

j_sidea_font_12_13px.png


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

ga_original_layout.png


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




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

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

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



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

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

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



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

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

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




タグ:CSS HTML
nice!(31)  コメント(6)  トラックバック(0) 
共通テーマ:趣味・カルチャー

nice! 31

コメント 6

onemore

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

ys_oota

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

司馬亮

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

miturin_s

ものすごく勉強になりました。
ありがとうございます!
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) 

saia

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

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

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0