iframe用 記事リストテンプレートサンプル
●メリット
・カテゴリごとにアイコンをつけられる
●デメリット
・iframeを使うということ（ここに引っかかる人は多数いるでしょう）
ソースはいたってシンプルです。
■ベーステンプレート
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<title>{site_title}</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="{site_css}" type="text/css" media="all" />
</head><body>
<div class="news">
<ul>
<!-- BEGIN entry -->
<li>
<span class="cat cat{category_id}">{category_disp_name}</span><span class="date">{entry_date}</span><span class="entry_title"><a href="{entry_permalink}" class="trimming">{entry_title}</a></span>
</li>
<!-- END entry -->
</ul>
</div>
</body>
</html>
■CSS
body {
margin: 0px;
padding: 0px;
text-align: left;
}
.news {
width:500px;
margin: 0px;
padding: 0px;
}.news ul {
font-size:12px;
margin: 0px;
line-height: 1.3;
text-align: left;
padding: 0px 7px 10px 7px;
width:500px;
}
html {
scrollbar-track-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#dadada;
}
.news ul li {
border-bottom: solid 1px #dadada;
padding-top: 6px;
padding-right: 0px;
margin: 0px;
height:23px;
_height:21px;
}
*:first-child+html .news ul li {
height:20px;
}
.news ul li span {
float:left;
padding: 0px 2px;
}
.entry_title {
padding: 0px 2px;
}
.date {
padding: 0px 2px;
}
.cat {
padding: 0px;
text-indent:-5000px;
background-position: 0px 0px;
background-repeat:no-repeat;
width:11px;
height:11px;
display:block;
}
.cat0 { background-image: url(img/i_tag.gif)}
.cat1 { background-image: url(img/i_tag.gif)}
.cat2 { background-image: url(img/i_tag.gif)}
.cat3 { background-image: url(img/i_tag.gif)}
.cat4 { background-image: url(img/i_tag1.gif)}
.cat5 { background-image: url(img/i_tag1.gif)}
.cat6 { background-image: url(img/i_tag1.gif)}
.cat7 { background-image: url(img/i_tag2.gif)}
.cat8 { background-image: url(img/i_tag2.gif)}
.cat9 { background-image: url(img/i_tag2.gif)}
.cat10 { background-image: url(img/i_tag3.gif)}
.cat11 { background-image: url(img/i_tag3.gif)}
.cat12 { background-image: url(img/i_tag3.gif)}
.cat13 { background-image: url(img/i_tag.gif)}
.cat14 { background-image: url(img/i_tag.gif)}
.cat15 { background-image: url(img/i_tag.gif)}
.cat16 { background-image: url(img/i_tag1.gif)}
.cat17 { background-image: url(img/i_tag1.gif)}
.cat18 { background-image: url(img/i_tag1.gif)}
.cat19 { background-image: url(img/i_tag2.gif)}
.cat20 { background-image: url(img/i_tag2.gif)}
.cat21 { background-image: url(img/i_tag2.gif)}
.cat22 { background-image: url(img/i_tag3.gif)}
.cat23 { background-image: url(img/i_tag3.gif)}
.cat24 { background-image: url(img/i_tag3.gif)}
.cat25 { background-image: url(img/i_tag.gif)}
.cat26 { background-image: url(img/i_tag.gif)}
.cat27 { background-image: url(img/i_tag.gif)}
.cat28 { background-image: url(img/i_tag1.gif)}
.cat29 { background-image: url(img/i_tag1.gif)}
.cat30 { background-image: url(img/i_tag1.gif)}
■使用しているアイコン画像
