【JetTheme】コメント欄の改良・カスタマイズ

2025/6/27

2025/7/3

本サイトには、広告あるいはアフィリエイトプログラムによるアソシエイトリンクが含まれる場合があります。

カスタマイズせずとも高機能なBloggerテンプレート「JetTheme」ですが、コメント欄まわりがもう少し……といった感じなので以下のようにカスタマイズを加えました。

匿名コメント用のアバターを設定
URL設定がある場合、アバターと名前をリンク化
記事執筆者コメントのチェックマークのデザイン変更
コメントフォームに注意書き・メッセージを追加

本記事では、これらカスタマイズのテンプレートへの適用方法を紹介します。

カスタマイズ箇所・注意点

Bloggerの管理画面から、「テーマ」→「HTMLを編集」を選択して、テンプレートの編集画面を開きます。今回のカスタマイズでは基本的に<b:includable id='JetComments' var='post'>～</b:includable>の部分を編集します。以下に掲載する書き換え前のコードは JetTheme v2.9 のものです。

テンプレートファイルの編集を行うため、事前にバックアップすることを推奨します。なお、筆者はHTMLやCSSについては素人・勉強中です。筆者環境で動作確認はしていますが、コードに間違いや非効率的な部分などあるかもしれませんのでご了承ください。

匿名アバターの設定方法とリンク化方法

以下のサイトを参考に、JetTheme用にアレンジしました。

【Blogger】標準 JS を無効にしつつコメント欄のアバター画像を変更する | mizusame

コード全体を載せると長いので、修正部分を順に説明します。あらかじめ匿名アバター用の画像を用意しBloggerにアップロード・URLを取得しておいてください。

<b:with>のvalueに匿名アバターのURLをセット

テンプレートで<div class='comments-content'>を検索し、その直上に以下を挿入。

<b:with value='&quot;【匿名用画像のURL】&quot;' var='anonymousImg'>

また、<data:post.cmtfpIframe/>を検索し、その下の</div>×2と</b:if>×1を見つけ、その直下に以下を挿入。

</b:with>

挿入した<b:with>の下に</div></b:if></b:includable>が並び、全体は以下のようになるはずです。

    <b:includable id='JetComments' var='post'>
<b:if cond='data:post.embedCommentForm'>
<div class='comments threaded mb-5' id='comments'>
<div class='widget-title position-relative mb-3 text-uppercase fw-light'>
<span><b:eval expr='data:post.numberOfComments gt 0 ? data:post.numberOfComments + &quot; Comments&quot; : &quot;No Comment&quot;'/></span>
</div>
<b:with value='&quot;【匿名用画像のURL】&quot;' var='anonymousImg'>
<div class='comments-content'>

...中略...

<textarea disabled='disabled' id='comment-script' readonly='readonly' style='display:none'><data:post.cmtfpIframe/></textarea>
</div>
</div>
</b:if>
<b:with>
</div>
</b:if>
</b:includable>

【匿名用画像のURL】は、ご自身で用意したBlogger内画像URLに書き換えてください。JetTheme内のJavaScriptによりBlogger画像URLのパラメータに準拠して書き換えられサイズ調整されるため、必ずBloggerにアップロードした画像のURLを使ってください。

変数名は例としてvar='anonymousImg'にしています。好きな変数名に変えてもOKです（その場合は以降のanonymousImgを全て書き換えてください。）。

今回用いる<b:with>タグは、Bloggerテンプレート内で一時的に変数を定義し、特定範囲内（<b:with>～</b:with>で囲った部分）で再利用できるというものです。匿名画像用URLを複数回記述することなく冗長な記述を避けることができます。また、今後画像を変更する時に一カ所変更するだけで済みます。

imgタグに画像置換の条件式を設定・画像のリンク化

expr:data-src='data:commentLevel1.authorAvatarSrc'で検索しヒットする以下の部分を

<img class='lazyload' expr:alt='data:commentLevel1.author' expr:data-src='data:commentLevel1.authorAvatarSrc' expr:title='data:commentLevel1.author' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>

以下のコードで置換します。

<b:if cond='data:commentLevel1.authorUrl'>
<a class='rounded-pill jt-bg-light overflow-hidden d-block ratio ratio-1x1' expr:href='data:commentLevel1.authorUrl' rel='nofollow noopener' target='_blank'>
<img class='lazyload' expr:alt='data:commentLevel1.author' expr:data-src='data:commentLevel1.authorAvatarSrc contains &quot;/img/blank.gif&quot; ? data:anonymousImg : data:commentLevel1.authorAvatarSrc' expr:title='data:commentLevel1.author' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>
</a>
<b:else/>
<div class='rounded-pill jt-bg-light overflow-hidden d-block ratio ratio-1x1'>
<img class='lazyload' expr:alt='data:commentLevel1.author' expr:data-src='data:commentLevel1.authorAvatarSrc contains &quot;/img/blank.gif&quot; ? data:anonymousImg : data:commentLevel1.authorAvatarSrc' expr:title='data:commentLevel1.author' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>
</div>
</b:if>

以上の作業を、expr:data-src='data:commentLevel2.authorAvatarSrc'で検索しヒットする部分についてもLevel1をLevel2に置き換えて同様に行います。

「名前/URL」や「匿名」でコメント投稿したときにアバター画像として表示される blank.gifをanonymousImgで置き換え、それ以外（つまりBloggerログイン）のコメントアバターはそのまま表示するという条件式をimgタグ内に記述しました。

