Google Blogger のブログの投稿と固定ページにはデフォルトでコメント欄が設置されています。
Blogger には残念ながらコメント欄のデザインのカスタマイズ機能はありません。
しかし、簡単ではありませんが、ブログテンプレートの HTML 編集によってカスタマイズが可能です。
以降、Blogger の独自 XML の文法、HTML、CSS、Javascript の理解を前提として進めます。
1. Blogger のコメント欄の仕様
コメント欄をカスタマイズするにはコメント欄の仕組みを理解する必要があります。
1-1. 入力フォームの仕様
コメントの入力フォームは Blogger 側が用意しているものを iframe で埋め込んでいるため、
その埋め込みの URL は投稿の場合このようになっています。
固定ページの場合はパラメーターが「pa=」の形になります。
さらに、コメントに対する返信の場合は URL の後ろにコメント ID のパラメーターが付きます。
コメントの入力フォームは Blogger 側が用意しているため、その中身の HTML 編集はできません。
1-2. 投稿されたコメントの表示
投稿されたコメントは、投稿 (または固定ページ) に Blogger のサーバーのデータが直接吐き出される仕組みです。
このため、入力フォームと違って自由に HTML 編集ができます。
2. 単純化した Blogger のコメント欄のサンプル
コメントを表示して、後はコメントの入力フォームの表示を Javascript で制御すればコメント欄を自作できます。
コメント欄の表示に必要なコードはとても量が多く複雑であり、文章での説明が難しいです。
なので、できるだけ単純化したコメント欄のコード自作しました。
これを、コメント欄のみを表示するブログテンプレートにしました。
すみませんが、全コードを掲載するとすごく長いので外部に公開します。
コメント欄のみ表示するテンプレート (xml ファイル) 単純化したコメント欄の実例 (ページ最下部)3. コードの解説
コードに出てくる data:post はそれぞれのブログ投稿のデータ、data:post.comment はそれぞれのコメントのデータと独自に定義しています。
3-1. コメントの表示許可
data:post.allowComments
その投稿でコメント欄を表示する設定になっているどうかの条件分岐です。表示しない設定ならば実行されません。
この条件分岐をコメント欄の最上部に置くことでコメント欄全体の表示非表示を切り替えています。
3-2. コメントと返信のデータ抽出
data:post.comments where (cmt => not cmt.inReplyTo)
これは返信を除く全てのコメントを抽出する部分です。
data:post.comments が個別のコメントのデータ、where の後がフィルターになっています。
このフィルターで返信を除外しています。フィルターがなければ、全コメントと返信がそのまま単純に並んでしまいます。
data:post.comments where (cmt => cmt.inReplyTo == data:post.comment)
これはコメントに付いた全ての返信を抽出する部分です。
data:posts[i].comments が個別のコメントデータですが、フィルターでそのコメントの返信のみを抽出しています。
3-3. コメントフォームのデータ
data:post.cmtfpIframe
これを条件分岐に使うことで、コメントの投稿が許可されていない時、コメントフォームの欄が表示されないようにしています。
data:post.cmtfpIframe は他の用途でも使っているので、次の 3-4. で説明します。
3-4. コメントフォームの表示に必要なコード
コメントフォームが正しく動作するのに必要なコードです。
<!--==入力==-->
<data:post.cmtfpIframe/>
<!--==コメント投稿許可時の出力==-->
<script src="https://www.blogger.com/static/v1/jsbin/[数字の並び]-comment_from_post_iframe.js"></script>
<!--==コメント投稿禁止時の出力==-->
<!--Can't find substitution for tag [post.cmtfpIframe]-->
これは iframe の高さの自動調整に必要です。
data:post.cmtfpIframe はコメントの投稿が許可されている場合のみ以下の script タグとなって出力されます。
コメント投稿が禁止されているとコメントアウトの形でエラーが出力されます。
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
これは Javascript のコードからの抜粋で、iframe の高さの自動調整に必要です。
`...
<a href='${url}' id='comment-editor-src'></a>
<iframe id='comment-editor' class='comment-iframe blogger-comment-from-post' src='${url}'></iframe>
...`
これも Javascript のコードからの抜粋で、生成されるコメントフォームの HTML コードです。${url} にはコメントフォームの iframe の URL が入ります。
id='comment-editor-src' はコメントフォームの iframe の読み込みに必要、id='comment-editor'は iframe の高さ調整に必要です。
<!--==入力==-->
<data:post.commentFormIframeSrc/>
<!--==コメント投稿許可時の出力==-->
https://www.blogger.com/comment/frame/[ブログID]?[po または pa]=[投稿ID]
<!--==コメント投稿禁止時の出力--==>
<!--Can't find substitution for tag [post.commentFormIframeSrc]-->
これはコメントフォームの iframe の URL のうちの以下の部分を出力するコードです。
コメント投稿が禁止されていると、エラーを出して Javascript のコードが破綻してしまいます。
<b:eval expr='data:post.commentFormIframeSrc ? "'" + data:post.commentFormIframeSrc + "'" : "NaN"'/>
その時は違う値 (ここでは "NaN") を出すように条件分岐させて対処しています。
<a expr:href='"javascript:generate_form('" + data:comment.id + "');"'>返信</a>
<a class='no-underline' href='javascript:generate_form(null);'>キャンセル</a>
返信ボタンとキャンセルボタンは generate_form() という関数を実行するボタンになっています。
この Javascript の関数はコメントフォームを生成するように私が独自に定義したものです。
返信ボタンは javascript:generate_form([コメントID]) の実行リンクとなり、そのコメントの返信フォームを生成します。
キャンセルボタンは [コメントID] の値がないため、コメントフォームを元の位置に再生成します。
3-5. コメントのユーザーアイコン
匿名またはプロフィールアイコン未設定のユーザーがコメントした場合、デフォルトではコメントのアイコン画像が
それぞれ 1×1 px の透明画像の空白 (//resources.blogblog.com/img/blank.gif)、
Blogger のロゴ (//www.blogger.com/img/blogger_logo_round_35.png)
になります。
この不統一感を無くすため、空白や Blogger のロゴを以下の Javascript のコードで代替画像に置き換えています。
document.querySelectorAll('\
.cmt-author-icon[src="//www.blogger.com/img/blogger_logo_round_35.png"], \
.cmt-author-icon[src="//resources.blogblog.com/img/blank.gif"]')
.forEach((icon) => {
icon.src =
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGydFPtioMcWBpCt2GFVdIKrqlfv2WTbqUoX4gCtiPrWlcAKS9O2GsH1bB3KBHV_NT88xMMG6uIFRfAPAzbDylgUHKotUYqn6gbOyTAqafh6_I8s4JjdYaHQ9cGcPPztHl3L_TSE9FYY9r2tKDcdUZOJwpLZSzjUKbBAXOnohXe1HkQsmNnLRPUQ/s100/%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E7%94%BB%E5%83%8F.png';
});
青色の箇所が代替画像の URL です。変えたい場合は自由に変えて下さい。