コメント表示は、ひとつのタグでひとかたまりのHTMLを出力するタグセットになっています。
通常これらの内容は変更することはできませんが、カスタム機能を使うことで、ある程度カスタマイズすることができます。
また、ほとんどの要素にclassまたはidが付加されているので、CSSで見た目を制御することも可能です。
コメント関連タグのカスタム値一覧
コメントフォーム(第6世代テンプレート以降 <$CommentForm2$>)
カスタム値 | 機能 | 既定値 |
---|---|---|
CommentNotLoggedInText | コメントに認証が必要な場合の文言 | このブログにコメントするにはログインが必要です。 |
CommentLoggedInText | ログインしている時に表示される文言 | __nickname__ さん ログアウト |
CommentNotAuthorizedText | コメント許可ユーザ以外のアカウントでログインしている時の文言 | この記事には許可ユーザしかコメントができません。 |
CommentFormLegend | コメントフォームの見出し | コメントフォーム |
CommentFormName | 名前入力欄の見出し | 名前 |
CommentFormTextarea | コメント入力欄の見出し | コメント |
CommentFormRating | 評価ボタンのラベル | 評価する |
CommentFormRatingReset | 評価ボタンのリセット | リセット |
CommentFormRatingFace | 評価切り替えボタンのラベル | 顔 |
CommentFormRatingStar | 〃 | 星 |
CommentSubmit | コメント送信ボタンのラベル | 投稿する |
CommentFormCookie | 情報を記憶するボタンのラベル | 情報を記憶 |
コメントフォーム(第5世代テンプレート以前 <$CommentForm$>)
カスタム値 | 機能 | 既定値 |
---|---|---|
CommentOnThisArticleText | コメントフォームの見出し | コメントする |
CommentNotLoggedInText | コメントに認証が必要な場合の文言 | このブログにコメントするにはログインが必要です。 |
CommentLoggedInText | ログインしている時に表示される文言 | __nickname__ さん ログアウト |
CommentNotAuthorizedText | コメント許可ユーザ以外のアカウントでログインしている時の文言 | この記事には許可ユーザしかコメントができません。 |
CommentFormName | 名前入力欄の見出し | 名前 |
CommentFormCookie | 情報を記憶するボタンのラベル | 情報を記憶 |
CommentFormRating | 評価ボタンのラベル | 評価 |
CommentFormRating1Label | 評価選択項目のラベル | 1(最低) |
CommentFormRating2Label | 〃 | 2 |
CommentFormRating3Label | 〃 | 3 |
CommentFormRating4Label | 〃 | 4 |
CommentFormRating5Label | 〃 | 5(最高) |
CommentFormRatingFace | 評価切り替えボタンのラベル | 顔 |
CommentFormRatingStar | 〃 | 星 |
CommentFormEmojiAlt | 絵文字のラベル | 絵文字 |
CommentSubmit | 絵コメント送信ボタンのラベル | 投稿する |
コメント一覧(<$commentslist$>)</$commentslist$>
カスタム値 | 機能 | 既定値 |
---|---|---|
CommentsHeaderText | コメント一覧の見出し | コメント一覧 |
デフォルト2019テンプレートを元にカスタマイズしたサンプル
【HTML】
<SetVar CommentFormName>Name (required)</SetVar>
<SetVar CommentFormTextarea>Comment</SetVar>
<SetVar CommentSubmit>Post Comment</SetVar>
<SetVar CommentFormCookie>Remember</SetVar>
<$CommentForm2$>
【CSS】
#comment-form dt {
float: none;
width: auto;
text-align: left;
}
#comment-form dd {
margin: 0;
}
#comment-form .comment-form-body dt {
display: block;
}
#comment-form .comment-form-body .facemark,
#comment-form .comment-form-body .rating {
display: none;
}
※メールアドレスとURL入力欄の表示/非表示は管理画面から設定出来ます。
(ブログ管理画面>「ブログ設定」>「コメント」>「コメントの表示設定」)
さらに細かくカスタマイズしたい場合は、以下のソースを独自タグに差し替えて編集することもできます。
※ただし、コメント投稿フォーム部分に関しては、内容を変更した場合動作しなくなるおそれがあるため公開していません。
タグセットの内容
CommentsList:コメント一覧
【HTML】
<a name="comments"></a>
<IfArticleCommentCount>
<!-- CommentsList -->
<div class="article-option" id="comments-list">
<h3>コメント一覧</h3>
<ol>
<!-- CommentsLoop Start -->
<CommentsLoop>
<li class="comment-set">
<ul class="comment-info">
<li class="comment-author"><$CommentNumber$>.
<IfCommentUrl><a href="<$CommentUrl$>" class="comment-url"><$CommentAuthor ESCAPE$></a>
<ElseIfCommentEmail><a href="mailto:<$CommentEmail ESCAPE$>" class="comment-email"><$CommentAuthor ESCAPE$></a><Else><$CommentAuthor ESCAPE$>
</IfCommentUrl></li>
<li class="comment-date"><$CommentDateTime$></li>
<li class="comment-body">
<IfCommentRating><$CommentRatingIcon$></IfCommentRating>
<$CommentBody$></li>
</ul>
</li>
</CommentsLoop>
<!-- CommentsLoop End -->
</ol></div>
<!-- CommentsList End -->
</IfArticleCommentCount>
AllCommentsLoopを利用したカスタマイズ例(サンプル)
【HTML】
<a name="comments"></a>
<IfArticleCommentCount>
<!-- CommentsList -->
<div class="article-option" id="comments-list">
<h3>コメント一覧 (AllCommentsLoop)</h3>
<ol>
<!-- CommentsLoop Start -->
<SetVar CommentNumBase>500</SetVar>
<AllCommentsLoop>
<IfCommentStatus>
<li class="comment-set">
<ul class="comment-info">
<li class="comment-author"><$CommentNumber$>.
<IfCommentUrl><a href="<$CommentUrl$>" class="comment-url"><$CommentAuthor ESCAPE$></a>
<ElseIfCommentEmail><a href="mailto:<$CommentEmail ESCAPE$>" class="comment-email"><$CommentAuthor ESCAPE$></a>
<Else><$CommentAuthor ESCAPE$>
</IfCommentUrl></li>
<li class="comment-date"><$CommentDateTime$>
<span class="comment-id"> ID(CommentIdString): <$CommentIdString$></span></li>
<li class="comment-body">
<IfCommentRating><$CommentRatingIcon$></IfCommentRating>
<$CommentBody$>
</li>
</ul>
</li>
<Else><li class="comment-set comment-status-draft">
<ul class="comment-info">
<li class="comment-author"><$CommentNumber$></li>
<li class="comment-date"><$CommentDateTime$>
<span class="comment-id"> ID: <$CommentIdString$></span></li>
<li class="comment-body">このコメントは下書き設定です。</li>
</ul>
</li>
</IfCommentStatus>
</AllCommentsLoop>
<!-- CommentsLoop End -->
</ol>
</div>
<!-- CommentsList End -->
</IfArticleCommentCount>