コメント欄に関する2つのカスタマイズについて解説します。
尚、QooQ テーマでの実装方法しか検証していないため、他のテーマでの動作保証は出来ませんのであしからず。
カスタマイズ① 管理者の名前に判別用マークを表示
ブログ管理者とその他の投稿者を区別しやすくするために管理者の名前の横にマークを付けます。マークはこのような SVG を使用します。
コメントの場所が「埋め込み」の場合と「ポップアップ/フルページ」の場合でそれぞれやり方が異なります。両方適用してもアイコンが重複して表示される心配はありません。
コメントの場所が「埋め込み」の場合は CSS を追記
公式テーマの「シンプル」等で使われているやり方で、管理者に自動的に付与されるクラス名(.blog-author)に CSS で背景としてアイコンを表示させます。
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16"><circle cx="16" cy="15.9" fill="dodgerblue" r="15.8"></circle><polygon fill="%23fff" points="23,9 13.2,18.8 9,14.5 6.4,17 10.7,21.3 13.2,23.8 15.8,21.3 25.6,11.5 "></polygon></svg>');
}
ポップアップ/フルページの場合は HTML を編集
Blogger 独自タグを利用したやり方で、コメント投稿者のリンク URL がブログ管理者のプロフィール URL と一致した場合にアイコンを表示させるようにします。
HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。もしくはテスト用の環境(別ブログ)を用意してそちらで試されることをおすすめします。
まず検索で <b:if cond='data:comment.authorUrl'> を探して、以下の所の5行のコードを書き換えます。
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if><b:if cond='data:comment.authorUrl == data:post.authorProfileUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow noopener' target='_blank' title='Author'>
<data:comment.author/>
<svg height="16" viewbox="0 0 32 32" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="15.9" fill="dodgerblue" r="15.8"/><polygon fill="#fff" points="23,9 13.2,18.8 9,14.5 6.4,17 10.7,21.3 13.2,23.8 15.8,21.3 25.6,11.5"/></svg>
</a>
<b:elseif cond='data:comment.authorUrl'/>
<a expr:href='data:comment.authorUrl' rel='nofollow noopener' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
注意点と回避策
非公開ブログ及び、プロフィールページのマイブログ一覧に載せていないブログの場合は data:post.authorProfileUrl (管理者プロフィールページの URL) が出力されないので要注意。正しく処理されないため想定とは逆に管理者以外のユーザー名にマークが付いてしまいます。
ちなみにマイブログ一覧に載せるブログはここで選択できます→ https://www.blogger.com/edit-profile-displayed-blogs.g※非公開設定のブログはこのリストに表示されません。
テストブログ等、リストに載せたくない場合の回避策としては data タグではなく直接 "URL" を書きます。("と"で囲むのを忘れずに)
<b:if cond='data:comment.authorUrl == "https://www.blogger.com/profile/xxxxx"'>
<a expr:href='data:comment.authorUrl' rel='nofollow noopener' target='_blank' title='Author'>
<data:comment.author/>
<svg height="16" viewbox="0 0 32 32" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="15.9" fill="dodgerblue" r="15.8"/><polygon fill="#fff" points="23,9 13.2,18.8 9,14.5 6.4,17 10.7,21.3 13.2,23.8 15.8,21.3 25.6,11.5"/></svg>
</a>
<b:elseif cond='data:comment.authorUrl'/>
<a expr:href='data:comment.authorUrl' rel='nofollow noopener' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>名前/URL での投稿者が URL 欄に管理者のプロフ URL を入れた場合もマークが付いてしまうというリスクもありますが、わざわざそんな嫌がらせをする人はいないですよね？w もしいたらスパム扱いで削除しますのであしからずw
参考までにもう一つのやり方を
1行目のタグを以下のようにすると「名前」が一致した時にマークが付きます。
但し、同名の他人が投稿した場合もマークが付いてしまうリスクがあるため、あまりオススメはできません(^^;
<b:if cond='data:comment.author == data:post.author'>最新コメントウィジェットでも
最新コメントウィジェットでもマークが付くように工夫してみました。同じウィジェットを使われている方はお試しください。
このウィジェットではプロフィール URL は取得できないので、アイコン画像 URL(ファイル名)で判定させてあります。当ブログの場合、ファイル名が peanutized-fujiyan.png だったら名前にマークが付きます。もしアイコンを変えたくなった時でも、同じファイル名でアップロードすれば修正する必要はないと思います。
スクリプトの以下の所にコードを挿入します。ご自身のアイコン URL を調べて当該箇所を置き換えてください。
if (a_img.match(/blank.gif/)) {
a_img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3XCF5B8rplevrjGQgszzXck6-fvZctqKByK48v7L_JqjjSw0BO-lbS-Zamv_rH0SBxyYUqMgG583e3QnSZTPqFUJOaC7cAIdh_kHFovcw7zHR_PZDoBCqxsEWh8SEHhul-CekG3It-ka/s35/user.png"; //匿名画像
}
if (a_img.match(/peanutized-fujiyan.png/)) { //管理者名にマークを付ける
a_name = a_name + '<svg height="16" viewbox="0 0 32 32" width="16" xmlns="http://www.w3.org/2000/svg" style="margin-left:3px"><circle cx="16" cy="15.9" fill="dodgerblue" r="15.8"/><polygon fill="#fff" points="23,9 13.2,18.8 9,14.5 6.4,17 10.7,21.3 13.2,23.8 15.8,21.3 25.6,11.5"/></svg>';
}
a_time = new Date(entry.published.$t);カスタマイズ② コメント投稿者アイコンサイズを拡大
デフォルトでは 35×35px でしか表示されない仕様なので、好みの大きさに拡大できるようにします。CSS や style で無理やり拡大するのではなく、Blogger 独自のコードで元画像 URL のサイズパラメータを変更するため、画像がボヤケたりすることはありません。
このカスタマイズが適用できるのは「ポップアップ/フルページ」の場合のみです。埋め込みの場合のアイコンサイズの変更は JavaScript でなんとかするか HTML を大幅に改造するしかないかも？(^^;
検索で <data:comment.authorAvatarImage/> を探し、以下のコードと入替えます。
50px にする場合の例です。(data:comment.authorAvatarSrc, 50) だとパラメータが w50(幅50px) になります。
<img expr:alt='data:comment.author' expr:src='resizeImage(data:comment.authorAvatarSrc, 50)' height='50' loading='lazy' width='50'/> |
| 80px に拡大 |
コメントに関するその他のカスタマイズ記事
こちらも宜しければどうぞ。
ふじろじっく
【QooQ 他】コメント欄のデザインカスタマイズコメント欄を色々装飾してみよう。https://fujilogic.blogspot.com/2019/06/comment-field-design-customize.html
ふじろじっく
【jQuery】匿名コメント投稿者のアバターを表示させるjQueryで画像を置き換えて匿名アバターを表示させてみたhttps://fujilogic.blogspot.com/2021/03/display-anonymous-avatar-jquery.html
2026/10/10 追記: 改良版のタグコードに変更しました
namimoriさんに教えていただいたデータタグに変更することで、より正確にブログ管理者を判別できるようになるようです。詳細はこちらの記事をご覧ください。
広く浅く生きる。
【Blogger】ブログ投稿者コメントの本人判定条件について - 広く浅く生きる。Bloggerテーマ「JetTheme」や「F-light」などで、コメント欄のブログ著者（本人）マークが他人のコメントや匿名ユーザーに付いてしまう現象の原因と修正方法を解説。data:comment.extraIconClassを使い、より正確に本人判定するカスタマイズです。https://hirokuasaku-live.blogspot.com/2026/10/blogger-author-comment.html
F-lightの全てのテーマファイルも改良版のコードにアップデートしました。
コメントを投稿
別ページに移動します9 件のコメント (新着順)
>namimoriさん
当記事にも追記させていただきました〜
ふじやんさん
返信ありがとうございます！
解説だなんてとんでもないです🙇
あくまで自分なりに検証しての推測に過ぎない内容なので…
「INFO」欄への掲載ありがとうございます。ブログ記事の方にも配布XMLファイルでは既に修正済みの旨を追記させていただきました！
>namimoriさん
解説ありがとうございます！
なるほど、インポートコメントにアイコンが表示されないのがずっと疑問だったんですが、ログイン情報の欠落のせいだったんですね(^^;
納得できましたので、extraIconClassを使わせていただきます(^^)
ふじやんさん
返信ありがとうございます！
閲覧リスト入り恐縮です🙇
>「もしかしたらインポートコメントにはアイコンが表示されないことと関係あり？ 」
まさにそれが原因かと思います。
インポート記事のコメント欄を拝見しましたが、どうやら当該コメントはログイン状態情報は失われて「名前/URL」同等のコメントとなっているようです（アバターの画像ソースがBloggerプロフィール画像ではなくプロフURLのファビコン取得URLになっていました）。
つまり旧コードにおける「名前/URL での投稿者が URL 欄に管理者のプロフ URL を入れた場合もマークが付いてしまう～」のような状態ですね😅
extraIconClassはおそらくログインユーザー情報を見てblog-authorを出し分けてると思われますが、記事エクスポートまたはインポートの際に「ログインしてコメントした」という情報が失われてしまうのが原因で旧ブログからの記事コメントにはマークが付かないものと思われます。
なので旧記事のコメントにマークが付かないのはイレギュラーで、本来の表示意図としてはextraIconClassを使う方がより正確かなと。
もしかしたらインポートコメントにはアイコンが表示されないことと関係あり？
>namimoriさん
こんばんは。私もnamimoriさんのブログは閲覧リストに登録して拝読しております(^^)
有益な情報ありがとうございます！
extraIconClass なんて便利なモノがあったんですね〜全然知りませんでした。
早速当ブログで試してみたところ、問題なくチェックが付いた…と思いきや、どうやらインポートした記事に付いていたコメントにはチェックが付かないみたいですね(^^;
(旧コードだとチェックが付きます)
何か解決方法があるのかもしれませんが、当方の環境はスマホしかないので検証はほぼ無理…
というわけで、非常に迷ったのですが、F-lightへの適用は今回は見送らせていただきますm(_ _)m
はじめまして。いつもカスタマイズ方法など参考にさせていただいております。
コメント欄のブログ管理者にマークを付ける条件式についてですが、data:comment.extraIconClass（ウィジェットバージョン1ではdata:comment.authorClass）というデータタグを使えば正確にブログ著者とコメント投稿者の一致を判定できることを発見しました。ブログ投稿者とコメント投稿者とが一致する場合のみblog-authorという値が出力されるのでそれで判定できます。
修正方法は以下のブログ記事にまとめました。
https://hirokuasaku-live.blogspot.com/2026/10/blogger-author-comment.html
元々のコードでもなりすましコメントができるわけでもないのであまり気にする必要はない部分ですが（笑）、F-lightでも使われてる条件式だったので一応バグ（？）報告も兼ねてコメントいたしました。
Fumaさん、こんにちは。
お役に立てたようで何よりです。
ちなみに、埋込時のやり方はシンプルテーマを参考にしていますが、フルページに関しては今回も JetTheme の真似でした(笑)
こんにちは。以前からこちらのカスタマイズが気になっていて、当ブログでも本日導入させて頂きました。管理人からのコメントが区別しやすくなってとても良いですね。わかりやすい記事をありがとうございます。