IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

カテゴリー別にすべての記事一覧を表示する | 全カテゴリー別記事一覧ページ | はてなブログカスタマイズ

Photo by Iñaki del Olmo on Unsplash

Photo by Iñaki del Olmo on Unsplash

 

 

全カテゴリー別記事一覧ページ

※当カスタマイズは環境によっては正常に動作しない可能性があります。

カスタマイズ概要

はてなブログでは、記事一覧をカテゴリー別に表示するページが作られますが、一つのカテゴリーだけに対する記事の一覧です。当カスタマイズは、一つだけではなくすべてのカテゴリーを対象に、記事の一覧を表示するためのはてなブログカスタマイズです。

以前投稿した「【はてなブログ】カテゴリー別記事一覧のサイトマップページを作る |【カスタマイズ】 - IT the Best」の改良版となります。

こちらの「カテゴリー別アーカイブ - IT the Best」が当カスタマイズの処理を実装したページです。

期待できる効果

サイト内記事探索が一つのページで可能になるため、サイト訪問者が興味のある記事を容易に探しだすことができます

カテゴリーリストからでも特定の記事を探すことは可能ですが、記事のタイトルやサムネイル、記事概要を表示した記事一覧の方が詳細な情報を提供できるため記事の探索に効果的です。

サイト訪問者が興味のある記事を見つけ出すことができれば、アクセスにつながるため、サイト内回遊率向上に期待できます。

 

※ 当カスタマイズはjQueryを使用しています。jQueryの設置方法は「jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】 - IT the Best」をご覧ください。

埋め込みコード

全カテゴリー別記事一覧を表示するページのHTML記述欄にコチラのコードを設置します。DOMツリー構築後に処理が行われ、全カテゴリー別の記事一覧が表示されます。
スタイルは最低限必要とされるであろうものを設定してあります。

 

 カテゴリーを階層化している場合

当サイトに記載してあるカテゴリーの階層化を実装している場合は、こちらのコードを設置します。


 

 

カスタマイズ内容(一部)

全カテゴリーを取得する

カテゴリーリストからすべてのカテゴリーを取得します。

function get_allCategory() { // 全てのカテゴリーを取得
    var categoryList = [];
    let categories = $(".hatena-module-category .hatena-module-body>ul>li");
    categories.each(function (i, e) {
        var c_name = $(e).find(">a").text();
        try { // 先方、後方にある空白を消す
            c_name = c_name.replace(c_name.match(/(^[\s].*?)[\S]/)[1], "");
            c_name = c_name.replace(c_name.match(/[\S].*?([\s].*)$/)[1], "");
        } catch (error) { }
        c_name = c_name.replace(/ \([\d]*\)$/, "");
        categoryList.push(c_name);
    })
    return categoryList
}

 

 カスタマイズの対象
  • 記事一覧を表示するページにカテゴリーリストが表示されている
  • カテゴリーリストのHTML要素が以下のようになっている
    <div class="hatena-module hatena-module-category">
    <div class="hatena-module-title"></div>
    <div class="hatena-module-body">
    <ul class="hatena-urllist"></ul>
        </div>
    </div>
    カテゴリーをHTML要素のクラス"hatena-module-category hatena-module-body"内のulから取得しているためです。※おそらく、はてなブログで生成されるHTML要素は統一されていますが、異なる場合は正しいクラス名を指定してください。

 

 

カテゴリー別記事一覧を表示する

取得したカテゴリーごとに、記事一覧を取得し表示します。記事一覧の取得先は、はてなブログで元々用意されているカテゴリー別記事一覧ページから取得します。(http(s)://ドメイン/archive/category/カテゴリー名)

表示先は記事内になっています。("#main-inner article .entry-content")

function show_archive(categoryList) {
    let entry = $("#main-inner article .entry-content");
    entry.addClass("page-archive") // 記事一覧ページと同じスタイルにするためにクラスを追加
    for (const category of categoryList) {
        let url = location.origin + "/archive/category/" + category;
        $.ajax({
            type: "GET",
            url: url,
            dataType: "html",
        }).always((data) => {
            let entries = $($.parseHTML(data)).find(".archive-entries");
            // スタイル設定用のクラスを追加
            entries.addClass("ListPageByAllCategory-archive-entries");
            entry.append(entries); // エントリーに追加
            // タイトルの追加
            let title=$(document.createElement("div")).addClass("ListPageByAllCategory-archive-entries-title").text(category);
            entries.before(title);
        });
    }
}