MacのFinderがイメージなので、2カラムにしてみた。
＜今日やった事＞
＜ソース：サイドバー＞
＜今日やった事＞
- サイドバーを設置。記事リストを右に、サイドバーを左に置く。
- 記事リストは改行なしで横にスクロールする感じで
- フッタ部の文字出力位置の微調整
- li要素に対するclass属性をボックスで囲み、white-spaceをnowrapにする（これでli要素がulよりはみ出る）
- ul要素の幅を決め、はみ出た部分はoverflow:autoで対応（これでスクロールバーが出る）
- フッタ部のheightとpaddingの値を調整（背景画像はpadding+contentの内容いっぱいに広がるため、paddingを設定したらheight、widthをその分引かなくてはいけないっぽい）
- RoundCornerで角丸画像を作成（幅750px、ヘッダ：高さ200px、フッタ：高さ100px）
<div class="contain">
<ul class="mainlist"><MTEntryImages lastn="20">
<li <MTIf name="__odd__"> class="oddli" <MTElse> class="evenli" </MTIf>>
<a class="clearfix" href="<$MTEntryPermalink$>"><span class="leftdata"><img src="<$MTEntryImageSrc$>"><$MTEntryTitle$></span>
<span class="rightdata"><$MTEntryModifiedDate$></span></a></li>
</MTEntryImages></ul>
<div class="contentleft">
<$mt:Include module="サイドバー"$>
</div>
</div>
＜ソース：サイドバー＞
<$mt:WidgetSet name="実験用"$>/* 記事が表示される部分 */
.contain {
width:750px;
height:400px;
margin:0;
padding:0;
background-color:#ffffff;
color:#000000;
}
/* メインページのリスト */
.mainlist{
font-family:Osaka,"MS Pゴシック",sans-serif;
font-size:11pt;
font-weight:normal;
text-decolation:none;
line-height:normal;
background-color:#ffffff;
list-style-type:none; /* リストの装飾を消す */
overflow:auto;
width:550px;
height:100%;
float:right;
}
/* リスト奇数番目の背景 */
.oddli{
display:block;
width:750px;
background-color:#ffffff;
white-space:nowrap;
}
/* リスト偶数番目の背景 */
.evenli{
display:block;
width:750px;
background-color:#ecf3fe;
white-space:nowrap;
}
.oddli img,.evenli img{
padding-top:0,2em;
border:none;
vartical-align:bottom;
width:1em;
float:left;
}
.rightdata{
display:block;
float:right;
}
.leftdata{
display:block;
float:left;
}
/* メインページのリストのアンカーのスタイル */
.mainlist a:link, .mainlist a:visited{
display:block; /* 塗りつぶす */
width:100%;
padding-left:0.5em; /* 左側にちょっと間を空ける */
color:#000000; /* 文字色 */
text-decoration:none; /* 文字の装飾なし */
}
.mainlist a:hover, .mainlist a:active{
display:block;
width:100%;
color:#ffffff; /* マウスが乗ったら色を反転 */
padding-left:0.5em;
background-color:#0000ff; /* マウスが乗ったら色を反転 */
text-decoration:none;
}
/* サイドバー */
.contentleft{
width:200px;
height:100%;
float:left;
background-color:#d6dde5;
overflow:auto;
}
/* cleqarfix */
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */
/* フッタ部（なんかいろいろ）の部分 */
.footer{
clear:both;
height:80px;
margin:0;
padding-top:20px; /* これがあると画像が縦に横に繰り返される */
text-align:center;
background-image:url(./images/foot.png); /* 画像の設定 */
background-repeat:no-repeat; /* 画像を敷き詰めない */
background-color:#333333;
border-top:solid 1px #000000;
}
.footer p{
color:#000000;
}
- 記事リストの末尾に空行が出力されてしまう。スクロールバーの仕様？
- サイドバーのレイアウトをきちんとする
- サイドバーを折り畳めるようにする
- フッタにナビゲーションバーを設置
- ヘッダの内容が表示内容（インデックス、記事リスト、アーカイブ）で変わるようにする
- ヘッダに画像のサムネイルを置く
リンク