HTML サイトマップウィジェット (2022/07/10 一部を改良したコードを公開しました)

2024/10/0515
アイキャッチ

こちらの My Blogger Lab で紹介されているウィジェットを日本語化しました。

ファビコンMy Blogger Lab
サムネイル
How to Add an HTML Sitemap Page in Blogger
Want to create a sitemap page with links to all the pages on your Blogger site? Learn how to easily add an HTML sitemap page in Blogger in this guide
https://www.mybloggerlab.com/2016/08/how-to-add-html-sitemap-page-in-blogger.html
サイトマップ
CONTENTS

このウィジェットについて

  • このウィジェットは投稿済みの全記事が投稿日昇順で表示されますが、デフォルトで表示するラベルを選択できます。
  • コードのこの部分を書き換えて下さい。
    var postFilter = 'ラベル名';             // デフォルトで表示するラベル名

  • ナビゲーションの  [記事タイトル]  をクリックすると名前昇順・降順に。[投稿日]  をクリックで投稿日昇順・降順にそれぞれ並べ替えできます。
  • 各ラベル名をクリックで絞り込み表示されます。
  •  [ラベル]  をクリックで全記事表示に戻ります。

スクリプトコードの設置

サイトマップ用の固定ページを作成し、HTML 編集モードにして以下のコードをコピペして下さい。

