jtwtw.com

概要 この一つ前の記事より数日前にチャレンジしていた事で、コメントIDを表示させて更にハート機能も動作するようにしたコードです。前の記事の方が機能的には上なので、敢えてこちらを使う必要性はないでしょう。 管理人だけが付与できるハート機能は未実装です。 現存するlivedoorブログでも同等の動作をするサイトが複数あるので、このような実装は既に知られているのだと思います。 スマホ用の設定ではソースを編集する事ができない為、PC用画面のみの対応です。 表示サンプルのブログ 設定手順 １．livedoorブログの管理画面から、【ブログ設定】→【デザイン / ブログパーツ設定】-【PC】→【カスタマイズ】→【個別記事ページ】と辿ってソースコードを表示します。 ２．ソースから<$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; &

概要 livedoorブログのコメント欄の「いいね」や「スレッド表示」機能は、管理画面でオンオフを選択できますが、コメントIDの表示の有無を管理画面から設定する事はできません。 ソースを編集すればコメントIDを表示させる事は可能ですが、トレードオフとして「いいね」や「スレッド表示」機能が使えなくなってしまいます。 コメントIDを表示させるだけでそれらの機能を殺してしまうのは勿体ないので、上手く両立させる事ができるようにコードを書いてみました。 ただしスマホ用の設定ではソースを編集する事ができない為、PC用画面のみの対応です。 表示サンプルのブログ 設定手順 １．livedoorブログの管理画面から、【ブログ設定】→【デザイン / ブログパーツ設定】-【PC】→【カスタマイズ】→【個別記事ページ】と辿ってソースコードを表示します。 ２．ソースから<$CommentsList$>を探して、その真下にコードを挿入します。 挿入するコード： <!--コメントID付与:start--> <AllCommentsLoop> <IfCommentStatus> <span style="display:none" class="comment-id-list" data-comment-num="<$CommentNumber$>" data-comment-id="<$CommentIdString$>"></span> </IfCommentStatus> </AllCommentsLoop> <script type="text/javascript"> try {   document.querySelectorAll("span.comment-id-list").forEach((elm)=>{     let commentNum=elm.getAttribute("data-comment-num");     let newElm=document.createEl