記事部分の区切りが分かりにくいのでバックに色を入れてみることにした。
CSSを変更します。
■.blogの変更
.blog {
padding:0px 5px 50px 5px;
text-align:left;
font-family:Verdana;
}
BOXの下が開きすぎているようなので
padding:0px 5px 50px 5px;
を
padding:0px 15px 5px 15px;
に変更
background-color:#F3FFCC;
margin-bottom:20px;
border-top:2px solid #89C319;
border-bottom:2px solid #89C319;
を付け加えます。
日付の上のボーダーが邪魔になったのでとります。
■.dataの変更
.date{
font-family:Verdana;
font-size:10px;
clear:left;
color:#AFAFAF;
margin-top:0px;
margin-bottom:0px;
padding:12px 0px 25px 0px;
border-top:1px solid #D3D3D3;
}
border-top:1px solid #D3D3D3;
をとります。
padding:12px 0px 25px 0px;
を
padding:12px 0px 0px 0px;
に変更します。
■.titleの変更
.title{
margin-top:0px;
margin-bottom:0px;
font-weight:bold;
}
margin-top:0px;
を
margin-top:10px;
に変更します。
文字も大きくしたいので
font-size:14px;
を足します。
これは日付がない場合TOPとタイトルがくっつきすぎてしまうためです。
そこで .date 側のbottomのpaddingを少なくし、 .title 側のTOPのmarginを多くしました。
変更前
変更後
こうなりました。
完成も間近です。