친절한효자손 취미생활

안녕하세요, 친절한효자손입니다. 본 내용은 친효스킨 버전 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

이 코드를 그대로 사용하시면 카카오톡 테마처럼 표현이 가능합니다. 여러분들도 한번 자신만의 테마를 만들어서 연출해 보시기 바랍니다. 꽤 괜찮은 색상 조합이라고 생각되신다면 공유 좀 부탁드리겠습니다. 끝.

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band
7

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

  1. 좋은 자료 공유 언제나 감사합니다. 저도 이제 2.1로 넘어갈 준비를 해야겠네요.
    2020.11.02 00:26 신고
    • 안녕하세요, 지금 보고 계신 이 댓글창이 그것입니다! 이쁘죠? ㅎㅎ 방문 감사합니다.
      2020.11.02 00:29 신고
  2. 왠지 댓글을 남기고 싶은 디자인~
    2020.11.02 15:40 신고
  3. 친효님 안녕하세요~!! 스킨의 짱 팬으로 잘 사용하고 있습니다. 이번에 업데이트된 카톡스타일의 댓글구분선이 저는 나오지가 않네요. 친효님 스킨의 CSS 를 살펴보니 contents. commentList .rgy-reply > li:not(:first-child) { 라고 되어 있는 이부분이 제 블로그에서는 없네요.. 소스를 확인할 수 있는 곳을 확인하니 이부분이 구분선을 표시하는 것 같은데요. 이리저리 둘러봐도 적용되는 걸 잘 모르겠네요. ㅠㅠ 무료로 이용하는 데 이거저거 내놔라(?)는 것같아서 죄송해요. 한번 확인해주실 수 있을까요?
    2020.11.14 11:48 신고
    • 안녕하세요. CSS에 보시면 #contents .commentList .rgy-reply > li:not(:nth-child(-n+2)) 이 부분이 있습니다. 이걸 아래처럼 바꿔주시면 됩니다.

      #contents .commentList .rgy-reply > li:not(:first-child)
      2020.11.14 23:02 신고
    • 친효님!! 말씀해주신 부분 CSS에서 찾아서 변경했더니 구분선이 나오네요. 시간내서 알려주셔서 정말 감사합니다. ^^

      비록 댓글이지만.. 친효스킨 늘 감사히 잘 사용하고 있다는 말씀 꼭 드리고 싶네요.
      2020.11.14 23:33 신고
loading