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

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

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

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

変更前

01Bloggerコメント欄変更前PC表示

PCから見た場合
(赤枠=新着コメント、青枠=返信コメント)

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

02Bloggerコメント欄変更前スマホ表示

スマートフォンから見た場合
(赤枠=新着コメント、青枠=返信コメント)

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

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%;
コメント欄全体の余白を右に追加。

変更後

03Bloggerコメント欄変更後PC表示

PCから見た場合
(赤枠=新着コメント、青枠=返信コメント)

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

04Bloggerコメント欄変更後スマホ表示

スマートフォンから見た場合
(赤枠=新着コメント、青枠=返信コメント)

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

スポンサーリンク
スポンサーリンク

ふぉろみー

ブログ更新ツイッター作りました。スロット以外はこっちで告知されます。(フィギュアetc)
よかったらフォローしてください!
 

いろいろつぶやくアカウントはこちら
 

ブログランキング参加中

よかったら押してください!
ブログランキング・にほんブログ村へ

0 件のコメント :

コメントを投稿