Photo by Iñaki del Olmo on Unsplash
www.it-the-best.com
全カテゴリー別記事一覧ページ
※当カスタマイズは環境によっては正常に動作しない可能性があります。
カスタマイズ概要
はてなブログでは、記事一覧をカテゴリー別に表示するページが作られますが、一つのカテゴリーだけに対する記事の一覧です。当カスタマイズは、一つだけではなくすべてのカテゴリーを対象に、記事の一覧を表示するためのはてなブログカスタマイズです。
以前投稿した「【はてなブログ】カテゴリー別記事一覧のサイトマップページを作る |【カスタマイズ】 - IT the Best」の改良版となります。
こちらの「カテゴリー別アーカイブ - IT the Best」が当カスタマイズの処理を実装したサイトマップページです。
期待できる効果
サイト内記事探索が一つのページで可能になるため、サイト訪問者が興味のある記事を容易に探しだすことができます。
カテゴリーリストからでも特定の記事を探すことは可能ですが、記事のタイトルやサムネイル、記事概要を表示した記事一覧の方が詳細な情報を提供できるため記事の探索に効果的です。
サイト訪問者が興味のある記事を見つけ出すことができれば、アクセスにつながるため、サイト内回遊率向上に期待できます。
※ 当カスタマイズはjQueryを使用しています。jQueryの設置方法は「jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】 - IT the Best」をご覧ください。
埋め込みコード
全カテゴリー別記事一覧を表示するページのHTML記述欄にコチラのコードを設置します。DOMツリー構築後に処理が行われ、全カテゴリー別の記事一覧が表示されます。
スタイルは最低限必要とされるであろうものを設定してあります。
<script>
class ListPageByAllCategory {
static run() {
let c = this.get_allCategory();
this.show_archive(c);
this.set_Style();
}
static 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
}
static 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);
});
}
}
static set_Style() {
$("head").append( // 横並びリストにするためのスタイル
$(document.createElement("style")).html("\
.ListPageByAllCategory-archive-entries{\n\
display: flex;white-space: nowrap;overflow: auto;\n\
}\
")
)
$("head").append( // 独自スタイル
$(document.createElement("style")).html("\
.ListPageByAllCategory-archive-entries-title{\n\
font-size: large;\n\
font-weight: 600;\n\
margin:3em 0 2px 1em;\n\
}\n\
.ListPageByAllCategory-archive-entries section{\n\
min-width:100%;\n\
}\n\
.ListPageByAllCategory-archive-entries .archive-entry-body,\n\
.ListPageByAllCategory-archive-entries .entry-title,\n\
.ListPageByAllCategory-archive-entries .categories{\n\
white-space: normal;\n\
}\
")
)
}
}
$(function () {
ListPageByAllCategory.run()
})
</script>
カテゴリーを階層化している場合
当サイトに記載してあるカテゴリーの階層化を実装している場合は、こちらのコードを設置します。
階層の一番上のカテゴリーのみを対象に記事一覧が作成されます。
<script>
class ListPageByAllCategory {
static run() {
let c = this.get_allCategory();
this.show_archive(c);
this.set_Style();
}
static 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
}
static show_archive(categoryList, completedHandler) {
let entry = $("#main-inner article .entry-content");
entry.addClass("page-archive"); // 記事一覧ページと同じスタイルにするためにクラスを追加
var completeCount = 0
for (const category of categoryList) {
let url = location.origin + "/archive/category/" + category;
let ajax=$.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);
});
ajax.done(function () {
completeCount += 1;
if (completeCount == categoryList.length) {
completedHandler();
}
})
}
}
static set_Style() {
$("head").append( // 横並びリストにするためのスタイル
$(document.createElement("style")).html("\
.ListPageByAllCategory-archive-entries{\n\
display: flex;white-space: nowrap;overflow: auto;\n\
}\
")
)
$("head").append( // 独自スタイル
$(document.createElement("style")).html("\
.ListPageByAllCategory-archive-entries-title{\n\
font-size: large;\n\
font-weight: 600;\n\
margin:3em 0 2px 1em;\n\
}\n\
.ListPageByAllCategory-archive-entries section{\n\
min-width:100%;\n\
}\n\
.ListPageByAllCategory-archive-entries .archive-entry-body,\n\
.ListPageByAllCategory-archive-entries .entry-title,\n\
.ListPageByAllCategory-archive-entries .categories{\n\
white-space: normal;\n\
}\
")
)
}
}
class ListPageByAllCategoryforHierarchyCategory extends ListPageByAllCategory {
static run() {
let c = this.Exclude_HierarchyCategory(this.get_allCategory());
this.show_archive(c, this.hiddenHierarchyCategory);
this.set_Style();
}
static Exclude_HierarchyCategory(categoryList) { // 階層カテゴリーの除外
var NEWcategoryList = [];
for (const category of categoryList) {
let c = this.sortingCategory(category);
if (c.length > 1 && !NEWcategoryList.includes(c[0])) {
NEWcategoryList.push(c[0]);
}
}
return NEWcategoryList
}
static sortingCategory(category) { // カテゴリーを仕分けする
var csList = [], cs = ""
var flag = true
for (var s of category) {
if (s == "'" || s == '"') {
flag = !flag
}
if (flag && s === "-") {
csList.push(cs)
cs = ""
} else {
cs = cs + s
}
}
csList.push(cs)
return csList
}
static hiddenHierarchyCategory() { // 階層化カテゴリーを非表示にする
$(".ListPageByAllCategory-archive-entries [class*='category-']").each(function (index, element) {
var category_name = element.className.match(/ category-(.*)/)[1];
var category_list = ListPageByAllCategoryforHierarchyCategory.sortingCategory(category_name);
if (element.tagName !== "BODY" && category_list.length > 1) {
element.style.display = "none"; // 階層化カテゴリーを非表示にする
}
})
}
}
$(function () {
ListPageByAllCategoryforHierarchyCategory.run()
})
</script>
カスタマイズ内容(一部)
全カテゴリーを取得する
カテゴリーリストからすべてのカテゴリーを取得します。
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
}
カテゴリー別記事一覧を表示する
取得したカテゴリーごとに、記事一覧を取得し表示します。記事一覧の取得先は、はてなブログで元々用意されているカテゴリー別記事一覧ページから取得します。(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);
});
}
}
IT the Best
