LineMag 템플릿의 댓글 디자인이 너무 엉망이라 코드 수정을 해보았다.

새 구글 블로그의 테마를 LineMag 템플릿(무료 버전)으로 정하고 열심히 블로그를 키우다가 이전에 운영했던 티스토리 블로그의 이웃분들에게 이 블로그를 공개했습니다.
그리고 고맙게 닐기 님께서 방문해서 댓글을 달아주셨고, 덕분에 이 LineMag 템플릿의 또 다른 문제점을 발견하게 되었습니다.

LineMag 템플릿의 댓글 디자인이 엉망이다

(닐기 님께서 부담스러워 하실까봐 모자이크.. 본인 사진은 아니지만..)

이걸 한번 봐보세요.. 댓글 쪽의 디자인이 너무 구립니다.
저 빨간색의 '답글'이라는 글자 4개와 '댓글 추가'라는 글자까지..
미관만 해치고 별 기능도 없습니다.
제 캐릭터 이미지 바로 위에 있는 '▼ 답글'을 클릭할 때마다 제 답글이 사라졌다가 나타났다가 합니다. 정말 아무짝에도 쓸모없는 기능입니다.

LineMag 템플릿의 무료 버전만 이렇고 유료 버전은 정상인 것인지, 아니면 유료 버전도 이 모양인지 너무 궁금합니다.
근데 무료 버전이 이 모양 이 꼴이면 뭘 믿고 유료 버전을 구입할 수 있는 것인지..
어쨌든 HTML과 CSS 공부해두면 스스로 뜯어고칠 수 있습니다.
이제부터 뜯어고쳐봅시다.

웹사이트를 독학으로 만들고 싶다면? 공부 방법과 순서

웹사이트를 독학으로 만들고 싶은 사람들에게 처음에 어떤 언어를 어떤 순서로 배우면 좋은지, 어디서 배울지 있는지를 소개합니다.

HTML과 CSS 공부를 하실 분들은 위의 링크를 따라가서 보고 배우시면 됩니다.

쓸데없는 텍스트들 없애기

CSS 코드

display:none

위의 짧은 코드를 복사해서 두 군데에 붙여 넣을 겁니다.

블로그 관리 메뉴에서 테마 > HTML 편집으로 들어가서 [ctrl + F] 키를 누르고 'thread-arrow'를 검색합니다.
그러면 총 4개 정도가 나왔던 것 같은데, 그중에서 첫 번째 .thread-arrow 선택자에 display:none을 추가해줍니다.

또 [ctrl + F] 키를 누르고 이번엔 'thread-count'를 검색합니다.
그럼 딱 2개 나오는데, 그중에서 첫 번째 것에 display:none을 추가합니다.

이것으로 가장 큰 문제점은 해결되었습니다.
그런데 제 눈에는 아직 불만스러운 부분들이 많아서 몇 가지 더 수정을 해보려고 합니다.

최종 수정 결과

이렇게 바뀌었습니다.
정말 여러 가지를 수정했기 때문에 이 모든 과정을 이미지를 캡처해가며 자세히 알려드리기엔 스크롤의 압박이 심할 것 같아서 CSS를 공부하신 분이라면 충분히 알 정도로 글로만 설명을 드리겠습니다.

이미지의 크기를 조절하고, 동그라미 모양으로 만들기 위해서 .comments .avatar-image-container,.comments .avatar-image-container img 선택자를 찾아서 가로와 세로의 크기를 35px로 줄였고, border-radius의 값을 50% 줬습니다.

닉네임을 더 크게 표시하기 위해서 .comment-header 선택자를 찾아서 font-size:12px; 값을 완전히 삭제해버렸습니다.

닉네임이 대문자로만 표시되는 문제를 없애기 위해서 .comments .comments-content .user 선택자를 찾아 text-transform: uppercase; 값을 완전히 삭제했습니다. 그리고 다음 준비를 위해 display를 inline으로 변경했습니다.

댓글을 남긴 시각이 닉네임 아래가 아닌 오른쪽으로 정렬시키기 위해서 .comments .comments-content .datetime 선택자를 찾아서 float를 right로 변경했습니다.

전체적인 간격 조절을 위해 .comments .comment-block,.comments .comments-content .comment-replies 선택자를 찾아서 margin 값을 10px 0 0 50px;로 변경했습니다.