【QooQ 他】コメント欄のデザインカスタマイズ

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

先日当ブログで初めてコメントを頂いたのですが、その際カスタマイズしていたコメントの表示に関して気づいた点があって色々修正や調整しました。
ついでに他の新旧バージョンの各テーマでもテストしてみて、当ブログ以外でも概ねカバーできるように調整できましたので、今回はコメント欄のカスタマイズの内容を紹介したいと思います。

※テーマによっては上手く表示されない場合がありますのでご了承下さい。

CONTENTS

コメント欄にも装飾を

当ブログではコメント欄のデザインも色々拘っています。
そのままではやや味気ないコメント欄のデザインも、ちょっとした遊び心で手を加えるだけで楽しげな雰囲気に。
ネガティブなコメントやスパムでさえもなんだか嬉しく思え・・・るわけはないよね。

デフォルトのコメント表示 (Contempo)はこんな感じ。
(管理者以外から見た場合は、自分のコメント以外には「削除」やは表示されません)

コメントデフォルト

これをふじろじっくスタイルにカスタマイズすると・・・

↓↓

こうなります。

コメントアフター

こだわりその1「吹き出し風デザイン」

ブログ本文で、わかりやすく解説するために吹き出しを使って会話風にしているのをよく見かけますけど、コメントを吹き出しで装飾してみるのも中々楽しげな感じになってオススメです。ただし、アイコンは全部左側なので、会話っぽくは見えないかもしれません。

こだわりその2「オリジナルのアバター」

「名前/URL」や「匿名」での投稿時はアバター(アイコン)が何も表示されなくて寂しい(ていうか透明人間みたい)のでオリジナルのアバターが表示されるようにしました。
下記の CSS 内の画像URL を変えることにより、お好みの画像を設定することができます。サイズも自動調整されるので、予めリサイズしたり丸くする必要はありません。

コメントアバター

こだわりその3「返信・削除のボタンデザイン」

デフォルトではただのリンク表示ですが、枠を付けてボタン風にしました。
時系列表示の方だと 削除アイコン アイコンだけなので横に「削除」と表示されるようにしました。
それぞれのボタンのホバー時には青と赤の色が付きます。

削除返信ボタン

カスタマイズ手順

以下のコードを、テーマ編集(HTML)にて ]]></b:skin> の上に追記するだけでOKです。

/*アバター画像*/
.avatar-image-container {
    border-radius: 50%;
    width: 35px;
    height:35px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwndnuYD_lzXAqNRUteUCu2gwssWgjRJrdgK1EYFudpS_J3ld_x_61fK6rWJHXHeteSTnNT57VGCagoGQaXcnlTi9r_jdtYOZoiL5wdhahG-jJjhXU6lHwmcrRYKQiW1_t6uE5VmL_qs/s512/user-icon.png);
    background-repeat:no-repeat;
    background-size: contain;
    border: 1px solid #ddd;
}
/*コメント本文(吹き出しの中身)*/
.comment-block {
    background: #fff;
    padding: 1em 1em 2em!important;
    border-radius: 10px;
    position: relative;
    border: solid 1px #ccc;
    margin-bottom:.5em;
}
/*吹き出しデザイン(◁の部分)*/
.comment-block::before {
    content: "";
    position: absolute;
    top: 21px;
    left: -21px;
    margin-top: -8px;
    border: 10px solid transparent;
    border-right: 12px solid #fff;
    z-index: 2;
}
.comment-block::after {
    content: "";
    position: absolute;
    top: 21px;
    left: -23px;
    margin-top: -8px;
    border: 10px solid transparent;
    border-right: 12.2px solid #ccc;
    z-index: 1;
}
/*返信・削除ボタン*/
.comment-footer {
    float: right;
}
.comment-actions {
    position: absolute;
    right: 5px;
}
.comment-actions .comment-reply,
.comment-block .item-control a {
    color: #666;
    background: #fff;
    border: 1px solid #ddd;
    padding: 1px 6px!important;
    box-shadow: 1px 1px 2px -2px #999;
    border-radius: 20px;
}
.comment-actions .comment-reply:hover,
.comment-block .item-control a:hover,
.comment-delete:hover{
    text-decoration: none!important;
    color: #fff!important;
}
.comment-actions .comment-reply:hover {
    background: dodgerblue;
}
.comment-block .item-control a:hover {
    background: tomato;
}
.comment-delete::after {
    content:"削除";
}
.continue,
.thread-toggle {
    display: none!important;
}

参考記事

