Blogger Vaster2 ブログブログカスタマイズ

Vaster2のコメント欄を見やすくしてみた

ブログデザインをHTMLで編集

ブログのコメント欄の見え方に不満を感じたので、少しだけデザインを修正してみました。

いろいろ調べても、流石はBlogger。全然情報が出てきませんでした。
ので！自分で適当にいじってみました。

変更前

PCから見た場合
（赤枠＝新着コメント、青枠＝返信コメント）

PCから見た場合は、それほど悪くないと思います。強いて言えば、新着と返信コメントの間に区切りの線があったら、もう少し読みやすい？ってくらいでしょうか。

スマートフォンから見た場合
（赤枠＝新着コメント、青枠＝返信コメント）

赤矢印のところが、新着コメントの右いっぱいのところです。画面ギリギリのところまで文字があります。これは読みづらいと思うので、ここは修正対象とします。

CSS

/* コメント欄下区切り線 */
.comment-block{
 border-bottom: 3px dotted #A4A4A4 ;
 margin-top:3px;
}
/* 返信コメントの背景色 */
.comment-replies{
 background-color: #D8D8D8;
}
/* コメント欄内右側余白 */
.comment-content{
 padding-right:5%;
}

コメント欄のCSSがないようだったので、新しく作成しました。

comment-block

border-bottom: 3px dotted #A4A4A4 ;
コメント欄下部に、破線を追加。

margin-top:3px;
コメント欄上部に、余白を作成。

comment-replies

background-color: #D8D8D8;
返信コメントに、背景色を変更。

comment-content

padding-right:5%;
コメント欄全体の余白を右に追加。

変更後

PCから見た場合
（赤枠＝新着コメント、青枠＝返信コメント）

コメント欄下に破線を追加して、コメント間に区切りが作られました。また、返信コメント（青枠）の背景を色づけして、新着と返信の違いがわかりやすいようにしました。

スマートフォンから見た場合
（赤枠＝新着コメント、青枠＝返信コメント）

画面ギリギリまであった文字を、右側に余白をつけることにより余裕を持たせました。

Vaster2のコメント欄を見やすくしてみた

変更前