当ブログで使用している 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>～</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://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さんは可愛いです。その可愛さはツンデレのかわいさで、すぐには懐かないところがいいです（笑）。
遅くなりましたが、本年もどうぞよろしくお願い申し上げます。