コメント欄を噴出し風にするCSS

目的

muragonのカスタマイズ。

コメント欄を噴出し風にする。
投稿コメントを左に、返信コメントを右に表示する。
この為、返信ボタンを非表示とし、管理者は以下から返信を行なう。投稿者と管理者の1:1の会話形式で表示する。
[コメン管理] > [ブログのコメント管理]

CSS

.entry-comments {
position : relative;
}

/* 日付 */
.comment-date {
position : absolute;
}

.comment-reply-contents .comment-date {
right : 0;
}

/* プロフィール画像 */
.comments .avatar img {
width : 32px;
height : 32px;
}

/* ユーザーID */
.comments .muragon-id {
display : none;
}

/* コメント */
.comment-content {
position : relative;
width : 60%;
margin : 0 0 20px auto;
border : 2px solid #B3E5FC;
border-top-right-radius : 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius : 5px;
padding : 5px;
}

.comment-reply-contents .comment-content {
margin : 0 auto 20px 0;
border : 2px solid #F8BBD0;
border-top-left-radius : 5px;
border-top-right-radius : 0;
}

.comment-content p {
margin : 0;
}

/* 返信 */
.comment-reply-contents {
margin-left : 0;
border-left : 0;
padding : 0;
}

/* 返信ボタン */
.comment-reply-btn {
display : none;
}

/* 噴出し */
.comment-content:before,
.comment-content:after {
content : "";
position : absolute;
width : 0;
height : 0;
}

.comment-content:before {
top : -2px;
left : -10px;
border-style : solid;
border-color : transparent #B3E5FC transparent transparent;
border-width : 0 10px 10px 0;
}

.comment-content:after {
top : 0;
left : -5px;
border-style : solid;
border-color : transparent #fff transparent transparent;
border-width : 0 8px 8px 0;
z-index : 10;
}

.comment-reply-contents .comment-content:before{
right : -10px;
left : auto;
border-color : transparent transparent transparent #F8BBD0;
border-width : 0 0 10px 10px;
}

.comment-reply-contents .comment-content:after{
left : auto;
right : -5px;
border-color : transparent transparent transparent #fff;
border-width : 0 0 8px 8px;
}