mizusame

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

【Blogger】コメント欄のアバター画像の変更（JavaScript 不要）

Blogger のコメント欄に「匿名」や「名前/URL」でコメントをすると、アバター画像として blank.gif という 1 px のドットが表示されることがあります。

画像としては存在しているものの目視はできないため、アバターを表示させたい場合これを別の画像に置き換えなければなりません。

そこで今回は、jQuery や 素の JavaScript（Vanilla JS）を使わず、Blogger の独自タグだけでコメント欄のアバター画像を表示する方法について書いていきます。

ただしこの方法が使えない場合もあるため、素の JavaScript でアバター画像を変更する方法もあわせて記します。

コメント欄のアバターの仕様

Blogger 標準のコメント欄のコードでは、アバター画像を出力するために <data:comment.authorAvatarImage/> というタグが使用されています。

しかしこのタグを使うと、Blogger の標準 JavaScript を無効にした際、アバター画像が全く表示されないという事態に陥るようです。

Bloggerのコメントを標準JSなしで実現してみる | IB-Note

代わりに <data:comment.authorAvatarSrc/> という、コメントのアバター画像 URL を出力するタグを使うことで、この問題を回避できます。

この <data:comment.authorAvatarSrc/> は、アバターを設定済みの Blogger ユーザー（Google アカウント）の場合、設定した画像の URL を出力します。

また、アバターが未設定の Blogger ユーザーの場合、こちらの Blogger アイコンの画像 URL を出力します。

アバター未設定の Blogger アカウント
blogger_logo_round_35.png
//www.blogger.com/img/blogger_logo_round_35.png

さらに、コメントを「匿名」または「名前/URL」で投稿したとき、冒頭で書いたように 1px の小さなドットの URL を出力します。

//resources.blogblog.com/img/blank.gif

ここまで書いてきた <data:comment.authorAvatarSrc/> が出力する URL について、表にまとめたものがこちらです。

コメントの種類data:comment.authorAvatarSrc が出力する URL
Blogger
ユーザー		アバター設定済み設定した画像の URL （n.bp.blogspot.com/..., 35 px の正方形）
アバター未設定//www.blogger.com/img/blogger_logo_round_35.png（35 px の正方形）
名前/URL（URL あり・なし）//resources.blogblog.com/img/blank.gif（1 px のドット）
匿名

この記事で記すアバター画像の置き換えのカスタマイズは、上の表のうち blank.gif と blogger_logo_round_35.png に対して行います。

埋め込みのスレッド型コメント欄について

Bloggerのコメント欄には、埋め込み、フルページ、ポップアップ ウィンドウの3 種類があります。

さらに、埋め込みのコメント欄はフラット型とスレッド型の 2 つに分かれます（フラット型、スレッド型という名前は私が勝手に付けたものです）。

フラット型は返信機能のないコメント欄で、コメント表示に使われているコードはフルページ、ポップアップと共通です。

そして、スレッド型は個々のコメントに返信機能が付いたもので、Blogger 設定の「サイトフィード」の「ブログフィードを許可」を「完全」にすると使えます。

Official Blogger Blog: Engage with your readers through threaded commenting（公式 Blogger ブログ：スレッド化されたコメントを通じて読者と交流する）

（実は言うと、「ブログフィードを許可」が「なし」、または「カスタム」かつ「ブログの投稿フィード」が「なし」の場合以外は、埋め込みでスレッド型コメント欄が使えるのですが、公式の記述に従っておきます）

このスレッド型のコメント欄だけ、表示に使われるコードが他のコメント欄と違います。

そのため埋め込みのスレッド型コメント欄では、 Blogger 独自タグだけを用いてアバター画像を変更する方法が使えません。

正確には使えなくはないですが、<data:post.commentHtml/> をわざわざ個々の要素に分解するという、とっても面倒な作業があるのでおすすめしません。

素の JavaScript（Vanilla JS） でアバター画像を置き換える方法ならスレッド型でも使えるので、この記事の後ろのほうにそのやり方を書いておきます。

独自タグだけでアバター画像を変更

ここから、JavaScript を使わずに Blogger 独自タグだけでアバター画像を変更する方法について書いていきます。

置き換え後の画像は以下の2つを使います。

匿名アバター用の画像
anonymous.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu92V9WtC_owbU3l-k77DlrBhhgXTQpUnXwH7uY5IEI5gbJ80DhaA4gb2NCzD5oBmXM6b9eScWd_7OEWEXrt1t8tHugIOCLZZXBtUJbWlbxxXER2ArD5NVmhOnF-ACvKEFT402nY8hF5o/s96-c-e365-fInvert=1/anonymous.png
アバター未設定のBloggerユーザー用の画像
noavatar.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_JlZQRHB0hmJODOyBK9pzhJPwZp309XkKxcyXm0NNeQv3Y-0KHwTW0MipXf1851ZqXJmbLCzmxca_Qs2W1TBExJw-IX0irAG7GaiAFghydZszYjj9faJ7jFT8geLO_KqO2PNdl7aii8I/s96-c-e365/noavatar.png

