EDIT

【F-light】カスタム サイトマップ & 最新コメント ウィジェット (ダークモード対応 CSS 付きコード)

2023/09/062
アイキャッチ

当ブログで使用している HTML サイトマップ最新コメント ウィジェットの F-light テーマ 用ダークモード(カスタムプロパティ)対応 CSS 付きのコードです。

以下のコードを固定ページの HTML 編集でコピペするだけですぐにお使いいただけます。

HTML サイトマップ ウィジェット コード

両ウィジェットとも読み込み中にクルクル回るアニメーションローダー付きです。

※v1.28 以前と v1.29 以降で CSS が異なります。

F-light v1.28 以前

<style>
:root {
  --border-color: #e5e5e5;
}
:root[data-theme-mode="dark"] {
    --border-color: #353535;
}
#bp_toc {
  margin: 0 auto 2em;
  padding: 0;
  width: 100%;
}
#bp_toc a {
  text-decoration: none;  
}
#bp_toc tbody {
  border-bottom: 1px solid var(--border-color);
}
#bp_toc table {
  width: 100%;
  margin: 0 auto;
  counter-reset: rowNumber;
  border-collapse: collapse;
  border-left: 1px solid var(--border-color);
}
#bp_toc td:not(.toc-entry-col3),
#bp_toc tr  {
  border-right: 1px solid var(--border-color);
}
.toc-note {
  height: 2.5em;
  display: block;
  text-align: center;
  margin-bottom: 1em;
  line-height: 1.5;
}
.toc-guide {
  margin-bottom: 2em;
  line-height: 1.2;
  text-align: center;
  display: block;
  height: 2em;
}
.toc-guide a {
  background: var(--brand);
  padding: 2px 1em;
  line-height: 2;
  color: #fff!important;
  border-radius: 20px;
}
.toc-guide a:hover {
  background: var(--brand-light);
}
#labelname {
  display: inline-block;
  line-height: 1;
  border: 1px solid var(--color);
  padding: 5px;
  border-radius: 3px;
}
#bp_toc tr:nth-child(2n) {
  background: var(--dark-bg);
}
#bp_toc table tr:first-child a,
#bp_toc table tr:first-child span {
  background: var(--brand);
  text-align: center;
  padding: 3px 0;
  font-size: 1.6rem;
  color: #fff!important;
  display: block;
  width: 100%;
}
#bp_toc table tr:first-child {
  border-left: solid 1px var(--brand);
}
.toc-header-col3 {
  border-right: none!important;
}
.toc-header-col1,
.toc-header-col2,
.toc-header-col3 {
  transition: .2s;  
}
#bp_toc table tr:first-child a:hover {
  background: var(--brand-light);
}
#bp_toc table tr:first-child:hover {
  border-color: var(--brand-light);
}
.toc-header-col1 {
  width: 70%;
}
.toc-header-col3 {
  width: 20%;
}
@media ( max-width : 768px ) {
  .toc-header-col1 {
    width: 56%;
  }
  .toc-header-col3 {
    width: 34%;
  }
}
#bp_toc table tr:first-child a:hover {
  text-decoration: none;
}
.toc-entry-col1,
.toc-entry-col2 {
  font-size: 1.2rem;
}
.toc-entry-col1 a {
  display: flex;
  color: var(--color)!important;
  text-decoration: none;
  width: 100%;
  font-size: 1.4rem;
  font-weight: normal;
  padding: 12px .5em 12px 5px;
  line-height: 1.3;
  transition: .2s;
}
.toc-entry-col1 a::before {
  content: "\25A0";
  color: var(--brand-light);
  padding-right: 2px;
  transition: .2s;
}
.toc-entry-col1 a:hover {
  text-decoration: none!important;
}
.toc-entry-col1 a:hover::before {
  color: var(--sub-brand);
}
.toc-entry-col1 {
  display: flex;
  counter-increment: rowNumber;
  line-height: 1.5;
}
#bp_toc table tr td.toc-entry-col1:first-child::before {
  content: counter(rowNumber);
  font-size: 1.1rem;
  min-width: 2.6em;
  text-align: center;
  padding: 12px 3px 0;
  border-right: 1px solid var(--border-color);
}
.toc-entry-col2 {
  text-align: center;
}
.toc-entry-col3 {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 5px;
}
.toc-entry-col3 a {
  border: 1px solid var(--color);
  border-radius: 2px;
  padding: 2px;
  margin: 0 5px 5px 0;
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color)!important;
}
.toc-entry-col3 a:hover {
  background: var(--brand-light);
  border-color: var(--brand-light);
  color: #fff!important;
}
.loader {
  border: 4px solid transparent;
  border-top-color: var(--dark-color);
  border-right-color: var(--dark-color);
  border-bottom-color: var(--dark-color);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin .7s linear infinite;
  margin: 5em auto 2em;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

<div id="bp_toc"><div class='loader'></div></div>

<script>
// ---------------------------------------------------
// 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 = 0;         // マウスオン時にツールチップ表示する概要文字数
   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=150&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 = '全記事表示にもどる<svg class="svg" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z"/></svg>';
   }
   tocTable += '<table>';
   tocTable += '<tr>';
   tocTable += '<td class="toc-header-col1">';
   tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '<svg class="svg" height="15" width="15" style="margin:0 -3px 0 -1px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M27.66 224h264.7c24.6 0 36.89-29.78 19.54-47.12l-132.3-136.8c-5.406-5.406-12.47-8.107-19.53-8.107c-7.055 0-14.09 2.701-19.45 8.107L8.119 176.9C-9.229 194.2 3.055 224 27.66 224zM292.3 288H27.66c-24.6 0-36.89 29.77-19.54 47.12l132.5 136.8C145.9 477.3 152.1 480 160 480c7.053 0 14.12-2.703 19.53-8.109l132.3-136.8C329.2 317.8 316.9 288 292.3 288z"/></svg></a>';
   tocTable += '</td>';
   tocTable += '<td class="toc-header-col2">';
   tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '<svg class="svg" height="15" width="15" style="margin:0 -3px 0 -1px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M27.66 224h264.7c24.6 0 36.89-29.78 19.54-47.12l-132.3-136.8c-5.406-5.406-12.47-8.107-19.53-8.107c-7.055 0-14.09 2.701-19.45 8.107L8.119 176.9C-9.229 194.2 3.055 224 27.66 224zM292.3 288H27.66c-24.6 0-36.89 29.77-19.54 47.12l132.5 136.8C145.9 477.3 152.1 480 160 480c7.053 0 14.12-2.703 19.53-8.109l132.3-136.8C329.2 317.8 316.9 288 292.3 288z"/></svg></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 = '<div class="toc-note">全 <b>' + postTitle.length + '</b> 件の記事を表示しています</div><div class="toc-guide"><span id="labelname">ラベル名</span> をクリックすると、そのラベルの記事に絞り込みできます</div>'; }
   else {
      var tocNote = '<div class="toc-note">全 <b>'+ postTitle.length + '</b> 件中 ラベル <span id="labelname">';
      tocNote += postFilter + '</span> の <b>' + numDisplayed + '</b> 件の記事を表示しています</div><div class="toc-guide"><a href="javascript:allPosts();">' + tocTool3 + '</a></div>';
   }
   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=150&amp;callback=loadtoc"></script>

