2022年9月3日

livedoorブログでコメントIDを表示させる。いいね(ハート)機能つき。

概要

この一つ前の記事より数日前にチャレンジしていた事で、コメントIDを表示させて更にハート機能も動作するようにしたコードです。前の記事の方が機能的には上なので、敢えてこちらを使う必要性はないでしょう。

管理人だけが付与できるハート機能は未実装です。

現存するlivedoorブログでも同等の動作をするサイトが複数あるので、このような実装は既に知られているのだと思います。

スマホ用の設定ではソースを編集する事ができない為、PC用画面のみの対応です。


表示サンプルのブログ

設定手順

1.livedoorブログの管理画面から、【ブログ設定】→【デザイン / ブログパーツ設定】-【PC】→【カスタマイズ】→【個別記事ページ】と辿ってソースコードを表示します。

2.ソースから<$CommentsList$>を探して、それを削除し代わりに以下のコードを挿入します。


挿入するコード:

<!-- CommentsList -->
<div class="article-option" id="comments-list">
<ol id="ld_blog_article_comment_entries">
<!-- CommentsLoop Start -->
<AllCommentsLoop>
<IfCommentStatus>
<li class="comment-set v2 odd" id="comment-<$CommentNumber$>">
<!-- コメントNo,コメント日時,コメントid,コメント★,コメント本文-->
<ul class="comment-info">
<li class="comment-author">
<$CommentNumber$>.&nbsp;
</li>
<li class="comment-date">
<$CommentDateTime$>
<span class="comment-id">
<$CommentIdString$>
</span>
</li>
<li class="comment-body">
<IfCommentRating>
<li class="comment-rating">
<$CommentRatingIcon$>
</li>
</IfCommentRating>
<$CommentBody$>
<li class="comment-reaction">
<div class="comment-like on">
<!-- ハートアイコン -->
<div class="comment-like-icon" data-comment-no="<$CommentNumber$>">
<span class="off" style="opacity: 1;">
<img src="https://parts.blog.livedoor.jp/img/comment2/heart_off.svg" width="20" height="20">
</span>
<span class="hover">
<img src="https://parts.blog.livedoor.jp/img/comment2/heart_hover.svg" width="20" height="20">
</span>
<span class="on" style="opacity: 0; transform: scale(0);">
<img src="https://parts.blog.livedoor.jp/img/comment2/heart_on.svg" width="20" height="20">
</span>
<span class="radius" style="transform: scale(0); opacity: 0.5;">
</span>
</div>
</div>
<!-- ハート押された回数 -->
<span id="comment-like-count-<$CommentNumber$>" class="comment-like-count on">0</span>
</li>
</ul>
</li>
</IfCommentStatus>
</AllCommentsLoop>
<!-- CommentsLoop End -->
</ol>
</div>
<!-- CommentsList End -->

3.【保存】を押します。

4.ブログにアクセスして、コメント投稿日時の右にコメントIDが表示されている事を確認します。


注意事項

・使用しているデザインによっては動作しない可能性があります。

・ブログの表示設定で「リアクション機能」を無効にすると動作しません。

・私自身はlivedoorブログを運営していないので殆どテストしていません。

・不具合等あっても修正する気力はないので、上手く動作しない場合は諦めてください。

0 件のコメント :