どちらも Canva というデザイン作成サービスを使って作りました。

アバター画像を変更するコードを、 <b:includable id='comments' var='post'> ... </b:if> 内の以下のコードと置き換えてください。

<b:if cond='data:blog.enabledCommentProfileImages'>
  ...
</b:if>

ウィジェットバージョン 2 でも同じような手順でできるはずです。

アバター設定済みの Blogger ユーザーの画像も含め、コメント欄のアバター画像自体のサイズは 96 px、アバターの表示サイズは 48 px にしています。

サイズの調整をしたい方は、コード内の画像 URL のパラメータや resizeImage の中身、img タグの width と height 等を適宜変更してください。

また、オリジナルのアバター画像を使いたい方は、コード内の URL（? の後ろの部分）を差し替えてください。

匿名アバターの画像だけを変更

「名前/URL」や「匿名」で投稿したときにアバター画像として表示される blank.gif を、オリジナルの匿名アバター anonymous.png に置き換えます。

アバター未設定の Blogger ユーザーはデフォルトの画像のままです。

<b:if cond='data:blog.enabledCommentProfileImages'>
  <b:comment>匿名アバター</b:comment>
  <b:with value='"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu92V9WtC_owbU3l-k77DlrBhhgXTQpUnXwH7uY5IEI5gbJ80DhaA4gb2NCzD5oBmXM6b9eScWd_7OEWEXrt1t8tHugIOCLZZXBtUJbWlbxxXER2ArD5NVmhOnF-ACvKEFT402nY8hF5o/s96-e365-fInvert=1-cc/anonymous.png"' var='anonymous'>
    <img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc contains "/img/blank.gif" ? data:anonymous : resizeImage(data:comment.authorAvatarSrc, 96,"1:1")' expr:title='data:comment.author' height='48' loading='lazy' width='48'/>
  </b:with>
</b:if>

b:with の value に匿名用のアバターの URL をセットしておきます。

<data:comment.authorAvatarSrc/> が blank.gif のときはオリジナルの匿名アバター anonymous.png を表示させ、
それ以外は resizeImage でサイズだけ変更（ただし、アバター未設定の Blogger ユーザーのアバターサイズはそのまま）という処理をしています。

また、外部リンク <data:comment.author/> を持つユーザーに対してのみ、b:tag を用いて a タグで img タグを囲うようにしました。

b:with と b:tag の詳しい使い方については、こちらの記事が参考になります。

匿名とアバター未設定の Blogger ユーザーのアバターを同じ画像に変更

「名前/URL」や「匿名」の blank.gif とアバター未設定の Blogger ユーザーの blogger_logo_round_35.png を、両方ともオリジナルの匿名アバター anonymous.png に置き換えます。

<b:if cond='data:blog.enabledCommentProfileImages'>
  <b:comment>匿名アバター / アバター未設定の Blogger ユーザー</b:comment>
  <b:with value='"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu92V9WtC_owbU3l-k77DlrBhhgXTQpUnXwH7uY5IEI5gbJ80DhaA4gb2NCzD5oBmXM6b9eScWd_7OEWEXrt1t8tHugIOCLZZXBtUJbWlbxxXER2ArD5NVmhOnF-ACvKEFT402nY8hF5o/s96-e365-fInvert=1-cc/anonymous.png"' var='anonymous'>
    <img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc contains "/img/blank.gif" or data:comment.authorAvatarSrc contains "/img/blogger_logo_round_35.png" ? data:anonymous : resizeImage(data:comment.authorAvatarSrc, 96,"1:1")' expr:title='data:comment.author' height='48' loading='lazy' width='48'/>
  </b:with>
</b:if>

b:with の value に匿名用のアバターの URL をセットしておきます。

これも処理的には先ほどのコードと同じ要領で、<data:comment.authorAvatarSrc/> が blank.gif か blogger_logo_round_35.png のときは、オリジナルの匿名アバター anonymous.png に置き換え、それ以外のときは resizeImage でアバターのサイズを変更しています。

匿名とアバター未設定の Blogger ユーザーのアバターを別々の画像に変更

「名前/URL」や「匿名」 blank.gif を anonymous.png に、アバター未設定の Blogger ユーザーの blogger_logo_round_35.png を noavatar.png にそれぞれ置き換えます。

<b:if cond='data:blog.enabledCommentProfileImages'>
  <b:comment>匿名アバター</b:comment>
  <b:with value='"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu92V9WtC_owbU3l-k77DlrBhhgXTQpUnXwH7uY5IEI5gbJ80DhaA4gb2NCzD5oBmXM6b9eScWd_7OEWEXrt1t8tHugIOCLZZXBtUJbWlbxxXER2ArD5NVmhOnF-ACvKEFT402nY8hF5o/s96-e365-fInvert=1-cc/anonymous.png"' var='anonymous'>
    <b:comment>アバター未設定の Blogger ユーザー</b:comment>
    <b:with value='"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_JlZQRHB0hmJODOyBK9pzhJPwZp309XkKxcyXm0NNeQv3Y-0KHwTW0MipXf1851ZqXJmbLCzmxca_Qs2W1TBExJw-IX0irAG7GaiAFghydZszYjj9faJ7jFT8geLO_KqO2PNdl7aii8I/s96-c-e365/noavatar.png"' var='noavatar'>
      <img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc contains "/img/blank.gif" ? data:anonymous : (data:comment.authorAvatarSrc contains "/img/blogger_logo_round_35.png" ? data:noavatar : resizeImage(data:comment.authorAvatarSrc, 96,"1:1"))' expr:title='data:comment.author' height='48' loading='lazy' width='48'/>
    </b:with>
  </b:with>
</b:if>

1 つ目の b:with の value に匿名用の画像 URL を、2 つ目の b:with の value にアバター未設定の Blogger ユーザー用の画像 URL をセットしておきます。

以下が、上のコードの img タグの src 属性の条件式を抜き出したものです。

data:comment.authorAvatarSrc contains "/img/blank.gif" ? data:anonymous : (data:comment.authorAvatarSrc contains "/img/blogger_logo_round_35.png" ? data:noavatar : resizeImage(data:comment.authorAvatarSrc, 96,"1:1"))

<data:comment.authorAvatarSrc/>が blank.gif だったときは anonymous.png に、blogger_logo_round_35.png だったときは noavatar.png にそれぞれ置換しています。

そのどちらでもない場合は、アバター設定済みの Blogger ユーザーのアバター画像を resizeImage でサイズ変更する、という手順です。

【おまけ】JavaScript でアバター画像を変更

記事タイトルに“JavaScript 不要”とは書いていますが、素の JavaScript でアバター画像を変更するスクリプトも作りました。

こちらは、埋め込みのスレッド型を含む全てのコメント欄で動作します。

以下の記事で書かれている jQuery でアバター画像を変更するコードを、素の JavaScript を使ったものに書き換えました。

【jQuery】匿名コメント投稿者のアバターを表示させる | ふじろじっく

以下のコードを</body>の上あたりに貼り付けます。

<b:if cond='data:view.isSingleItem'>
<script>//<![CDATA[
window.addEventListener('DOMContentLoaded', function(){
  const anonymous = document.querySelectorAll('img[src="//resources.blogblog.com/img/blank.gif"]');
  const noavatar = document.querySelectorAll('img[src="//www.blogger.com/img/blogger_logo_round_35.png"]');
  for(let i = 0; i < anonymous.length; i++){
    anonymous[i].setAttribute('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu92V9WtC_owbU3l-k77DlrBhhgXTQpUnXwH7uY5IEI5gbJ80DhaA4gb2NCzD5oBmXM6b9eScWd_7OEWEXrt1t8tHugIOCLZZXBtUJbWlbxxXER2ArD5NVmhOnF-ACvKEFT402nY8hF5o/s96-c-e365-fInvert=1/anonymous.png');
    anonymous[i].setAttribute('alt','匿名')
  }
  for(let j = 0; j < noavatar.length; j++){
    noavatar[j].setAttribute('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_JlZQRHB0hmJODOyBK9pzhJPwZp309XkKxcyXm0NNeQv3Y-0KHwTW0MipXf1851ZqXJmbLCzmxca_Qs2W1TBExJw-IX0irAG7GaiAFghydZszYjj9faJ7jFT8geLO_KqO2PNdl7aii8I/s96-c-e365/noavatar.png');
    noavatar[j].setAttribute('alt','アバター未設定')
  }
});
//]]></script>
</b:if>

こちらも、オリジナルのアバター画像を使いたい方は、コード内の URL（コードの太字部分）を差し替えてください。

あとがき

jQuery や 素の JavaScript（Vanilla JS）を使わず、Blogger の独自タグだけでコメント欄のアバター画像を変更する方法について書きました。

また、素の JavaScript でアバター画像を変更する方法も併記しました。

Blogger の独自タグについて調べていたときに b:with タグの仕様を知り、あれこれもしかしてコメント欄のアバター画像変えるのに使える……？　と思い立った結果この記事が書けました。

難しそうで今まで避けていた b:with と b:tag について理解を深めることができてよかったです。

匿名やアバター未設定の Blogger ユーザーのアバター画像を変更したいけど、jQuery を導入するほどでは……な方の参考になれば幸いです。

    編集
    新しい投稿 前の投稿
    ホーム