【jQuery】匿名コメント投稿者のアバターを表示させる

2021/03/21 ｜2023/09/25 ｜2

Blogger は基本的にコメント投稿者が「匿名」または「名前/URL」の場合はアバターが何も表示されません。

何もないと寂しいし透明人間のよう？なので、当ブログでは匿名専用のアバターを用意して表示させていました。
表示方法は単純で、CSSで投稿者アイコンのクラス(.comment-author img)に background-image を当てて背景として設定していただけ。

ユーザーアバターがあるログイン投稿者の場合はアバター画像が背景画像よりも前面に来るので匿名アバターが見える心配はないんだけど、ユーザーアバターが透過PNGで隙間がある時は隙間から匿名アバターの一部が見えてしまうという欠点があるのが前から気になっていて、これを何とか改善出来ないものかと考えた。

とりあえず条件分岐を使ってログインユーザーとそうでない場合で振り分けて何とか出来ないものかと試みるも上手くいかず(匿名では出るが名前/URLだと出ない)。

匿名アバターは存在する

匿名アバターはなにもないと書いたけど、実はちゃんと専用のGIF画像(https://resources.blogblog.com/img/blank.gif)が存在する。但しサイズが 1×1 の透明な「点」なので見えないだけ。

調べてみたら jQuery で画像を差し替えるスクリプトがあるとのこと。せっかく jQuery を入れてるんだから使わない手はないなということで、試しにやってみたら簡単に出来ました。

というわけで、参考までにその導入手順を書いておきます。

導入手順

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。もしくはテスト用の環境(別ブログ)を用意してそちらで試されることをおすすめします。

jQuery の導入

jQuery 未導入の場合はまず以下のタグを <body> の下辺りにでも置いてください。

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>

スクリプトコード

以下のコードを </body> の上にコピペします。

補足: (たぶん需要はないとは思いますが)もし JetTheme で使われる場合は、コード内の src を全て data-src に直してください。

マーカーの部分は匿名アバター画像のURLです。ご自身で用意された画像を使う場合はURLを置き換えてください。

<b:if cond='data:view.isSingleItem'>
<script>
//<![CDATA[
$(function(){$('img[src="//resources.blogblog.com/img/blank.gif"]').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QxEdkKdCpCohluZ6AQPVFDVijkxxr6s2QhAdmoc2EDVRGEbScVaRTiIiXr9t_Q2bH59hfDGv1Hl6sIY1wlCUbwYE_Kous8emMdAdlXLPTcjXlKComjYwdIBfB0Hs4hm5ukzabJFtXOY/s40/avatar.png').attr('alt', '匿名')});
//]]>
</script>
</b:if>

jQuery に defer 属性を付けている場合

<script defer='defer' src='//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>

当ブログのように jQuery に非同期読込させるための defer 属性を付けている場合は動作しない可能性があります。その様な場合は一部を書き換えた以下のコードでお試しください。

<b:if cond='data:view.isSingleItem'>
<script>
//<![CDATA[
window.addEventListener('DOMContentLoaded', function(){$('img[src="//resources.blogblog.com/img/blank.gif"]').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QxEdkKdCpCohluZ6AQPVFDVijkxxr6s2QhAdmoc2EDVRGEbScVaRTiIiXr9t_Q2bH59hfDGv1Hl6sIY1wlCUbwYE_Kous8emMdAdlXLPTcjXlKComjYwdIBfB0Hs4hm5ukzabJFtXOY/s40/avatar.png').attr('alt', '匿名')});
//]]>
</script>
</b:if>

これでもう小さな透明人間はいなくなったはず？

2022/03/10 追記: No Image アバターも追加しました

アバター未設定の Blogger ユーザーの場合に表示されるアイコンもオリジナルの No Image アイコンに置き換えるようにしました。

→

<b:if cond='data:view.isSingleItem'>
<script>//<![CDATA[
window.addEventListener('DOMContentLoaded', function(){$('img[src="//resources.blogblog.com/img/blank.gif"]').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QxEdkKdCpCohluZ6AQPVFDVijkxxr6s2QhAdmoc2EDVRGEbScVaRTiIiXr9t_Q2bH59hfDGv1Hl6sIY1wlCUbwYE_Kous8emMdAdlXLPTcjXlKComjYwdIBfB0Hs4hm5ukzabJFtXOY/s40/avatar.png').attr('alt', '匿名'),$('img[src="//www.blogger.com/img/blogger_logo_round_35.png"]').attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgaUpgUlSHEHS_qwLm1Jar9ADXSrwxvtPyaHQvf0GV0v3k8pTK8Eu5HFdbPlAeyXhrUbZbbHQoXG0teMREC2r4IAJJA9J6Ib_TrkP7dBCAFgJpiKoMrleELOQ4QrGMC-O0q711hnxzJM8/s40-cc/no-image-avatar.png').attr('alt', 'No Image')});
//]]></script>
</b:if>

別に狙ったわけではないですが「N」「O」が目、「IMAGE」が口みたいで、ちょっと顔っぽく見えなくもないですね(笑)

というわけで…もっと顔っぽくしたバージョンも作ってみたので、良かったらお使いください😁