当ブログで使用している 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&max-results=150&callback=loadtoc"></script>
F-light v1.29 以降
<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: 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); } } </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&max-results=150&callback=loadtoc"></script>
最新コメントウィジェット
コメント欄と同じ吹き出しデザインです。
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3XCF5B8rplevrjGQgszzXck6-fvZctqKByK48v7L_JqjjSw0BO-lbS-Zamv_rH0SBxyYUqMgG583e3QnSZTPqFUJOaC7cAIdh_kHFovcw7zHR_PZDoBCqxsEWh8SEHhul-CekG3It-ka/s35/user.png"; //匿名画像 } a_img = entry.author[0].gd$image.src; if (a_img.match(/blank.gif/)) { a_img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QxEdkKdCpCohluZ6AQPVFDVijkxxr6s2QhAdmoc2EDVRGEbScVaRTiIiXr9t_Q2bH59hfDGv1Hl6sIY1wlCUbwYE_Kous8emMdAdlXLPTcjXlKComjYwdIBfB0Hs4hm5ukzabJFtXOY/s100-e365-rw/avatar.png"; //匿名アイコン } if (a_img.match(/b16-rounded.gif/)) { a_img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgaUpgUlSHEHS_qwLm1Jar9ADXSrwxvtPyaHQvf0GV0v3k8pTK8Eu5HFdbPlAeyXhrUbZbbHQoXG0teMREC2r4IAJJA9J6Ib_TrkP7dBCAFgJpiKoMrleELOQ4QrGMC-O0q711hnxzJM8/s100-e365-rw-cc/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
コメントを投稿
別ページに移動します2 件のコメント (新着順)
ふじやん
> 多愚にゃんさん
サイトマップ、無事導入できたようで何よりです。
F-light ユーザーでこの専用コードの存在に気付かず(?) 汎用版の方を使われている方をたまに見かけます。この記事のことをもっとアピールした方がいいかもしれないなということで、サイトマップページにこの記事のリンクを張っておきました。
ツンデレですか(笑) 扱いに慣れてくればさらに愛着(愛情?)が湧いてくるかと思いますので、ご機嫌取りながら可愛がってやってください(笑)
こちらこそ今年もよろしくお願い致します。
多愚にゃん
ふじやん様
今、絶賛のんびり作成中の自分のブログに、本記事のHTMLをコピって貼り付けたら、魔法のようにサイトマップが出来ました。ありがとうございました。
ずっとこちらのふじろじっくさんのサイトマップを拝見して、ソースもガン見していたのですが、何をどうすればいいのかさっぱりわからなかったので途方に暮れていました。でも、本記事をしっかり読んだらやっと意味がわかって、その結果にびっくりしました(#^.^#)
本当にF-lightさんは可愛いです。その可愛さはツンデレのかわいさで、すぐには懐かないところがいいです(笑)。
遅くなりましたが、本年もどうぞよろしくお願い申し上げます。