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

概要

この一つ前の記事より数日前にチャレンジしていた事で、コメント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;
            </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 -->

３．【保存】を押します。

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

注意事項

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

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

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

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

このブログを検索

jtwtw.com