ブログのコメント欄をカスタマイズしました。
以前のカスタマイズは、アバターの選択肢がなかったのを使えるようにし、
各所微調整しました。備忘録です。
まず、
設定 > ディスカッション で「アバターの表示」にチェック入れる。
プラグイン「Simple Local Avatars」 を導入(インストール)
ユーザー > あなたのプロフィール で「Upload Avatar」 画像を取り込む
![コメント欄のカスタマイズ その2 アバター追加 「Simple Local Avatars」導入 1107 400x218 コメント欄のカスタマイズ その2 アバター追加 「Simple Local Avatars」導入](https://www.hcz.jp/blog/wp-content/uploads/2014/11/1107-400x218.png)
テーマディレクトリ内「style.css」のコメント欄を少し変更。
/*コメント欄のカスタマイズ*/
h3#comments {
font-size: 11px;
margin-bottom:20px;
margin-top:30px;
}
#comments .navigation {
padding: 0 0 18px 0;
}
.commentlist li.comment {
line-height: 24px;
margin: 0 16px 30px -30px;
padding: 10px 15px 0 15px;
box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.3);
background-color:#FFFFFF;
list-style: none;
font-size:12px;
}
.comment-author {
float:left;
}
.comment-author cite {
color: #000;
font-style: normal;
font-weight: bold;
padding: 0 0 12px 12px;
vertical-align:top;
}
.comment-author cite a {
color: #000;
font-style: normal;
font-weight: bold;
padding: 0 0 12px 12px;
vertical-align:top;
}
.comment-author span {
vertical-align:top;
margin-right:30px;}
.comment-meta { margin-bottom:20px;}
.comment-meta a:link,
.comment-meta a:visited {
color: #888;
}
.commentlist p{ margin-left:50px;}
.reply {
font-size: 12px;
padding: 0 0 10px 0;
}