FC2ブログをやっているのですが、カテゴリごとのランダムページを作りたいです。


JavaScriptは動くのですが、PHPなどのサーバサイドのものは使えないです、
あるいは、ユーザタグごとでもいいのですが、なにか方法はないでしょうか?

したいことしては、ランダム記事のページに行くと、
カテゴリ事に記事へのりんくが表示される



-----------------------------------------
ランダム表示ページ


肉料理のカテゴリ
・子羊のソテー
・子牛のあぶり焼き

魚料理のカテゴリ
・うなぎの蒲焼
・刺し身



--------------------------------------

こんなふうにしたいのですがよろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/12/18 03:40:11
  • 終了:2013/12/24 17:59:32

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4557ベストアンサー獲得回数19032013/12/18 15:52:05

ポイント500pt

記事一覧の URL に特別な指定を付けたときに、カテゴリ別に記事をいくつかランダムに抽出して表示するようなスクリプトを仕込んでみました。

まずは、見た目から。

※記事一覧の 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;
}
他1件のコメントを見る
id:a-kuma3

blog-category-1とblog-category-2
だけを表示させるにはどうしたらいいでしょうか?

こんな感じでやります。

        var target = $(".content").get(0)
        target.innerHTML = ""
        var ul = document.createElement("UL");
        for (var i in cate) {
            // ★ここからの 3行を追加
            if (! /blog-category-[12]/.exec(cate[i].cate.href)) {
                continue;
            }
            var li = document.createElement("LI");
            ul.appendChild(li)
            li.appendChild(cate[i].cate)

カテゴリのリストを作るループで、意図しないカテゴリの場合にはリストを作成するロジックをスキップする感じです。

2013/12/21 22:01:29
id:snoopy_japan

ありがとうございます、たすかります

2013/12/24 17:59:22

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません