【QooQ】コメント欄の表示をカスタマイズ

｜2023/09/25 ｜2
アイキャッチ

コメント欄に関する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