さらに、URLを設定した「名前/URL」やBloggerログインのコメントの場合、aタグを生成しリンク付きになるようにしています（<b:if>～</b:else>～</b:if>タグ）。

リンク化が不要の場合、<b:if>～<b:else/>までのコードと最後の</b:if>タグは不要で<img>タグの中だけ書き換えればOKです。

投稿者名のリンク化

<data:commentLevel1.author/>で検索しヒットする以下の部分を

<span class='d-block fs-7 fw-bold'>
<data:commentLevel1.author/>
<b:if cond='data:commentLevel1.authorUrl == data:post.author.profileUrl'>
<svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-check'/></svg>
</b:if>
</span>
<span class='d-inline-block fw-light text-secondary fs-8'><data:commentLevel1.timestamp/></span>

以下のコードで置換します。

<b:if cond='data:commentLevel1.authorUrl'>
<a class='d-inline-block fs-7 me-1 fw-bold' expr:href='data:commentLevel1.authorUrl' rel='nofollow noopener' target='_blank'><data:commentLevel1.author/></a>
<b:else/>
<span class='d-inline-block fs-7 me-1 fw-bold'><data:commentLevel1.author/></span>
</b:if>
<b:if cond='data:commentLevel1.authorUrl == data:post.author.profileUrl'>
<svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-check'/></svg>
</b:if>
<span class='d-block fw-light text-secondary fs-8'><data:commentLevel1.timestamp/></span>

以上の作業を、<data:commentLevel2.author/>で検索しヒットする部分についてもLevel1をLevel2に置き換えて同様に行います。

投稿者URLが存在する場合にaタグを生成して投稿者名を囲みリンク化する条件式を追加しました。また、コードの節約のため、aタグを生成する場合にもともとdivタグ内にあったclassをaタグ内に移動しています。さらにデザイン微調整のために、<span>タグの囲み方を調整し、上段の名前部分のクラスをd-inline-blockに、下段のタイムスタンプ部分をd-blockに変更しています。

チェックマークのデザイン調整

調整用クラスの追加

以下で検索しヒットする2カ所（commentLevel1とcommentLevel2用）について、

<svg aria-hidden='true' class='jt-icon'><use xlink:href='#i-check'/></svg>

classにpost-author-badge fs-8 rounded-pillを追加し以下のようにします。

<svg aria-hidden='true post-author-badge fs-8 rounded-pill' class='jt-icon'><use xlink:href='#i-check'/></svg>

それぞれ、

post-author-badge: CSSでのデザイン調整用（好きな名前でOK）。
fs-8: チェックマークのサイズ調整。他の数値でもOK。
rounded-pill: 背景の角を円にします。roundedだと丸角の四角形になります。

後者2つはJetTheme内およびBootStrapで使えるデザイン調整用のクラスです（fs-1～6はBootStrap標準、fs-7～9はJetTheme内で定義）。

参考

CSSでデザイン調整

以下のCSSをテーマ上方の/*Your custom CSS is here*/の下に記述します。

.post-author-badge {
stroke:#fff; //チェックマークの色
background-color:var(--bs-teal); //背景色
}

なお、コメントの少ない本ブログでは全ページでこのCSSを読み込む必要はないと考え、テーマ上方のCSS記述部分ではなく<div class='comments threaded mb-5' id='comments'>の直下に以下のように記述しています。

<b:if cond='data:post.numberOfComments gt 0'>
    <style>
     .post-author-badge { stroke:#fff; background-color:var(--bs-teal); }
    </style>
</b:if>

コメント数が0より大きい（つまりコメントがある）ページでのみこのスタイルを読み込むようになります。

コメントフォーム上部に注意書き・メッセージを追加

id='threaded-comment-form'で検索し、以下の箇所を見つけます。

<div class='mt-3 px-2 pt-2 jt-bg-light rounded d-none' id='threaded-comment-form'>

この直下に<div class='mx-1 fs-8' style='color: #686868;'>注意書き/メッセージ</div>を挿入し以下のようにします。

<div class='mt-3 px-2 pt-2 jt-bg-light rounded d-none' id='threaded-comment-form'>
<div class='mx-1 fs-8' style='color: #686868;'>注意書き/メッセージ</div>
<a class='d-none' href='#' id='comment-editor-src'>comment url</a>

classおよびstyleはお好みのデザインになるよう調整してください。

後書き

高機能なテンプレートのJetThemeですが、コメント欄の機能やデザインに少し物足りなさがありました。特に、Bloggerコメントの標準機能であるコメント投稿者URLやBloggerプロフィールを使えないのはもったいないなと。もしかしたら匿名アバターの簡素化やリンクの無効化は高速化の一環なのかもしれませんが、当ブログでは大量にコメントが付く記事はないので今のところ問題なさそうです。

ちなみに、今回のカスタマイズはBlogger独自タグのみで行えました。参考ページでは、返信機能付きの埋め込みコメント欄でのアバター画像変更は独自タグだけでは難しい（不可）との記述がありましたが、JetThemeでは問題なく適用できました。Bloggerの仕様変更か、JetThemeのコメント欄の実装方法によるものかもしれません（おそらく後者で、JetThemeではコメント投稿にのみ埋め込みコメントフォームを使い、コメント欄の表示はHTMLと独自タグで行っているためと思われます）。

Blog