記事一覧の URL に特別な指定を付けたときに､ｶﾃｺﾞﾘ別に記事をいくつかﾗﾝﾀﾞﾑに抽出して表示するようなｽｸﾘﾌﾟﾄを仕込んでみました｡

まずは､見た目から｡

• 普通の記事一覧
  http://jimsie.blog57.fc2.com/archives.html
• ｶﾃｺﾞﾘ別にﾗﾝﾀﾞﾑに記事を抽出
  http://jimsie.blog57.fc2.com/archives.html?random=true

※記事一覧の archives.html のお尻に ?random=true を付けたときにだけ､ｽｸﾘﾌﾟﾄがうごくようにしています｡



記事一覧の HTML を加工して作っているので､使っているﾃﾝﾌﾟﾚｰﾄによって､微妙にｺｰﾄﾞを書き分けてあげる必要があります｡
ぼくが使っているﾃﾝﾌﾟﾚｰﾄは mushroom_liquid というやつなのですが､記事一覧の部分はこんな感じになっています｡

 <!--titlelist_area-->
<div class="content">
<p class="sub_header">title list</p>
<!--titlelist-->
<div class="list_body">
<%titlelist_year>/<%titlelist_month>/<%titlelist_day> : <a href="<%titlelist_category_url>" title="<%template_view_category>"><%titlelist_category></a> : <h2 class="listtitle"><a href="<%titlelist_url>" title="<%titlelist_body>"><%titlelist_title></a></h2>
</div>
<!--/titlelist-->
 <div class="pagetop"><a href="#container" title="<%template_go_top>">@</a></div>
</div>
 <!--/titlelist_area-->

これを踏まえて､ﾃﾝﾌﾟﾚｰﾄで HTML に二ヶ所､ｽﾀｲﾙｼｰﾄに一ヶ所､ｺｰﾄﾞを追加しました｡

まずは､HTML の一ヶ所目｡
jQuery を使っているので､それの読み込みです｡
head のﾌﾞﾛｯｸの最後に､ｺﾒﾝﾄ抜きで一行追加しました｡

<!-- jquery -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

次は､HTML の二ヶ所目で､ｽｸﾘﾌﾟﾄの本体です｡
titlelist_area の最後の方に､javascript のｺｰﾄﾞをどかんと追加です｡

<script type="text/javascript">
$(function() {

 var N = 2; /* 表示する記事の件数 */

 if (document.location.search.indexOf("random=true") < 0) {
 return;
 }

 function pickup(list, n) {
 if (list.length <= n) {
 return list.slice();
 }
 var ret = []
 for (var i = 0 ; i < n ; ++i) {
 var idx = Math.floor(Math.random() * list.length);
 ret.push(list[idx]);
 list.splice(idx, 1);
 }
 return ret;
 }

 var cate = [];
 /* ★ この辺りが､使っているﾃﾝﾌﾟﾚｰﾄによって違ってくる */
 $(".content DIV.list_body").each(function() {
 var link = $("A", this);
 var c = link.get(0);
 var u = link.get(1);
 var list = cate[c.innerHTML];
 if (! list) {
 list = [];
 cate[c.innerHTML] = list;
 cate[c.innerHTML].cate = c;
 }
 list.push(u);
 })

 var target = $(".content").get(0);
 target.innerHTML = "";
 var ul = document.createElement("UL");
 for (var i in cate) {
 var li = document.createElement("LI");
 ul.appendChild(li);
 li.appendChild(cate[i].cate);
 li.className = "randomlist_category";
 var ul2 = document.createElement("UL");
 li.appendChild(ul2);
 var list = cate[i];
 sub = pickup(list, N);
 for (var j in sub) {
 var li2 = document.createElement("LI");
 ul2.appendChild(li2);
 li2.appendChild(sub[j]);
 li2.className = "randomlist_item";
 }
 }

 target.appendChild(ul);

});
</script>

ｽﾀｲﾙｼｰﾄの最後に以下を追加します｡

li.randomlist_category {
 list-style-type : square;
 list-style-position : outside;
 margin-left : 3ex;
}
li.randomlist_item {
 list-style-type : circle;
 list-style-position : outside;
 margin-left : 3ex;
}