EDIT

最新コメントウィジェット (別のおすすめウィジェットを追記しました)

｜2023/09/06
アイキャッチ
コメントウィジェット

このウィジェットについて

  • 投稿者名とコメント概要のみのシンプル表示。記事タイトルやコメント投稿日時は表示されません。
  • コメント内に a タグ(リンクタグ)が含まれているとレイアウトが崩れる可能性があるので注意。
  • Font Awesome導入済みの環境では、コメント投稿者名の横に吹き出しアイコンが、概要文の右側にアイコンが表示されます。
    Font Awesome を導入するには、以下のコードをテーマの HTML編集画面にて </head> の上に置いて下さい。
    <link href='https://use.fontawesome.com/releases/v5.14.0/css/all.css' rel='stylesheet' type='text/css'/>

スクリプトコードの設置

以下のコードを、レイアウト編集ページにて「HTML/JavaScriptガジェット」のコンテンツ内にコピペし、表示させたい位置に設置します。

<noscript id="sneeit-srcbw-exclude"></noscript>
<script type="text/javascript">
var sneeit_srcbw_count = 6; //コメント件数(最大500まで)
var sneeit_srcbw_summary_length = 100; //コメント文字数
var sneeit_srcbw_icon_comment = 'fa-comment';
var sneeit_srcbw_icon_arrow = 'fa-angle-right';
_s7GpE = ['link','href','font-awesome','link','text/css','stylesheet','','sneeit-srcbw-exclude','\n','string','undefined','feed','entry','表示できるコメントがありません。',' ...','','','alternate','self','#','/','#c','<a class="sneeit-srcbw" href="','"><i class="sneeit-srcbw-icon-comment far ','"></i><span class="srcbw-color"><strong>',': </strong></span>','<i class="sneeit-srcbw-icon-arrow fa ','"></i></a>','<span class="sneeit-srcbw-credit">Powered by <a href="http://sneeit.com/simple-recent-comment-widget-blogger/" target="_blank" rel="noopener">Sneeit</a></span>','<script type="text/javascript" src="/feeds/comments/summary?alt=json-in-script&max-results=','&callback=_fCiE"><\/script>'];var _vHpF=document.getElementsByTagName(_s7GpE[0]);for(var _vLbB=0;_vLbB<_vHpF.length;_vLbB++){if(_s7GpE[1] in _vHpF[_vLbB]&&_vHpF[_vLbB].href.indexOf(_s7GpE[2])!=-1){break;}}if(_vLbB>=_vHpF.length){var _vLbJ=document.createElement(_s7GpE[3]);_vLbJ.type=_s7GpE[4];_vLbJ.rel=_s7GpE[5];_vLbJ.href=_s7GpE[6];document.head.appendChild(_vLbJ);}var _vRqN=document.getElementById(_s7GpE[7]).innerHTML;var _vSbX=sneeit_srcbw_count;_vRqN=_vRqN.trim();if(_vRqN){_vRqN=_vRqN.split(_s7GpE[8]);_vSbX=_vSbX*(_vRqN.length+2);}function _fCiE(json){if(typeof(json)==_s7GpE[9]||typeof(json)==_s7GpE[10]||!(_s7GpE[11] in json)||!(_s7GpE[12] in json.feed)||!json.feed.entry.length){document.write(_s7GpE[13]);return;}var _vQbX=0;for(var _vLbB=0;_vLbB<json.feed.entry.length&&_vQbX<sneeit_srcbw_count;_vLbB++){var _vOlU=json.feed.entry[_vLbB];var _vQjW=_vOlU.author[0].name.$t;var _vRcD=_vOlU.summary.$t;if(_vRqN.indexOf(_vQjW)!=-1){continue;}_vQbX++;if(_vRcD.length>sneeit_srcbw_summary_length){_vRcD=_vRcD.substring(0,sneeit_srcbw_summary_length)+_s7GpE[14];}var _vVgK=_s7GpE[15];var _vVeS=_s7GpE[16];for(var _vIlN=0;_vIlN<_vOlU.link.length;_vIlN++){var _vLbJ=_vOlU.link[_vIlN];if(_s7GpE[17]==_vLbJ.rel){_vVgK=_vLbJ.href;}else if(_s7GpE[18]==_vLbJ.rel){_vVeS=_vLbJ.href;}}if(!_vVgK){continue;}if(_vVgK.indexOf(_s7GpE[19])==-1){_vVeS=_vVeS.split(_s7GpE[20]);_vVeS=_vVeS[_vVeS.length-1];_vVgK+=(_s7GpE[21]+_vVeS);}document.write(_s7GpE[22]+_vVgK+_s7GpE[23]+sneeit_srcbw_icon_comment+_s7GpE[24]+_vQjW.replace("Anonymous","匿名")+_s7GpE[25]+_vRcD+_s7GpE[26]+sneeit_srcbw_icon_arrow+_s7GpE[27]);}document.write(_s7GpE[28]);}document.write(_s7GpE[29]+_vSbX+_s7GpE[30]);
</script>
<style>
a.sneeit-srcbw {
    color: #222!important;
    font-size: .9em;
    line-height: 1.6em;
    font-weight: normal;
    border-bottom: 1px solid #ddd;
    display: block;
    padding: .5em 1em 1.5em 1.5em;
    position: relative;
}
a.sneeit-srcbw br {
    display: none;/*改行無効化*/
}
a:hover.sneeit-srcbw {
    background: #eef;
    text-decoration: none;
}
.sneeit-srcbw:last-of-type {
    border: none;
}
.sneeit-srcbw-icon-comment {
    position: absolute;
    left: 0;
    top: 0.9em;
    color: #888;
}
.sneeit-srcbw-credit {
    color: #6495ed;
    position: absolute;
    right: 0;
    font-size: 200%;
    top: 50%;
    margin-top: -0.55em;
    display: none;
}
.sneeit-srcbw-icon-arrow {
    color: #6495ed;
    position: absolute;
    right: 0;
    font-size: 200%;
    top: 50%;
    margin-top: -0.55em;
}
#sneeit-srcbw-exclude {
    display: none!important;
}
.srcbw-color {/*投稿者名の文字色*/
    color: #6495ed;
}
</style>

