티스토리 square(스퀘어) 스킨은 심플해서 좋긴 한데 댓글 부분에 대한 디자인이 영 좋지 않은 것 같다. 이걸 당장 통째로 뜯어고치고 싶어도 능력이 없다. 그래서 일단 간단하게 글자(폰트) 크기를 작게 하고 색깔을 바꿔주는 등의 작업을 해 보았다.
1. #communicate 부분에서 .communicateList .name, date, p 부분이 각각 글 쓴 사람 이름, 날짜, 내용에 해당하는 부분이다. 여기에 원하는 글자 크기나 색깔 등에 대한 내용을 넣어주면 된다. 아래 색으로 강조한 부분이 개인적으로 새로 추가 또는 수정한 부분이다.
#communicate .communicateList .name { font-size: 15px; font-weight: 400; float: left; }
#communicate .communicateList .date { font-size: 13px; float: right; font-style: italic; color: #777; }
#communicate .communicateList p { font-size: 15px; color: #555; margin: 10px 0; padding: 0; line-height: 180%; }2. 그리고 square 스킨을 처음 적용해 보니 링크가 본문 글씨와 같은 색인 데다가 밑줄까지 가지 않은 게 기본 설정인 것 같다. 문제는 이 때문에 본문에서 어떤 게 링크가 걸렸는지 알기 어렵다. 그래서 본문에는 링크에 밑줄이 가게 수정해 보았더니 이번에는 댓글의 이름까지도 밑줄이 가게 되어 왠지 모르게 예쁘지 않다. 그래서 (링크가 걸린 댓글의) 이름에는 밑줄이 가지 않게 하기 위해 아래의 항목을 추가해 보았다(더불어 색깔과 굵기도 설정).
#communicate .communicateList .name a { color: #222; font-weight: 700; text-decoration: none; }3. 더불어 위의 CSS 231행의 padding에 값을 줘서 방문객 댓글에 대한 주인장의 코멘트는 들여쓰기 느낌이 나도록 했다.
#communicate .communicateList ul { margin: 0; padding: 30px; }