ファビコンサルワカ | サルでも分かる図解説明マガジン
サムネイル
CSSで作る！吹き出しデザインのサンプル19選
コピペで使える「吹き出し」のCSSサンプルをまとめました。使うのはHTMLとCSSだけ。シンプルなデザインから、円形、会話形式、LINE風チャット形式まで。
https://saruwakakun.com/html-css/reference/speech-bubble

QooQ ポップアップウィンドウ対応 CSS

QooQ でコメントの場所を「ポップアップウィンドウ」及び「フルページ」に設定している環境では上記の CSS では吹き出しが表示されません。

こちらが QooQ のポップアップウィンドウ / フルページ専用の CSS になっていますのでお試しくださいませ。

#comments-block {
    margin-left: 0!important;
}
.avatar-image-container {
    border-radius: 50%;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGR3zdnLc2TeY-fG-3524BPt5RySuQAIcXPYjfGGML1tczNJG6ZXcb7VSELbk-HaDcelNMLPSgLTaVATinGHK9m5I90IapbBMrTrXfLYvi2XV1gHoPrBw1JSyHhr2cIRpHVifvK5jaQc/s240/blank-avatar.png);
    background-size: cover;
    border: 1px solid #aaa;
    position: relative;
    top: -10px;
    margin-left: 50px;
 
}
.comment-timestamp {
    float: right;
    margin-right: -12px;
    position: relative;
    bottom: 35px;
    font-size: .9em;
}
.comment-author {
    margin: 3em 0 1em 5px!important;
    position: relative;
}
.comment-body {
    padding: 1em 1em 2em!important;
    margin-right: 0;
    border-radius: 5px;
    position: relative;
    border: solid 1px #aaa;
    background: #fff;
}
.comment-body::before {
    content: "";
    position: absolute;
    top: -21px;
    left: 26px;
    margin-left: -8px;
    border: 10px solid transparent;
    border-bottom: 12px solid #fff;
    z-index: 2;
}
.comment-body::after {
    content: "";
    position: absolute;
    top: -23px;
    left: 26px;
    margin-left: -8px;
    border: 10px solid transparent;
    border-bottom: 12px solid #aaa;
    z-index: 1;
}
.comment-delete img {
    vertical-align: middle;
}
.comment-delete {
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 1px 3px 0;
}
a.comment-delete:hover {
    background: tomato;
    color: #fff!important;
    border-color: tomato;
    opacity: 1!important;
}
.comment-delete::after {
    content:"削除";
}
.deleted-comment {
    opacity: .6;
}
QooQ吹き出し

補足情報: Vaster2 及び ZELO のポップアップ時のコメント表示に関して

最近知ったのですが、どうやら Vaster2 や無料版の ZELO でコメントの表示場所を「ポップアップウィンドウ」や「フルページ」にすると、コメント本文が表示されない仕様になってるようですね。(有料版の Orange や Prime はポップアップウィンドウでも表示されるようです)

証してみたところ、HTML 編集で以下のコードを追記すればコメント本文が表示されるようになるようですので、お困りの方がいましたらお試しくださいませ。
尚、吹き出しに関しては、QooQ のポップアップウィンドウ用として紹介した上記の CSS をご使用下さい。

①コメント本文表示手順

HTML を編集しますので、必ずテーマのバックアップを取ってから行って下さい。

まず、HTML 編集画面にて以下のタグを検索で探します。

編集画面内をクリックしてアクティブな状態にして Ctrl + F で左上に検索窓を出し、語句をコピペして Enter を押します。

<data:commentPostedByMsg/>

HTML

その下の </dt> と </b:loop> の間に以下のコードを挿入します。

                         <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
                           <b:if cond='data:comment.isDeleted'>
                             <span class='deleted-comment'><data:comment.body/></span>
                           <b:else/>
                             <p>
                               <data:comment.body/>
                             </p>
                           </b:if>
                         </dd>
                         <dd class='comment-footer'>
                           <span class='comment-timestamp'>
                             <a expr:href='data:comment.url' title='comment permalink'>
                               <data:comment.timestamp/>
                             </a>
                             <b:include data='comment' name='commentDeleteIcon'/>
                           </span>
                         </dd>
HTML2

②削除リンクアイコン表示手順

削除アイコン 削除アイコン のコードも抜けているようなので、これも追記して表示させます。

以下のタグを検索で見つけます。

<b:includable id='commentDeleteIcon' var='comment'>

HTML3

そのすぐ下に以下のコードを挿入します。

               <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
                 <b:if cond='data:showCmtPopup'>
                   <div class='goog-toggle-button'>
                     <div class='goog-inline-block comment-action-icon'/>
                   </div>
                 <b:else/>
                   <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
                     <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
                   </a>
                 </b:if>
               </span>
HTML4

あとはテーマを保存すればコメント本文と削除ボタンが表示されているはずです。