ウィジェット提供元

ファビコンSneeit
サムネイル
Simple Recent Comment Widget for Blogger / Blogspot
Simple, clean and minimal design of recent comments widget for Blogger / Blogspot website with RTL compatible.
https://sneeit.com/simple-recent-comment-widget-blogger/

2021/03/18 追記: 別のおすすめウィジェットの紹介

ここ最近カスタマイズでよくお世話になっている IB-Note さんが更に素晴らしい最新コメントウィジェットを公開されました。

ファビコンIB-Note
サムネイル
【簡単導入】最新コメントの一覧表示ウィジェット | IB-Note
フィードを利用して、最新コメントを一覧表示するウィジェットを作成しました。
https://itblogger-note.blogspot.com/2021/03/recent-comments-widget.html

こちらの特徴は、機能的にはコメント投稿者のアバターや投稿日時が表示されること。aタグが含まれていても表示が崩れないこと等。

内部的には、コードが軽量最適化されていて、PagespeedInsights に指摘されてしまう document.write() が使われていません。

というわけでメリットしかありませんので当ブログのウィジェットもこちらに入れ替えさせていただきました。

2022/12/04 追記: F-light ユーザーの方へ

IB-Note 版の最新コメントウィジェットを F-light 用に最適化(ダークモード対応)したコードをこちらの記事で紹介していますので宜しければどうぞ。

ファビコンふじろじっく
サムネイル
【F-light】カスタム サイトマップ & 最新コメント ウィジェット (ダークモード対応 CSS 付きコード)
F-light テーマのダークモード対応済み「サイトマップ」「最新コメント」コードを紹介します
https://fujilogic.blogspot.com/2022/08/F-light-customized-widget-code.html