1 テンプレートモジュールを作成します。
(テンプレート名:NEW ENTRIES)
<div id=”newentrys”>
<h2 id=”newentryname” class=”navi-title”>NEW ENTRIES</h2>
<div id=”newentrylist” class=”navi-contents” >
<ul class=”tree”>
<MTEntries lastn=”5″>
<li class=”tree<MTEntriesFooter>_end</MTEntriesFooter>”><a href=”<$MTEntryPermalink$>”><$MTEntryTitle$></a> <$MTEntryDate format=”(%m/%d)”$> <?php newlink(‘<$MTEntryDate format=”%Y/%m/%d %H:%M:%S”$><$MTBlogTimeZone$>’, ‘1’); ?></li>
</MTEntries>
</ul>
</div>
</div>
<div id=”newentrys”>
<h2 id=”newentryname” class=”navi-title”>NEW ENTRIES</h2>
<div id=”newentrylist” class=”navi-contents” >
<ul class=”tree”>
<MTEntries lastn=”5″>
<li class=”tree<MTEntriesFooter>_end</MTEntriesFooter>”><a href=”<$MTEntryPermalink$>”><$MTEntryTitle$></a> <$MTEntryDate format=”(%m/%d)”$> <?php newlink(‘<$MTEntryDate format=”%Y/%m/%d %H:%M:%S”$><$MTBlogTimeZone$>’, ‘1’); ?></li>
</MTEntries>
</ul>
</div>
</div>
2 ブログのメインページに次のコードを追加します。
<$mt:Include module=”NEW ENTRIES”$>
3 スタイルシートに次のコードを追加します。
#newentrys {
border: 1px solid #ccc;
background-color: #FDFDFD;
padding: 5px 10px 15px;
margin: 0px 0px 15px 0px;
background-image: url(画像1URL);
background-repeat: repeat-x;
font-size: 13px;
background-position: left top;
}
#newentryname {
margin: 0px 0px 7px;
padding: 0px 0px 3px;
color: #333333;
background-image: none;
text-indent: 0px;
border-bottom: 1px dashed #CCCCCC;
border-top-style: none;
border-right-style: none;
border-left-style: none;
background-color: transparent;
}
#newentrylist {
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: none;
background-color: transparent;
}
#newentrys ul {
color: #999999;
padding: 0px;
margin: 0px 0px 0px 22px;
}
ul.tree li {
margin: 0px;
padding: 0 0 0 17px;
background: url(画像2URL) no-repeat 1px 0.15em;
list-style: none;
}
border: 1px solid #ccc;
background-color: #FDFDFD;
padding: 5px 10px 15px;
margin: 0px 0px 15px 0px;
background-image: url(画像1URL);
background-repeat: repeat-x;
font-size: 13px;
background-position: left top;
}
#newentryname {
margin: 0px 0px 7px;
padding: 0px 0px 3px;
color: #333333;
background-image: none;
text-indent: 0px;
border-bottom: 1px dashed #CCCCCC;
border-top-style: none;
border-right-style: none;
border-left-style: none;
background-color: transparent;
}
#newentrylist {
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: none;
background-color: transparent;
}
#newentrys ul {
color: #999999;
padding: 0px;
margin: 0px 0px 0px 22px;
}
ul.tree li {
margin: 0px;
padding: 0 0 0 17px;
background: url(画像2URL) no-repeat 1px 0.15em;
list-style: none;
}
画像1URL 画像2URL
(参考記事)
小粋空間:サイドメニューのツリー化スクリプト(改)
MY CSS DESIGN:ヒヨコ君増殖中テンプレートTOPリストカスタマイズ
コメントはこちら