サイト内の人気記事ランキングを超簡単に自動生成できる便利なサービス『Ranklet』

<aside class="ranklet ranklet-reset">
<div class="ranklet-wrapper">
{{#context.pages}}
<div class="ranklet-item">
<a href="{{url}}" class="ranklet-link">
{{#image}}
<figure class="ranklet-image"><img src="{{image}}" alt="{{psvr}}"></figure>
{{/image}}
<p class="ranklet-title">{{title}}</p>
<!-- /.ranklet-link --></a>
</div>
{{/context.pages}}
</div>
</aside>

#ranklet-{{context.id}} {
.ranklet-wrapper { counter-reset:ranklet-item; }
.ranklet-item {
position:relative;
margin:0 0 12px;
overflow:hidden;
cursor:pointer;
&:first-child:before {
width:40px;
height:40px;
font-size:16px;
line-height:2.5;
background:#ffd700;
content:counter(ranklet-item);
counter-increment:ranklet-item;
}
&:nth-child(2):before {
background:#c0c0c0;
content:counter(ranklet-item);
counter-increment:ranklet-item;
}
&:nth-child(3):before {
background:#c47222;
content:counter(ranklet-item);
counter-increment:ranklet-item;
}
&:before {
position:absolute;
top:0;
left:0;
width:30px;
height:30px;
font-family:sans-serif;
font-size:13px;
font-weight:700;
line-height:2.5;
color:#ffffff;
background:#ff2400;
text-align:center;
content:counter(ranklet-item);
counter-increment:ranklet-item;
z-index:10;
}
}
.ranklet-link {
display:block;
color:#4682b4;
overflow:hidden;
font-size:13px;
}
.ranklet-image {
float:left;
width:30%;
height:80px;
img {
width:100%;
height:auto;
}
}
.ranklet-title {
margin:0 0 0 18%;
padding-bottom:10px;
border-bottom:1px solid #ddd;
}
}
.ranklet-link a:link{color:#4682b4;}
.ranklet-link a:visited{color:#4682b4;}
.ranklet-link a:hover{text-decoration:none;color:#ff0000;}