2011.09.08

MovableTypeの月別アーカイブを年別に分けて表示させる。

このサイトの「Archives」およびフッターにある月別のアーカイブリンクを年別に分け、月を並べて表示させる省スペースなデザインにしてみました。

ソースは以下の通り、MTのテンプレート部とCSS部分それぞれを編集してください。 (尚、動作環境はMT4となっております。あらかじめご了承ください。)

【MovableType(月別アーカイブ)テンプレート】

<ul class="y-list"><MTArchiveList type="Yearly">
<li>
 
    <ul class="m-list">
    <li class="y-name"><MTArchiveDate format="%Y"></li>
    <MTArchiveList type="Monthly"><li><a href="<MTArchiveLink>"><MTArchiveDate format="%m"></a></li>
    </MTArchiveList><li class="end"></li>
    </ul>
 
</li>
</MTArchiveList></ul>

【CSS部】

.y-list li{
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	_height:15px;
	_overflow-y:hidden;
	}
.m-list li{
	margin:0 5px 0 0;
	padding:0;
	width:15px;
	float:left;
	display:inline;
	list-style:none;
	text-align:center;
	}
.m-list li.y-name{
	width:50px;
	font-weight:bold;
	text-align:right;
	}
.m-list li.end{
	clear:both;
	}

33kg.net