はてなダイアリーで3段組みをする方法

意外と簡単に3段組みできるので紹介。
はてなはmainとsidebarの二つが主体。

sidebarを増やしてfloat:left;を追加すれば簡単に3段組みになります。

管理者コンテンツの「デザイン」→「詳細」にて左コンテンツの追加

cssを追加

.main{
  float:left;
  width:400px;
}
.sidebar{
  float:left;
  width:200px;
}

すべてのCSSはこちら

*{
  padding:0px;
  margin:0px;
  font-size:1.0em;
  font-weight:normal;
  text-decoration:none;
  line-height: 1.2;
list-style:none;
}
body{
  padding:0px;
  margin:0px;
  background-color:white;
  text-align:center;
}
a{
  color:#ff517c;
  text-decoration:underline;
}
input{
}
img{
  border:0px solid red;
}
h1{
  background-image:url(http://moeten.info/image/hatena/header_bg.jpg);
  background-repeat:no-repeat;
  width:988px;
  height:181px;
  padding:0px;
  margin:0 auto;
  font-size:1.0em;
  font-weight:normal;
  text-decoration:none;
  text-align:left;
}
div{
  text-align:left;
  border:0px solid red;
}
.adminmenu{
  background-color:#ffb5ef;
  padding:3px;
  text-align:right;
}
.adminmenu a{
  color:white;
}
#headermycontents{
  background-image:url(http://moeten.info/image/hatena/contents_bg.jpg);
  background-repeat:no-repeat;
  width:950px;
  height:42px;
  padding:6px 0px 20px 0px;
  margin:0px;
  background-color:white;
}
#headermycontents li{
  float:left;
  text-align:center;
  width:195px;
  padding:4px;
}
#headermycontents li a{
  font-size:20px;
  font-weight:bold;
  text-decoration:none;
  color:#620041;
}
#headermycontents li a:hover{
  text-decoration:underline;
}
.hatena-body{
  width:950px;
  padding:0px;
  margin:0px;
}
.sidebar{
  padding:14px 0px 14px 0px;
  float:left;
  width:210px;
  margin-left:3px;
  text-align:center;
}
.sidebar div{
  font-size:0.9em;
}
.sidebar .hatena-moduletitle{
  background-image:url(http://moeten.info/image/hatena/hatena-moduletitle_bg.gif);
  background-color:#fbe9ff;
  background-repeat:no-repeat;
  background-position:0px 0px;
  width:200px;
  height:23px;
  padding-top:4px;
  font-weight:bold;
  font-size:1.2em;
  color:#77213f;
  margin:0px;
  text-align:center;
}
.sidebar .hatena-modulebody{
  border:1px solid #e4afe2;
  background-color:white;
  width:200px;
  padding:4px;
  margin:0px 0px 14px 0px;
}
.sidebar .hatena-module{
  background-color:#fbe9ff;
  margin:0px;
  width:200px;
}
.sidebar li{
  border-bottom:1px dotted #e4afe2;
  padding:4px;
}
.sidebar a{
  text-decoration:none;
}
.sidebar a:hover{
  text-decoration:underline;
}
.sidebar table{
  width:190px;
  border-collapse:collapse;
  border-spacing:1px;
}
.sidebar .calendar-day{
  width:15px;
  padding:1px;
  margin:0px;
  border:1px dotted #ff81e9;
}
.calendar-prev-month{
  width:15px;
}
.calendar-current-month{
  width:15px;
}
.calendar-next-month{
  width:15px;
}
.sidebar .calendar-sunday{
  width:15px;
  padding:0px;
  margin:0px;
}
.sidebar .calendar-weekday{
  width:15px;
  padding:0px;
  margin:0px;
}
.sidebar .calendar-weekday{
  width:15px;
  padding:0px;
  margin:0px;
}
.sidebar .calendar-weekday{
  width:15px;
  padding:0px;
  margin:0px;
}
.sidebar .calendar-weekday{
  width:15px;
  padding:0px;
  margin:0px;
}
.sidebar .calendar-weekday{
  width:15px;
  padding:0px;
  margin:0px;
}
.sidebar .calendar-saturday{
  width:15px;
  padding:0px;
  margin:0px;
}
.hatena-module-calendar2{
  width:190px;
}
.hatena-body{
  background-image:url(http://moeten.info/image/hatena/main_bg.jpg);
  margin:0 auto;
  width:958px;
text-align:center;
  background-repeat:repeat-y;
  background-position:center center;
}
.keyword{
  color:#4b2b2b;
  text-decoration:none;
  border-bottom:1px dotted #ff6691;
}
.main{
  padding:0px 5px 0px 8px;
  margin:0px;
  width:510px;
  float:left;
}
h2{
  background-image:url(http://moeten.info/image/hatena/center_title_bg.gif);
  background-repeat:no-repeat;
  padding:4px 14px;
  margin:14px 0px 2px 0px;
  width:510px;
  height:32px;
  font-weight:bold;
  font-size:1.1em;
}
.date{
  font-weight:bold;
  font-size:1.1em;
}
.main day{
  font-size:0.9em;
}
.title{
  border-width:0px 0px 1px 7px;
  border-style:solid;
  border-color:#f735b0;
  margin:10px 0px;
  padding:4px;
}
.title a{
  text-decoration:none;
  font-size:1.1em;
  font-weight:bold;
}
.comment{
  padding-left:14px;
  border:1pd solid #ffc4f5;
  background-color:#fff7e9;
  margin:14px;
  padding:4px;
}
.refererlist{
  padding-left:14px;
  margin:14px;
  border:1pd solid #ffc4f5;
  background-color:#fff7e9;
  padding:4px;
}
.main .days{
  padding:0px;
  margin:0px;
  width:510px;
}
.main .day{
  padding:0px;
  margin:0px;
  width:510px;
}
.main .body{
  padding:0px;
  margin:0px;
  width:510px;
}
.main .section{
  font-size:0.9em;
  padding:9px;
  color:#413737;
}
h4{
  background-image:url(http://moeten.info/image/hatena/h4_bg.gif);
  background-repeat:no-repeat;
  text-align:center;
  font-weight:bold;
  color:white;
  padding-top:2px;
  margin:14px 0px 10px 2px;
  width:199px;
  height:20px;
  clear:all;
  clear:both;
}
.mybookdiv{
  font-size:0.9em;
}
.mybook{
  width:190px;
  padding:3px;
  margin-left:8px;
  background-color:white;
  border-bottom:1px dotted #ff81e9;
}
.mybook img{
  width:50px;
  height:50px;
  overflow:hidden;
}
#myfooter{
  background-image:url(http://moeten.info/image/hatena/footer_bg.jpg);
  background-repeat:no-repeat;
  background-color:white;
  text-align:center;
  padding:10px 0px 0px 0px;
  margin:0px;
  width:949px;
  height:40px;
}
#myfooter a{
  text-decoration:none;
}