03
16
テンプレート2、3 - サイトマップをカテゴリ別に表示
テンプレート2と3のヘッダーナビに表示されているsitemapですが、そのままだと記事が新しい順に並んでいるだけです。これでは見にくいと思われる方もいるのではないでしょうか?そこでカテゴリ別に並べ替えることもできます。
じゃあ最初からカテゴリ別にしないのかと思われるかもしれませんが、カテゴリ名を各自入力しないといけないのでできませんでした。で、実際設置したものはこちらをご覧ください。
これならすっきりしていて見やすいかと思います。変更するにはテンプレートの<!--▼サイトマップ▼-->以下を下記のように変更する必要があります。
<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="menu_outline3">
<div class="sitemap_teitle">カテゴリ別サイトマップ</div>
<div class="menu_cont3">
<div id="maplist">
<ul><!--titlelist--><li>
<span><%titlelist_category></span>
<a href="<%titlelist_url>"><%titlelist_title></a></li>
<!--/titlelist--></ul>
</div><!--/maplist-->
</div><!--/menu_cont3-->
</div><!--/menu_outline3-->
<script type="text/javascript"><!--
var A=document.getElementById('maplist').getElementsByTagName('A');
var S=document.getElementById('maplist').getElementsByTagName('span');
var C=new Array(); var I=""; var Flg=false;
/*--- カテゴリ名を記述 ---*/
C[0]="カテゴリ名1";
C[1]="カテゴリ名2";
C[2]="カテゴリ名3";
C[3]="カテゴリ名4";
C[4]="カテゴリ名5";
C[5]="カテゴリ名6";
/*------------------------*/
for (i=0;i<C.length;i++) {
Flg=false;
I=I+'<p><b>【 '+C[i]+' 】</b></p><ul>';
for (j=0;j<S.length;j++) {
if (C[i]==S[j].innerHTML) {
if (Flg==true) {
I+='<li><a href="'+A[k].href+'">'+A[k].innerHTML+'</a></li>';}
k=j;Flg=true;}}
I+='<li class="end"><a href="'+A[k].href+'">'+A[k].innerHTML+'</a></li>';
I+='</ul><br />';}
document.getElementById('maplist').innerHTML=I;
--></script>
<!--/titlelist_area-->
<!--▲サイトマップ▲-->
カテゴリ名は実際ブログにあるものを入力し、カテゴリ数は自由に追加できます。このままでは記事名だけしか表示されませんので、記事の表示方法を解説します。ポイントは赤で表示している部分です。
<a href="<%titlelist_url>"><%titlelist_title>(<%titlelist_month>/<%titlelist_day>)</a>
例えば上記のように変更すると下記のように投稿日付が表示されます。
記事タイトル(3/16)
表示方法は下記のタグを組み合わせると自由に変更できます。
<%titlelist_year> - 年 <%titlelist_month> - 月 <%titlelist_day> - 日 <%titlelist_hour> - 時 <%titlelist_minute> - 分 <%titlelist_second> - 秒 <%titlelist_youbi> - 曜日 <%titlelist_wayoubi> - 和曜日
















