最新コメントの有効なコードは以下になります。
ふじやんさんの記事で最新バージョンのコメント一覧の装飾がアップされていたのでこちらを採用します<div id='recent-cmt'></div>
<script type='text/javascript'>
const maxnum = 200; //コメント数
const maxstr = 200; //コメント文字数
let a_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, 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', '匿名');
}
a_img = entry.author[0].gd$image.src;
if (a_img.match(/blank.gif/)) {
a_img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh9Er6hm9FSjUoik7O_KgIB0zDfUb6EbdNJSX1PcVfbFGq1gD-xN-tq3XBRbS4FoedeX9SL4cXxyz2v7N8W6H4a08k78VNOlt_eSCWVIjqmpWo1DrE6g1dJre45gsSWvBuyfCoNf9_Ygtm/s35/user.png"; //匿名画像
}
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, ' ');
if (csum.length > maxstr) {
csum = csum.substring(0, maxstr) + ' ...';
}
for (let j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == 'alternate') {
curl = entry.link[j].href;
} else if (entry.link[j].rel == 'self') {
curl2 = entry.link[j].href;
}
}
if (curl.indexOf('#') == -1) {
curl2 = curl2.split('/');
curl2 = curl2[curl2.length - 1];
curl += ('#c' + curl2);
}
a_names.push(a_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">最新' + maxnum + '件を表示しています。</div>';
let i = 0;
while (i < maxnum && i < curls.length) {
html += '<a class="rc-block" href="' + curls[i] + '"><div class="rc-head"><img loading="lazy" alt="" width="38" height="38" src="' + a_imgs[i] + '"/><div class="rc-author">' + a_names[i] + '</div><div class="rc-time">' + 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 {
display: block;
font-size: 0.9em;
color: inherit !important;
padding: 1em 0.5em;
border-top: 1px dashed #bbb;
word-break: break-all;
transition: 0.3s;
}
.rc-block:hover {
text-decoration: none;
background: none;
}
.rc-head {
display: flex;
height: 40px;
line-height: 1.2;
word-break: normal;
margin-bottom: 10px;
}
.rc-head img {
display: block;
width: 38px;
height: 38px;
border: solid 1px #ccc;
border-radius: 50%;
margin: 0;
}
.rc-author {
font-weight: bold;
margin: 0 10px;
margin: auto 10px;
}
.rc-time {
text-align: right;
margin: auto 0;
color: none;
}
</style>
固定ページの作成
ブロガーでは固定ページが作成できるようですね。これを知らなかった自分はどうやってワードプレスのようにナビゲーションに固定ページを掲載してトップページの記事一覧には表示されないようにするのか悩んでいました。
普通は投稿タグ⇛新しい投稿をクリックして記事をせっせと書くところですが、投稿タグより下のページタグを押します。かなり冴えないタグというかそこに目がいきませんでしたが、このページタグを押して新しいページタグをクリックします。
そしてその新しいページの際に、html編集画面にして上記をコピペするだけで終了です。
タイトルを「最新コメント」にしてさっさと公開すれば完了です。といいたいところですが、かなり癖のある仕様になっているのがブロガーの特徴。まず新しいページは公開する前にタイトルを英語表記で任意の綴にしたほうがいいのです。
例えば、新しいコメントならまずcommentとか自己紹介ならintroduceとかにします。それで公開するとその英語表記がパーマリンクになります。面倒ですが、公開する前にパーマリンクになるタイトルに英語表記で入力してから、あとあと編集で日本語で書き換える必要があります。
これで仕上がりです。
あとは、ページタグに入って、ページ一覧のゴミ箱アイコンの削除ボタンの横にある目のアイコン👁をクリックして記事を表示させてそこのURLをコピーします。そしてコピーしたものをナビゲーションにペーストしていくと、固定ページをナビに配置することができるわけですね。
関連記事の謎現象に関してはちょっと原因はわからないですねえ。お役に立てず申し訳ないですが、とりあえず色々検証してみてもし何かわかったらまたお知らせしますね。
返信削除コメントウィジェットのバグに関しては、怪我の功名？じゃないですけどbjさんのお陰で新たな問題が発見できてよかったんじゃないですかね(^^)
ちなみに削除済みコメントがるとコメントウィジェット自体がまったく表示されなくなるという結構大きなバグもつい先程判明しました(笑)(完全に削除すれば影響なし)
作者さんに報告しておいたのでいずれ修正対応されて更に完成度が高いものになると思いますよ。
こちらも修正版がリリースされたらすぐにお知らせしますね。
ああ、ごめんなさい…
返信削除IB-Noteさんの記事のコメントまで確認してなくて、あとで見てみたらbjさんのコメントがあって、既に試されてたんだなと気づいて慌てて消してしまいました(^^;
削除コメントでウィジェットが消えてしまうことも忘れてw
Bloggerの事情に関しては、最近別の不具合のことでヘルプフォーラム(コミュニティ)に投稿したんですが、そこでののやり取りで知った情報なんです…英語だけなのでいまいち理解できてないですが(^^;
https://support.google.com/blogger/thread/102542007
お知らせしようと思ってて忘れていましたが、実は私のような長い名前の場合、サイドバーに置いたときやスマホで表示した時など、画面幅が狭くなると名前や日時表示が崩れてしまうんですよ。
返信削除以下のCSSを追記したらいい感じに調整されると思うので良かったら試してみてください。
.rc-head {
line-height: 1.2;
word-break: normal;
}
.rc-time {
text-align: right;
}
連投失礼します。さらに微調整してみました。
返信削除.rc-head {
line-height: 1.2;
word-break: normal;
}
.rc-time {
text-align: right;
margin: auto 0;
}
.rc-author {
margin: auto 10px;
}
わざわざご親切に大変ありがとうございます。
返信削除少しばかり気にしていましたが、まあいつかわかればいいやくらいに思い、いつかお聞きできればと思っていたのですが、教えてくださって感謝しています。
連投大歓迎でございますｗ Googleブロガー愛好家たちがふじやんさんの影響で増えてきそうな気がしますね。