[티스토리 블로그 꾸미기] 댓글 글자색 쉽게 바꾸기 (2탄)

안녕하세요! 지난번에 티스토리 블로그 꾸미기 댓글 테두리 색상 쉽게 바꾸기는 방법을 소개해드렸습니다. 이번에는 이어서 댓글 글자색 쉽게 바꾸기 2탄을 알려드리겠습니다.

이 작업을 하려고 3시간을 헤맸지만, 여러분께서는 이 과정을 따라 하기 쉽게, 코드를 붙여 넣기만 하면 될 수 있도록 준비했습니다. 쉽고 따라 하기 쉬운 작업이니, 천천히 진행해 보세요!

잘 모르는 코드가 있거나, 필요한 코드는 자주 쓰는 CSS 속성 총정리 게시글에서 확인하세요!

이 작업은 티스토리 '북클럽' 스킨을 기준으로 진행합니다.

 

스킨 편집 들어가기

관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.

새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.

'꾸미기' 탭에서 '스킨 편집'을 클릭하면 새로운 창이 열립니다. 이 창의 오른쪽 상단에 'html 편집'을 클릭합니다.

 

CSS 코드 바꾸기

우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다.

html 편집 창에서 우측 상단에 'HTML ❘ CSS ❘ 파일업로드' 옵션 중 'CSS'를 클릭합니다.

 

기본 설정 확인

댓글 글자색이 연한 회색과 연한 검은색으로 다양하게 되어 있는 것을 확인할 수 있습니다.

댓글 기본 설정을 확인합니다.

 

댓글 글자색 변경_1

 

CSS 파일에서 코드 있는 곳 아무 곳이나 클릭 후 Ctrl+F를 눌러 검색창에 '.tt-comment-cont .tt-box-total .tt_txt_g'를 검색합니다.

CSS 파일에서 검색창에 'tt-comment-cont .tt-box-total .tt_txt_g'를 검색합니다.

아래 코드를 복사하여 글자색 변경 코드를 검색한 코드 위에 붙여 넣습니다. 그리고, 나머지 코드들은 지워줍니다.

.tt-comment-cont .tt-box-total .tt_txt_g /* 1. 댓글 글자 */,
.tt-comment-cont .tt-box-total .tt_num_g /* 2. 댓글 옆 숫자 */,
.tt-comment-cont .tt-wrap-cmt .tt-link-user /* 3. 닉네임 */,
.tt-comment-cont .tt-wrap-cmt .tt_desc /* 4. 댓글 내용 */,
.tt-box-textarea .tt_txt_user /* 5. 댓글 박스 닉네임 */ {
  font-size: 14px;
  color: #333;
}

글자색 변경 코드를 교체합니다.

미리보기로 각 코드 설명에 맞게 글자색이 변경된 것을 확인합니다.

글자색이 변경된 것을 확인합니다.

 

댓글 글자색 변경_2

 

방금 추가한 댓글 글자색 변경_1 코드 아래 엔터를 눌러 빈칸을 마련합니다. (2칸만 띄워주세요.)

아래 코드를 복사하여 빈칸에 붙여 넣습니다.

.tt-wrap-cmt .tt_date /* 날짜,시간 */,
.tt-link-comment .tt_txt_g /* 답글 */,
.tt-box-textarea .tt-cmt[contenteditable='true']:empty::before /* 댓글 박스 내용 */{
  color: #333 !important;
}

글자색 변경 코드를 복사하여 새로 추가하여 넣습니다.

미리보기로 글자색 변경이 되었는지 확인합니다.

글자색이 변경된 것을 확인합니다.

 

날짜와 답글 사이 구분선 색상 변경

방금 추가한 댓글 글자색 변경_2 코드 밑에 엔터를 눌러 빈칸을 마련합니다.

아래 코드를 복사하여 새로 추가하여 넣습니다.

.tt-wrap-info .tt_date+.tt-wrap-link-comment:before /* 날짜와 답글 사이 표시선 */{
  background-color: #111 !important;
}

표시선 색상 변경 코드를 복사하여 새로 추가하여 넣습니다.

미리보기로 표시선 색상이 변경된 것을 확인합니다.

표시선 색상 변경된 것을 확인합니다.

 

대댓글 답변 글자색, 배경색 변경

 

CSS 파일에서 코드 있는 곳 아무 곳이나 클릭 후 Ctrl+F를 눌러 검색창에 '.tt-comment-cont .tt-txt-mention'을 검색합니다.

아래 코드를 복사하여 '.tt-comment-cont .tt-txt-mention'를 교체합니다. (필요한 부분만 수정해도 괜찮습니다.)

.tt-comment-cont .tt-txt-mention /* 대댓글 멘션 */ {
  color: #0000ff;
  background-color: transparent;
}

.tt-comment-cont .tt-txt-mention::before /* 대댓글 멘션 배경 */{
  background-color: transparent;
}

대댓글 멘션 글자색,배경색 변경 코드를 복사하여 교체합니다.

미리보기로 대댓글 멘션 글자색과 배경색이 적용된 것을 확인합니다.

대댓글 멘션 글자색,배경색이 적용된 것을 확인합니다.

 

댓글 등록 버튼 배경색 변경

CSS 파일에서 코드 있는 곳 아무 곳이나 클릭 후 Ctrl+F를 눌러 검색창에 '.tt-comment-cont .tt-btn_register'을 검색합니다.

아래 코드를 복사하여 붙여 넣거나, 배경색 코드만 변경합니다.

.tt-comment-cont .tt-btn_register /* 댓글 등록 버튼 */{
  width: 100px;
  height: 36px;
  background-color: #333 !important;
  font-size: 14px;
  color: #fff;
  border-radius: 0;
  border-color: #333 !important;
}

댓글 등록 버튼 색상 변경 코드를 복사하여 붙여 넣거나, 수정합니다.

미리보기로 댓글 등록 버튼 색상이 변경된 것을 확인합니다.

댓글 등록 버튼 색상이 변경된 것을 확인합니다.

 

결론

이번 글에서는 댓글 섹션에 있는 글자색, 배경색 변경 방법을 알아보았습니다.

각 구간 별로 여러분 블로그의 스타일에 따라 마음에 드는 색상 또는 다양하게 꾸밀 수 있습니다. 다 적용하지 않고, 필요한 부분만 적용해도 충분히 괜찮습니다.

주의할 점은, '!important'를 사용하다 보니, 페이지 성능이 낮아질 수 있습니다. 적절하게 사용하여 이쁘게 꾸미시길 권장드립니다.

다음 글에서는 댓글 꾸미기 3탄 마우스 오버 효과주는 방법을 소개해드리겠습니다.

궁금한 점이나 문제가 있으면 댓글로 알려주세요!