<div id="bp_toc">読込中...</div>
<script type="text/javascript">
// ---------------------------------------------------
// BLOGTOC
// ---------------------------------------------------
// BlogToc creates a clickable Table Of Contents for
// Blogger Blogs.
// It uses the JSON post feed, and create a ToC of it.
// The ToC can be sorted by title or by date, both
// ascending and descending, and can be filtered by
// label.
// ---------------------------------------------------
// Author: Syed Faizan Ali
// Url: https://www.mybloggerlab.com
// Version: 2
// Date: 2007-04-12
// ---------------------------------------------------
// Japanese Localization by Fujiyan.
// Url: https://fujilogic.blogspot.com/2019/05/sitemap.html
// ---------------------------------------------------
// global arrays
var postTitle = new Array(); // array of posttitles
var postUrl = new Array(); // array of posturls
var postDate = new Array(); // array of post publish dates
var postSum = new Array(); // array of post summaries
var postLabels = new Array();// array of post labels
// global variables
var sortBy = "datenewest"; // default value for sorting ToC
var tocLoaded = false; // true if feed is read and ToC can be displayed
var numChars = 250; // マウスオン時にツールチップ表示する概要文字数
var postFilter = ''; // デフォルトで表示するラベル名
var tocdiv = document.getElementById("bp_toc"); //the toc container
var totalEntires =0; //Entries grabbed till now
var totalPosts =0; //Total number of posts in the blog.
// main callback function
function loadtoc(json) {
function getPostData() {
// this functions reads all postdata from the json-feed and stores it in arrays
if ("entry" in json.feed) {
var numEntries = json.feed.entry.length;
totalEntires = totalEntires + numEntries;
totalPosts=json.feed.openSearch$totalResults.$t
if(totalPosts>totalEntires)
{
var nextjsoncall = document.createElement('script');
nextjsoncall.type = 'text/javascript';
startindex=totalEntires+1;
nextjsoncall.setAttribute("src", "/feeds/posts/summary?start-index=" + startindex + "&max-results=50&alt=json-in-script&callback=loadtoc");
tocdiv.appendChild(nextjsoncall);
}
// main loop gets all the entries from the feed
for (var i = 0; i < numEntries; i++) {
// get the entry from the feed
var entry = json.feed.entry[i];
// get the posttitle from the entry
var posttitle = entry.title.$t;
// get the post date from the entry
var postdate = entry.published.$t.substring(0,10).replace(/-/g,"/");
// get the post url from the entry
var posturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
// get the post contents from the entry
// strip all html-characters, and reduce it to a summary
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
// strip off all html-tags
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
// reduce postcontent to numchar characters, and then cut it off at the last whole word
if (postcontent.length > numChars) {
postcontent = postcontent.substring(0,numChars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd) + '...';
}
// get the post labels from the entry
var pll = '';
if ("category" in entry) {
for (var k = 0; k < entry.category.length; k++) {
pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\');" title="ラベル 「' + entry.category[k].term + '」 の記事を表示">' + entry.category[k].term + '</a>, ';
}
var l = pll.lastIndexOf(',');
if (l != -1) { pll = pll.substring(0,l); }
}
// add the post data to the arrays
postTitle.push(posttitle);
postDate.push(postdate);
postUrl.push(posturl);
postSum.push(postcontent);
postLabels.push(pll);
}
}
if(totalEntires==totalPosts) {tocLoaded=true;showToc();}
} // end of getPostData
// start of showtoc function body
// get the number of entries that are in the feed
// numEntries = json.feed.entry.length;
// get the postdata from the feed
getPostData();
// sort the arrays
sortPosts(sortBy);
tocLoaded = true;
}
// filter and sort functions
function filterPosts(filter) {
// This function changes the filter
// and displays the filtered list of posts
// document.getElementById("bp_toc").scrollTop = document.getElementById("bp_toc").offsetTop;;
postFilter = filter;
displayToc(postFilter);
} // end filterPosts
function allPosts() {
// This function resets the filter
// and displays all posts
postFilter = '';
displayToc(postFilter);
} // end allPosts
function sortPosts(sortBy) {
// This function is a simple bubble-sort routine
// that sorts the posts
function swapPosts(x,y) {
// Swaps 2 ToC-entries by swapping all array-elements
var temp = postTitle[x];
postTitle[x] = postTitle[y];
postTitle[y] = temp;
var temp = postDate[x];
postDate[x] = postDate[y];
postDate[y] = temp;
var temp = postUrl[x];
postUrl[x] = postUrl[y];
postUrl[y] = temp;
var temp = postSum[x];
postSum[x] = postSum[y];
postSum[y] = temp;
var temp = postLabels[x];
postLabels[x] = postLabels[y];
postLabels[y] = temp;
} // end swapPosts
for (var i=0; i < postTitle.length-1; i++) {
for (var j=i+1; j<postTitle.length; j++) {
if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
}
}
} // end sortPosts
// displaying the toc
function displayToc(filter) {
// this function creates a three-column table and adds it to the screen
var numDisplayed = 0;
var tocTable = '';
var tocHead1 = 'タイトル';
var tocTool1 = 'タイトル順に並べ替え';
var tocHead2 = '投稿日';
var tocTool2 = '投稿日順に並べ替え';
var tocHead3 = 'ラベル';
var tocTool3 = '';
if (sortBy == "titleasc") {
tocTool1 += ' (降順)';
tocTool2 += ' (昇順)';
}
if (sortBy == "titledesc") {
tocTool1 += ' (昇順)';
tocTool2 += ' (昇順)';
}
if (sortBy == "dateoldest") {
tocTool1 += ' (昇順)';
tocTool2 += ' (昇順)';
}
if (sortBy == "datenewest") {
tocTool1 += ' (昇順)';
tocTool2 += ' (降順)';
}
if (postFilter != '') {
tocTool3 = '全ての記事を表示';
}
tocTable += '<table>';
tocTable += '<tr>';
tocTable += '<td class="toc-header-col1">';
tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col2">';
tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col3">';
tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>';
tocTable += '</td>';
tocTable += '</tr>';
for (var i = 0; i < postTitle.length; i++) {
if (filter == '') {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
numDisplayed++;
} else {
z = postLabels[i].lastIndexOf(filter);
if ( z!= -1) {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
numDisplayed++;
}
}
}
tocTable += '</table>';
if (numDisplayed == postTitle.length) {
var tocNote = '<span class="toc-note">全 ' + postTitle.length + ' 件の記事を表示中<br/></span>';
}
else {
var tocNote = '<span class="toc-note">全 '+ postTitle.length + ' 件中 ラベル「<b>';
tocNote += postFilter + '</b>」の ' + numDisplayed + ' 件の記事を表示中<br/></span>';
}
tocdiv.innerHTML = tocNote + tocTable;
} // end of displayToc
function toggleTitleSort() {
if (sortBy == "titleasc") { sortBy = "titledesc"; }
else { sortBy = "titleasc"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function toggleDateSort() {
if (sortBy == "datenewest") { sortBy = "dateoldest"; }
else { sortBy = "datenewest"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function showToc() {
if (tocLoaded) {
displayToc(postFilter);
var toclink = document.getElementById("toclink");
}
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&amp;max-results=50&amp;callback=loadtoc" type="text/javascript"></script>
<style>
#bp_toc {
margin: 0 auto 2em;
padding: 0;
width: 100%;
}
#bp_toc tbody {
border-bottom: 1px solid #ddd;
}
#bp_toc table {
width: 100%;
margin: 0 auto;
counter-reset: rowNumber;
border-collapse: collapse;
border-left: 1px solid #ddd;
}
#bp_toc td:not(.toc-entry-col3),
#bp_toc tr {
border-right: 1px solid #ddd;
}
.toc-note {
line-height: 1.5em;
margin-bottom: 1em;
display: block;
text-align: center;
}
#bp_toc tr:nth-child(2n) {
background: rgba(0,80,200,.1);/*奇数行の背景色*/
}
.toc-entry-col1 a:hover {
background: rgba(0,80,200,.2);/*タイトルホバー時の背景色*/
text-decoration: none!important;
}
#bp_toc table tr:first-child a {/*ナビゲーション*/
background: #bbb;
color: #fff!important;
font-weight: bold;
text-align: center;
padding: 5px 0;
display: block;
width: 100%;
border-top: 1px solid #ddd;
}
#bp_toc table tr:first-child a:hover {
opacity: .8;
text-decoration: none;
}
.toc-header-col1 {
width: 55%;/*タイトル(番号含む)枠の幅*/
}
.toc-header-col2 {
width: 12%;/*投稿日枠の幅*/
}
.toc-header-col3 {
width: 33%;/*ラベル枠の幅*/
}
#bp_toc table tr td.toc-entry-col1:first-child::before {
content: counter(rowNumber);
width: 2.6em;/*記事番号枠の幅*/
text-align: center;
padding: 12px 3px 0;
border-right: 1px solid #ddd;
}
.toc-entry-col1 {/*記事番号*/
display: flex;
counter-increment: rowNumber;
font-size: 12px;
line-height: 1.5em;
}
.toc-entry-col1 a {/*タイトル*/
display: block;
height: 100%;
width: 100%;
font-size: 14px;
font-weight: bold;
padding: 10px .5em 10px;
line-height: 1.3em;
color: inherit!important;
}
.toc-entry-col2 {/*投稿日*/
font-size: 13px;
text-align: center;
}
.toc-entry-col3 {/*ラベル*/
font-size: 13px;
padding: 5px;
line-height: 1.5em;
}
</style>

