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

2024/10/152
アイキャッチ

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

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

CONTENTS

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>
: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&amp;max-results=150&amp;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