1カラムデザインに変更

このブログのデザインを1カラムにしてみた。元々このブログのデザインは2カラム (本文＋右サイドバー) となっていたが、右のサイドバーを下に持っていき、本文を横に広く表示できるようにした。

具体的には、以下のcssを書いた。

#simple-header, h1, .hatena-body{
  max-width: none;
}

.main{
  float: none;
}
.sidebar{
  float: none;
  margin-left: 0;
  width: auto;
}
.main div.calendar, .main div.day{
  margin-right: 0;
}
.day{
  padding: 0 20px 2em 20px;
}

.hatena-sectioncategory li{
  display: inline;
}

やってること。

• max-widthの指定を無くして、ブラウザのウィンドウサイズを広げれば表示領域も広がるようにした。
• 本文とサイドバーのfloatを無効にして、1カラムにした。これによってサイドバーに表示していた情報は、本文の下に移動した。
• カテゴリーのリストのdisplayをinlineにして、横に並べて表示されるようにした。
• その他marginやpaddingの微調整。

実際には、上記に加えてデザインのカスタマイズ - 今日覚えたことに書いた本文の色等を変更するcssも設定している。

RSSで読んでる人はわかんないと思うし、わかる必要もない。結局どんなにデザインをいじっても、RSSリーダーで読んだ方がはるかに便利だと思う。