2022/07/10 追記: 一部の UI を改善してみました

ラベル名をクリックして絞り込み表示されている状態から再び全記事表示に戻すには、もう一度ナビゲーションの [ラベル] ボタンをクリックすればいいのですが、この UI ってちょっと分かりづらいと思いませんか?

ボタンの表示は常に [ラベル] だし、マウスホバーしないと「全ての記事を表示」というツールチップが出ないですからね。特にスマホユーザーには不親切な UI だと思います。

というわけで、当該箇所のコードを弄ってこんな UI にしてみました。

改良後のサイトマップウィジェット

[ラベル] ボタンのリンクを無効にして、表示を [ラベルを選択]に変更。ステータス表示の下に解除(全記事表示に戻す)リンクを置きました。(実際の操作は当ブログのサイトマップでお試しください)

だいぶ分かりやすくなったと思いますが、如何でしょう?

以下が改良版のコードですので、宜しければお使いください。当ブログのようにリンク部分をボタン風にカスタマイズしたい方は
.toc-note a/*全記事表示に戻すリンク*/ の下の所にコードを入れてください。

<div id="bp_toc">読込中...</div>
<script type="text/javascript">
// ---------------------------------------------------
// BLOGTOC
// ---------------------------------------------------
// BlogToc creates a clickable Table Of Contents for
// Blogger Blogs.
// It uses the JSON post feed, and create a ToC of it.
// The ToC can be sorted by title or by date, both
// ascending and descending, and can be filtered by
// label.
// ---------------------------------------------------
// Author: Syed Faizan Ali
// Url: https://www.mybloggerlab.com
// Version: 2
// Date: 2007-04-12
// ---------------------------------------------------
// Japanese Localization by Fujiyan.
// Url: https://fujilogic.blogspot.com/2019/05/sitemap.html
// ---------------------------------------------------
// global arrays
var postTitle = new Array(); // array of posttitles
var postUrl = new Array(); // array of posturls
var postDate = new Array(); // array of post publish dates
var postSum = new Array(); // array of post summaries
var postLabels = new Array();// array of post labels
// global variables
var sortBy = "datenewest"; // default value for sorting ToC
var tocLoaded = false; // true if feed is read and ToC can be displayed
var numChars = 250; // マウスオン時にツールチップ表示する概要文字数
var postFilter = ''; // デフォルトで表示するラベル名
var tocdiv = document.getElementById("bp_toc"); //the toc container
var totalEntires =0; //Entries grabbed till now
var totalPosts =0; //Total number of posts in the blog.
// main callback function
function loadtoc(json) {
function getPostData() {
// this functions reads all postdata from the json-feed and stores it in arrays
if ("entry" in json.feed) {
var numEntries = json.feed.entry.length;
totalEntires = totalEntires + numEntries;
totalPosts=json.feed.openSearch$totalResults.$t
if(totalPosts>totalEntires)
{
var nextjsoncall = document.createElement('script');
nextjsoncall.type = 'text/javascript';
startindex=totalEntires+1;
nextjsoncall.setAttribute("src", "/feeds/posts/summary?start-index=" + startindex + "&max-results=50&alt=json-in-script&callback=loadtoc");
tocdiv.appendChild(nextjsoncall);
}
// main loop gets all the entries from the feed
for (var i = 0; i < numEntries; i++) {
// get the entry from the feed
var entry = json.feed.entry[i];
// get the posttitle from the entry
var posttitle = entry.title.$t;
// get the post date from the entry
var postdate = entry.published.$t.substring(0,10).replace(/-/g,"/");
// get the post url from the entry
var posturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
// get the post contents from the entry
// strip all html-characters, and reduce it to a summary
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
// strip off all html-tags
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
// reduce postcontent to numchar characters, and then cut it off at the last whole word
if (postcontent.length > numChars) {
postcontent = postcontent.substring(0,numChars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd) + '...';
}
// get the post labels from the entry
var pll = '';
if ("category" in entry) {
for (var k = 0; k < entry.category.length; k++) {
pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\');" title="ラベル 「' + entry.category[k].term + '」 の記事を表示">' + entry.category[k].term + '</a>, ';
}
var l = pll.lastIndexOf(',');
if (l != -1) { pll = pll.substring(0,l); }
}
// add the post data to the arrays
postTitle.push(posttitle);
postDate.push(postdate);
postUrl.push(posturl);
postSum.push(postcontent);
postLabels.push(pll);
}
}
if(totalEntires==totalPosts) {tocLoaded=true;showToc();}
} // end of getPostData
// start of showtoc function body
// get the number of entries that are in the feed
// numEntries = json.feed.entry.length;
// get the postdata from the feed
getPostData();
// sort the arrays
sortPosts(sortBy);
tocLoaded = true;
}
// filter and sort functions
function filterPosts(filter) {
// This function changes the filter
// and displays the filtered list of posts
// document.getElementById("bp_toc").scrollTop = document.getElementById("bp_toc").offsetTop;;
postFilter = filter;
displayToc(postFilter);
} // end filterPosts
function allPosts() {
// This function resets the filter
// and displays all posts
postFilter = '';
displayToc(postFilter);
} // end allPosts
function sortPosts(sortBy) {
// This function is a simple bubble-sort routine
// that sorts the posts
function swapPosts(x,y) {
// Swaps 2 ToC-entries by swapping all array-elements
var temp = postTitle[x];
postTitle[x] = postTitle[y];
postTitle[y] = temp;
var temp = postDate[x];
postDate[x] = postDate[y];
postDate[y] = temp;
var temp = postUrl[x];
postUrl[x] = postUrl[y];
postUrl[y] = temp;
var temp = postSum[x];
postSum[x] = postSum[y];
postSum[y] = temp;
var temp = postLabels[x];
postLabels[x] = postLabels[y];
postLabels[y] = temp;
} // end swapPosts
for (var i=0; i < postTitle.length-1; i++) {
for (var j=i+1; j<postTitle.length; j++) {
if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
}
}
} // end sortPosts
// displaying the toc
function displayToc(filter) {
// this function creates a three-column table and adds it to the screen
var numDisplayed = 0;
var tocTable = '';
var tocHead1 = 'タイトル';
var tocTool1 = 'タイトル順に並べ替え';
var tocHead2 = '投稿日';
var tocTool2 = '投稿日順に並べ替え';
var tocHead3 = 'ラベルを選択';
var tocTool3 = '';
if (sortBy == "titleasc") {
tocTool1 += ' (降順)';
tocTool2 += ' (昇順)';
}
if (sortBy == "titledesc") {
tocTool1 += ' (昇順)';
tocTool2 += ' (昇順)';
}
if (sortBy == "dateoldest") {
tocTool1 += ' (昇順)';
tocTool2 += ' (昇順)';
}
if (sortBy == "datenewest") {
tocTool1 += ' (昇順)';
tocTool2 += ' (降順)';
}
if (postFilter != '') {
tocTool3 = '全ての記事を表示する';
}
tocTable += '<table>';
tocTable += '<tr>';
tocTable += '<td class="toc-header-col1">';
tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col2">';
tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col3">';
tocTable += '<span>' + tocHead3 + '</span>';
tocTable += '</td>';
tocTable += '</tr>';
for (var i = 0; i < postTitle.length; i++) {
if (filter == '') {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
numDisplayed++;
} else {
z = postLabels[i].lastIndexOf(filter);
if ( z!= -1) {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
numDisplayed++;
}
}
}
tocTable += '</table>';
if (numDisplayed == postTitle.length) {
var tocNote = '<span class="toc-note">全 ' + postTitle.length + ' 件の記事を表示しています<br/></span>';
}
else {
var tocNote = '<span class="toc-note">全 '+ postTitle.length + ' 件中 ラベル「<b>';
tocNote += postFilter + '</b>」の ' + numDisplayed + ' 件の記事を表示しています<br/><a href="javascript:allPosts();">' + tocTool3 + '</a></span>';
}
tocdiv.innerHTML = tocNote + tocTable;
} // end of displayToc
function toggleTitleSort() {
if (sortBy == "titleasc") { sortBy = "titledesc"; }
else { sortBy = "titleasc"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function toggleDateSort() {
if (sortBy == "datenewest") { sortBy = "dateoldest"; }
else { sortBy = "datenewest"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function showToc() {
if (tocLoaded) {
displayToc(postFilter);
var toclink = document.getElementById("toclink");
}
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&amp;max-results=50&amp;callback=loadtoc" type="text/javascript"></script>
<style>
#bp_toc {
margin: 0 auto 2em;
padding: 0;
width: 100%;
}
#bp_toc tbody {
border-bottom: 1px solid #ddd;
}
#bp_toc table {
width: 100%;
margin: 0 auto;
counter-reset: rowNumber;
border-collapse: collapse;
border-left: 1px solid #ddd;
}
#bp_toc td:not(.toc-entry-col3),
#bp_toc tr {
border-right: 1px solid #ddd;
}
.toc-note {
line-height: 1.5em;
margin-bottom: 1em;
display: block;
text-align: center;
}
.toc-note a {/*全記事表示に戻すリンク*/
}
.toc-note a:hover {
}
#bp_toc tr:nth-child(2n) {
background: rgba(0,80,200,.1);/*奇数行の背景色*/
}
.toc-entry-col1 a:hover {
background: rgba(0,80,200,.2);/*タイトルホバー時の背景色*/
text-decoration: none!important;
}
#bp_toc table tr:first-child a,
#bp_toc table tr:first-child span {/*ナビゲーション*/
background: #bbb;
color: #fff!important;
font-weight: bold;
text-align: center;
padding: 5px 0;
display: block;
width: 100%;
border-top: 1px solid #ddd;
}
#bp_toc table tr:first-child a:hover {
opacity: .8;
text-decoration: none;
}
.toc-header-col1 {
width: 55%;/*タイトル(番号含む)枠の幅*/
}
.toc-header-col2 {
width: 12%;/*投稿日枠の幅*/
}
.toc-header-col3 {
width: 33%;/*ラベル枠の幅*/
}
#bp_toc table tr td.toc-entry-col1:first-child::before {
content: counter(rowNumber);
width: 2.6em;/*記事番号枠の幅*/
text-align: center;
padding: 12px 3px 0;
border-right: 1px solid #ddd;
}
.toc-entry-col1 {/*記事番号*/
display: flex;
counter-increment: rowNumber;
font-size: 12px;
line-height: 1.5em;
}
.toc-entry-col1 a {/*タイトル*/
display: block;
height: 100%;
width: 100%;
font-size: 14px;
font-weight: bold;
padding: 10px .5em 10px;
line-height: 1.3em;
color: inherit!important;
}
.toc-entry-col2 {/*投稿日*/
font-size: 13px;
text-align: center;
}
.toc-entry-col3 {/*ラベル*/
font-size: 13px;
padding: 5px;
line-height: 1.5em;
}
</style>

参考までに改良前後の差分チェックをここに置いときます。既に色々カスタマイズされている方は、変更箇所だけを適用してください。
HTML Sitemap Widget (all posts link modify) - Diff Checker

2022/12/04 追記: F-light ユーザーの方はこちらがおすすめ

F-light 用に最適化(ダークモード対応)したコードをこちらの記事で紹介しています。

ファビコンふじろじっく
サムネイル
【F-light】カスタム サイトマップ & 最新コメント ウィジェット (ダークモード対応 CSS 付きコード)
F-light テーマのダークモード対応済み「サイトマップ」「最新コメント」コードを紹介します
https://fujilogic.blogspot.com/2022/08/F-light-customized-widget-code.html