前回の記事エリアの構成
を基にいろいろいじってみようと思います。
まず全体的に背景を設定します。
.entry{
background:url(背景の画像) repeat-y;
}背景は横に長細い画像を縦（y）方向にリピートさせます。
リピートさせるので高さは1pxでも良いのですが、なぜかアップロード出来なかったので10pxで作りました。
そして「テーマ：○○」のところ
.theme{
display:block;
width:300px;
float:right;
text-align:right;
padding-right:20px;
line-height:30px;
font-size:10px;
}ここはspanタグなのでdisplay:block;でブロック要素にしてfloat:right;で右に寄せてます。
.entry_head{
width:300px;
float:left;
line-height:30px;
text-indent:10px;
font-size:10px;
}日付のところは左に寄せてテーマと並ぶように配置してます。
h3.title{
clear:both;
padding:0 0 10px;
margin:0 20px 0 10px;
color:#2b2b33;
font-size:18px;
font-weight:bold;
line-height:110%;
background:url(ドットの画像) repeat-x bottom;
}記事のタイトル部分はmarginとpaddingを使って位置を調整しています。
背景は10px×10pxのドットの画像を一番下に横(x)方向にリピートさせてます。
上のテーマと日付でfloatを使ったのでclear:both;で解除します。
記事本文のところは
.entry .contents{
padding:10px 20px 10px 10px;
}
.entry p{
margin:0 0 20px;
}
.entry h4{
color:#339;
font-size:16px;
line-height:24px;
}こんな感じで微調整。よく使うであろうh4(小見出し)とp(段落)だけとりあえず…
他の要素はまた必要な時に…
google広告の場所もちょっといじりたかったのですが「禁止セレクタ」らしく出来ませんでした。
最後に記事フッター（記事URLとかコメントとかのリンクがあるところ）です。
.entry .foot{
background: #f2f2ee url(画像のURL) no-repeat;
padding:20px 10px 20px;
text-align:right;
}そのままでもいいんですが、やはりひと記事づつ区切りを付けた方が見やすいのと、元々そういうデザインなので上記CSSを書きました。
で、ここまでがこれです。
もうほぼ完成です。
次回はメッセージボードをいじってTOPページっぽくします。