高速化対策の一環として、標準JSを無効化すると非常に効果があります。ただし、標準JSには一部のウィジェットや機能と関係しているものがあり、コメントもそのひとつです。

そこで今回は、標準JSを無効化したいけどコメント欄は自然な感じにしたい！という方に向けて対策方法をご紹介します。

標準JS無効化による問題

埋め込みの場合、返信ができない

標準JSを無効化すると、埋め込みの場合は返信ができなくなるという問題があります。これに関しては、コメント形式を埋め込みからフルページやポップアップに変更することで自然なやりとりにすることが可能です。

フルページ/ポップアップだとコメント機能が完全に分離されるため、埋め込みのように書き込みフレーム用のJSを読み込む必要もなく、軽量で安定したコメント環境を実現することができます。

アバター画像が表示されない

フルページ/ポップアップの場合、記事側に表示されるコメント欄のアバター画像が表示されないという現象が発生します。どうやら、テンプレート中で使用されているタグの仕様が絡んでいるようです。

<data:comment.authorAvatarImage/>で出力された画像に対し、標準JSを無効化するとなぜか投稿者アバターがblank.gifになり、おまけにdisplay:noneまで付けられます。そして本来の画像URLがlongdesc属性に指定されるという謎仕様になっています。

コメント欄対策

フルページの場合について解説します。

アバター画像が表示されない問題に関しては、コメント欄のテンプレートを改造することで対処できます。方法としては、data:comment.authorAvatarSrcで投稿者のアバターURLを参照できるため、これを利用してコメント欄部分の書き換えを行います。

本来は<data:comment.authorAvatarImage/>で出力されるところを、次のように場合分けして表示するようにします。

<b:if cond='data:blog.enabledCommentProfileImages'>
  <b:if cond='data:comment.authorUrl'>
    <!-- 投稿者アバター -->
    <img expr:src='data:comment.authorAvatarSrc'/>
    <!-- 投稿者名 -->
    <a expr:href='data:comment.authorUrl'><data:comment.author/></a>
    <!-- 投稿日時 -->
    <a expr:href='data:comment.url'><data:comment.timestamp/></a>
  <b:else/>
    <!-- 匿名画像 -->
    <img src='//resources.blogblog.com/img/blank.gif'/>
    <!-- 投稿者名 -->
    <span><data:comment.author/></span>
    <!-- 投稿日時 -->
    <a expr:href='data:comment.url'><data:comment.timestamp/></a>
  </b:if>
</b:if>

こうすると、標準JSの影響を全く受けずアバター画像もしっかりと表示できます。

以下では、私が書き換えたコメント部分のコードをご紹介します。コードをまるっと置き換えることで、手軽に導入して頂くことができます。

※QooQ（ver1.29）でも正常に動作することを確認済みです。（ただし、デザインは要調整）

コード置き換え

注意！HTMLを編集するので、必ずバックアップを取っておいてください。

「テーマ」→「HTMLを編集」で編集画面を開き、以下のコード部分を探します。

<b:includable id='comments' var='post'>
 ...
</b:includable>

上記部分を、以下のコードに置き換えてください。

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <b:if cond='data:post.allowComments'>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
              &#160;
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
              &#160;
          </b:if>

          <data:post.commentRangeText/>

          <b:if cond='data:post.hasNewerLinks'>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </b:if>
        </span>
      </b:if>

      <!-- post comment -->
      <div class='comment-top'>
        <b:if cond='data:post.numComments == 0'>
          まだコメントはありません
        <b:else/>
          <data:post.numComments/>件のコメント
        </b:if>
      </div>
      <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
        <b:loop values='data:post.comments' var='comment'>
          <div class='comment-block'>
            <div expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <b:if cond='data:comment.authorUrl'>
                  <a class='ca-avatar' expr:href='data:comment.authorUrl' expr:id='data:comment.id' rel='nofollow noopener' target='_blank'><img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' height='35' loading='lazy' width='35'/></a>
                  <a class='ca-name' expr:href='data:comment.authorUrl' rel='nofollow noopener' target='_blank'><data:comment.author/></a>
                  <a class='comment-timestamp' expr:href='data:comment.url' title=''><data:comment.timestamp/></a>
                <b:else/>
                  <img class='ca-avatar' expr:alt='data:comment.author' height='35' loading='lazy' src='//resources.blogblog.com/img/blank.gif' width='35'/>
                  <span class='ca-name'><data:comment.author/></span>
                  <a class='comment-timestamp' expr:href='data:comment.url' title=''><data:comment.timestamp/></a>
                </b:if>
              </b:if>
            </div>
            <div class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <data:comment.body/>
                <!-- <b:include data='comment' name='commentDeleteIcon'/> -->      
              </b:if>
            </div> 
          </div>
        </b:loop>
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:elseif cond='data:post.allowComments'/>
          <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' rel='nofollow noopener' target='_blank'>コメントを書き込む</a>
        </b:if>
      </p>
    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
       <b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
    </div>
    </div>
  </div>
</b:includable>

※1 書き込み部分は別ページで開いたほうが使いやすいと思うので、target='_blank'を設定しています。
※2 コメントアウト部分は削除アイコンです。付けたい方はお好みで付けてください。書き込みページでも表示されるので、私はオフにしています。

コメント部分の入れ替えはこれで完了です。CSSは以下をコピー＆ペーストして使ってください。

/* フルページ用コメント */
.comments {
  margin-top: 1em;
}

.comment-top {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 1em;
}

.comment-block {
  word-break: break-all;
  border-bottom: solid 1px #ddd;
  margin-bottom: 1.5em;
}

.comment-author {
  display: flex;
  height: 40px;
}

.comment-author img {
  width: 40px;
  height: 40px;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-fqETJ2iqw_d9oSU1UR2UOlMhWe8T38kCH-5Pi25rNmAo_XVHF341ujfJPp-_Rq60Lxgpf7I4AmwT6BlfK_dloCuULP9FcQuIbRnCGcmjTWpNDPP5usqW__VRNRALI17bMKodUTp7mHQ/s100/user-icon.png);
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

.ca-avatar {
  display: block;
  margin-right: 6px;
}

.ca-name {
  display: block;
  color: #444 !important;
  font-weight: bold;
  line-height: 40px;
  margin-right: 10px;
}

.ca-name:hover {
  text-decoration: none;
}

.comment-timestamp {
  display: block;
  font-size: 0.8em;
  color: #777 !important;
  line-height: 40px;
}

.comment-timestamp:hover {
  text-decoration: none;
}

.comment-body {
  padding: 1em 0.5em 1.5em;
}

.comment-body > p {
  margin-top: 0;
}

.item-control {
  text-align: right;
}

.comment-footer {
  margin: 3em 0 1em 0;
}

.comment-link {
  display: block;
  width: 60%;
  color: #444 !important;
  background: #fafafa;
  text-align: center;
  padding: 0.7em;
  border: solid 1px #ddd;
  box-sizing: border-box;
  margin: 0 auto;
  transition: 0.5s;
}

.comment-link:hover {
  text-decoration: none;
  background: #ddd;
}

デザインは当ブログと同じものなので、お好みに合わせて調整するようにしてください。

導入が完了したら、正しく動作するか確認をしてください。標準JSはhtmlタグでb:js='false'とすることで簡単に無効化できます。