F-light v1.29 以降

上記コードの <style>~</style> の部分をこちらの CSS と入れ替えててください。

:root {
  --border-color: #e5e5e5;
}
:root[data-theme-mode="dark"] {
    --border-color: #353535;
}
#bp_toc {
  margin: 0 auto 2em;
  padding: 0;
  width: 100%;
}
#bp_toc a {
  text-decoration: none;  
}
#bp_toc tbody {
  border-bottom: 1px solid var(--border-color);
}
#bp_toc table {
  width: 100%;
  margin: 0 auto;
  counter-reset: rowNumber;
  border-collapse: collapse;
  border-left: 1px solid var(--border-color);
}
#bp_toc td:not(.toc-entry-col3),
#bp_toc tr  {
  border-right: 1px solid var(--border-color);
}
.toc-note {
  height: 2.5em;
  display: block;
  text-align: center;
  margin-bottom: 1em;
  line-height: 1.5;
}
.toc-guide {
  margin-bottom: 2em;
  line-height: 1.2;
  text-align: center;
  display: block;
  height: 2em;
}
.toc-guide a {
  background: var(--brand);
  padding: 2px 1em;
  line-height: 2;
  color: var(--brand-font)!important;
  border-radius: 20px;
}
.toc-guide a:hover {
  background: var(--brand-light);
}
#labelname {
  display: inline-block;
  line-height: 1;
  border: 1px solid var(--color);
  padding: 5px;
  border-radius: 3px;
}
#bp_toc tr:nth-child(2n) {
  background: var(--dark-bg);
}
#bp_toc table tr:first-child a,
#bp_toc table tr:first-child span {
  background: var(--brand);
  text-align: center;
  padding: 3px 0;
  font-size: 1.6rem;
  color: var(--brand-font)!important;
  display: block;
  width: 100%;
}
#bp_toc table tr:first-child {
  border-left: solid 1px var(--brand);
}
.toc-header-col3 {
  border-right: none!important;
}
.toc-header-col1,
.toc-header-col2,
.toc-header-col3 {
  transition: .2s;  
}
#bp_toc table tr:first-child a:hover {
  background: var(--brand-light);
}
#bp_toc table tr:first-child:hover {
  border-color: var(--brand-light);
}
.toc-header-col1 {
  width: 70%;
}
.toc-header-col3 {
  width: 20%;
}
@media ( max-width : 768px ) {
  .toc-header-col1 {
    width: 56%;
  }
  .toc-header-col3 {
    width: 34%;
  }
}
#bp_toc table tr:first-child a:hover {
  text-decoration: none;
}
.toc-entry-col1,
.toc-entry-col2 {
  font-size: 1.2rem;
}
.toc-entry-col1 a {
  display: flex;
  color: var(--color)!important;
  text-decoration: none;
  width: 100%;
  font-size: 1.4rem;
  font-weight: normal;
  padding: 12px .5em 12px 5px;
  line-height: 1.3;
  transition: .2s;
}
.toc-entry-col1 a::before {
  content: "\25A0";
  color: var(--brand-light);
  padding-right: 2px;
  transition: .2s;
}
.toc-entry-col1 a:hover {
  text-decoration: none!important;
}
.toc-entry-col1 a:hover::before {
  color: var(--sub-brand);
}
.toc-entry-col1 {
  display: flex;
  counter-increment: rowNumber;
  line-height: 1.5;
}
#bp_toc table tr td.toc-entry-col1:first-child::before {
  content: counter(rowNumber);
  font-size: 1.1rem;
  min-width: 2.6em;
  text-align: center;
  padding: 12px 3px 0;
  border-right: 1px solid var(--border-color);
}
.toc-entry-col2 {
  text-align: center;
}
.toc-entry-col3 {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 5px;
}
.toc-entry-col3 a {
  border: 1px solid var(--color);
  border-radius: 2px;
  padding: 2px;
  margin: 0 5px 5px 0;
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color)!important;
}
.toc-entry-col3 a:hover {
  background: var(--brand-light);
  border-color: var(--brand-light);
  color: var(--brand-font)!important;
}
.loader {
  border: 4px solid transparent;
  border-top-color: var(--dark-color);
  border-right-color: var(--dark-color);
  border-bottom-color: var(--dark-color);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin .7s linear infinite;
  margin: 5em auto 2em;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

最新コメントウィジェット

コメント欄と同じ吹き出しデザインです。

<div id='recent-cmt'><div class='loader'></div></div>
<script>
  const maxnum = 50; // コメント数
  const maxstr = 400; // コメント文字数
  const c_link = true; // コメントへの直リンク(true) / 記事へのリンク(false)
  let a_names = [];
  let p_names = [];
  let a_imgs = [];
  let a_times = [];
  let csums = [];
  let curls = [];
 
  function loadcmt(json) {
    if (typeof (json) == 'undefined' || !('entry' in json.feed)) {
      document.getElementById('recent-cmt').innerHTML = '表示できるコメントがありません。';
      return;
    }    
    
    function getData() {
      let entry, a_name, a_img, p_name, a_time, csum, curl, curl2;
      for (let i = 0; i < json.feed.entry.length; i++) {
        entry = json.feed.entry[i];
        a_name = entry.author[0].name.$t;
        if (a_name == 'Anonymous') {
          a_name = a_name.replace('Anonymous', '匿名');
        }
         p_name = entry.author[0].name.$t;
         if (p_name == 'Anonymous') {
           p_name = p_name.replace('Anonymous', '匿名');
         }
        a_img = entry.author[0].gd$image.src;
        if (a_img.match(/blank.gif/)) {
          a_img = "https://1.bp.blogspot.com/-Xc-P96cU_Ns/YFIWbLeWHHI/AAAAAAAACxg/Q-at-Ii35l0rdqWTb9WY8Tp4xKPdVPsBQCLcBGAsYHQ/s35/user.png"; //匿名画像
        }
          a_img = entry.author[0].gd$image.src;
        if (a_img.match(/blank.gif/)) {
          a_img = "https://1.bp.blogspot.com/-2vBtU10Te7c/YjSMMILIigI/AAAAAAAAXTU/5po01iBCejgqrm_qfV8YohE4xYzF6rDFwCNcBGAsYHQ/s100-rw-e365/avatar.png"; //匿名アイコン
        }
         if (a_img.match(/b16-rounded.gif/)) {
          a_img = "https://1.bp.blogspot.com/-ZqDjLqpo4UM/YinxwNkfW2I/AAAAAAAAXQ8/r2pLV1AzqTAuWdAhclEUIyg_k-JOrb-LgCNcBGAsYHQ/s100-rw-cc-e365/no-image-avatar.png"; //画像未設定ログインユーザー用アイコン
        }
         if (a_img.match(/\/s[0-9]*\//)) {//アイコン WebP 化
          a_img = a_img.replace(/\/s[0-9]*\//,"/w100-rw-e365/")
        }
        a_time = new Date(entry.published.$t);
        a_time = a_time.getFullYear() + '/' + ('0' + (a_time.getMonth() + 1)).slice(-2) + '/' + ('0' + a_time.getDate()).slice(-2) + ' ' + ('0' + a_time.getHours()).slice(-2) + ':' + ('0' + a_time.getMinutes()).slice(-2);
        csum = entry.summary.$t;
        csum = csum.replace(/<\S[^>]*[>]?/g, '<br>');
        if (csum.match(/者によって削除されました\u3002/)) {
        csum = csum.innerHTML = "<i>"+ csum +"</i>";
        }
        if (csum.length > maxstr) {
          csum = csum.substring(0, maxstr).replace(/<\S[^>]*$/, '') + ' ...';
        }
        if (entry.link.length < 3) {
          continue;
        }
        for (let j = 0; j < entry.link.length; j++) {
          if (entry.link[j].rel == 'alternate') {
            curl = entry.link[j].href;
            if (!c_link) {
              curl = curl.replace(/\?showComment.*$/, '');
            }
          } else if (entry.link[j].rel == 'self') {
            curl2 = entry.link[j].href; 
          }
        }
        if (curl.indexOf('#') == -1 && c_link) {
          curl2 = curl2.split('/');
          curl2 = curl2[curl2.length - 1];
          curl += ('#c' + curl2);
        }
        a_names.push(a_name);
        p_names.push(p_name);
        a_imgs.push(a_img);
        a_times.push(a_time);
        csums.push(csum);
        curls.push(curl);
      }
    }
    getData();
    displaycmt();
  }
 
  function displaycmt() {
    let html = '<div class="rc-note">最新 <b>' + maxnum + '</b> 件を新着順に表示しています。</div>';
    let i = 0;
    while (i < maxnum && i < curls.length) {
      html += '<a class="rc-block" href="' + curls[i] + '" title="' + p_names[i] + ' さんのコメント"><div class="rc-head"><img loading="lazy" alt="アバター" width="50" height="50" src="' + a_imgs[i] + '"/><div class="rc-author">' + a_names[i] + '</div><div class="rc-time"><svg class="svg svg-clock" style="vertical-align: -12%;margin-right:3px"><use href="#svg-clock"/></svg>' + a_times[i] + '</div></div><div class="rc-body">' + csums[i] + '</div></a>';
      i++;
    }
    document.getElementById('recent-cmt').innerHTML = html;
  }
 
  const scr_rc = document.createElement('script');
  scr_rc.src = '/feeds/comments/summary?alt=json-in-script&max-results=' + maxnum + '&callback=loadcmt';
  document.getElementById('recent-cmt').after(scr_rc);
</script>
<style>
.rc-note {
  margin-bottom: 2em;
}
.rc-block {
  position: relative;
  display: block;
  font-size: 1.6rem;
  padding: 1em 0 2em .5em;
  line-height: 1.6;
  word-break: break-word;
  transition: 0.3s;
}
a.rc-block {
  color: inherit!important;
  text-decoration: none!important;
  border-radius: 6px;
}
.rc-block:hover .rc-body {
  box-shadow: 4px 4px 5px var(--shadow);
}
.rc-head {
  display: flex;
  line-height: 1.2;
  margin: 0 0 1em -5px;
  word-break: normal;
}
.rc-head img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.rc-author {
  font-size: 1.7rem;
  margin: auto 10px;
  font-weight: bold;
  transition: .3s;
}
.rc-block:hover .rc-author {
  color: var(--link);  
}
.rc-time {
  position: absolute;
  color: var(--dark-color);
  font-size: 1.5rem;
  right: 1em;
  bottom: 2.4em;
  z-index: 2;
}
.rc-body {
  position: relative;
  padding: 1em 1em 2em;
  background: var(--dark-bg);
  border-radius: 6px;
  margin-left: -0.3em;
  transition: .3s;
  }
.rc-body::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 14px;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid var(--dark-bg);
}
.loader {
  border: 4px solid transparent;
  border-top-color: var(--dark-color);
  border-right-color: var(--dark-color);
  border-bottom-color: var(--dark-color);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin .7s linear infinite;
  margin: 5em auto 2em;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

管理者の名前に を付ける方法

こちらの記事をご参照下さい。→ https://fujilogic.blogspot.com/2022/03/comment-display-customize.html#6