안녕하세요, 친절한효자손입니다. 본 내용은 친효스킨 버전 2.1 이상을 사용하시는 유저분들께서 활용 할 수 있는 색상표 입니다. 친효스킨 2.1 버전부터 새롭게 추가된 댓글 색상 기능을 좀 더 다양하고 이쁘면서 개성 넘치게 만들 수 있습니다. 기본적으로 채팅 스타일의 대화 형식의 댓글 화면을 구성하고 있습니다. 어느날 갑자기 "카톡 디자인으로 꾸미고 싶다" 라는 생각이 머릿속에 강하게 스쳐지났고 백문이 불여일견이므로 바로 적용을 위해서 코딩을 진행했습니다. 그 결과 만족스러운 결과에 도달 할 수 있었습니다.
변경된 댓글 화면 미리보기
기존 댓글 스타일에서 변경된 점은 다음과 같습니다.
1. 댓글 남길때마다 점선으로 구분선이 발생하여 가독성을 높임
2. 스킨편집 페이지에서 각 영역마다 컬러 수정이 가능함
3. 일부 영역 magin, padding 값 수정
이 세가지가 변경되고 추가되었습니다. 친효스킨은 반응형으로 제작되었기 때문에 댓글 화면 또한 반응형으로 변합니다. 스마트폰에서, 태블릿에서, PC화면에서 알아서 가로 사이즈가 변하면서 화면에 맞게 출력됩니다.
댓글 색상은 어떻게 수정하나요?
친효스킨의 스킨편집 페이지에서 진행 가능합니다.
티스토리 관리자 > 꾸미기 > 스킨편집 카테고리로 들어가시고 오른쪽에서 아래로 스크롤해보시면 색상설정(댓글) 항목이 보일겁니다. 여기에 있는 12개의 항목에 대해서 색상을 변경해 주시면 됩니다.
색상은 16진수 헥사코드를 사용합니다. 헥사코드를 가시적으로 쉽게 파악 할 수 있는 방법은 포토샵에서도 가능하지만 사이트에서도 쉽게 확인 할 수 있습니다. HTML 컬러 코드 사이트에 방문하시어 한번 실험해 보시기 바랍니다. 원하는 색상 코드를 메모장이나 기타 다른곳에 임시로 붙여넣기 하시고 위의 색상설정 화면에 복사해둔 코드를 사용하면 됩니다. 어렵지 않습니다.
카카오톡 테마 색상
각 항목별로 색상코드를 적어두겠습니다. 필요하시면 그대로 사용해 보시기 바랍니다. 색상코드 앞에 붙는 #은 생략했습니다.
위치
색상코드
댓글 레이아웃 배경색
6884B3
댓글 구분선
9FABCA
상대방댓글 배경색
FFF
상대방댓글 텍스트
222
내답글 배경색
FFEB34
내답글 텍스트
222
닉네임
FFF
아이콘
243D67
작성날짜
9FABCA
신고버튼
95F400
이전댓글 더보기 배경색
95F400
이전댓글 더보기 텍스트
222
이 코드를 그대로 사용하시면 카카오톡 테마처럼 표현이 가능합니다. 여러분들도 한번 자신만의 테마를 만들어서 연출해 보시기 바랍니다. 꽤 괜찮은 색상 조합이라고 생각되신다면 공유 좀 부탁드리겠습니다. 끝.