관리자가 남긴 댓글, 또는 방명록의 답글만 다르게 나타내는 방법에 대해서 간략하게 설명드리고자 합니다. 적용된 예시는 제 블로그에서 댓글이 달려있는 글들을 살펴보시면 되는데, 워낙 이 블로그에 댓글이 잘 달리지 않는 편이라서 그나마 댓글이 많이 달려있는 글을 링크해드리니 참고해주시길 바랍니다.
적용 예 : 검색 엔진 최적화의 기본, 타이틀 태그와 메타 태그(http://kakku.tistory.com/378)
1. 먼저 skin.html내의 댓글 / 방명록 구조를 확인합니다.
<댓글 관련 치환자 목록>
[ ##_rp_rep_id_##] : 전체 코멘트영역을 가리키는 아이디 - (최신 댓글을 클릭했을때 이 위치로 이동)
[ ##_rp_rep_class_##] : 비밀글, 관리자, 일반글에 따른 스타일을 지정하기 위한 치환자
[ ##_rp_rep_name_##] : 댓글 단 사람 이름
[ ##_rp_rep_date_##] : 댓글이 달린 날짜
[ ##_rp_rep_desc_##] : 댓글 내용
[ ##_rp_rep_link_##] : 댓글 주소
[ ##_rp_rep_onclick_delete_##] : 댓글 수정/삭제 온클릭 이벤트
[ ##_rp_rep_onclick_reply_##] : 댓글에 댓글 달기 온클릭 이벤트
먼저 rp_rep_class를 찾아 댓글 부분의 소스로 이동하시고, 수정하고자 하시는 부분이 어떤 클래스에 담겨있는지를 확인합니다. 예컨데, 댓글 내용 부분에 배경을 넣고 글씨 크기를 키우는등의 작업을 하고 싶으시다면 rp_rep_desc라는 치환자가 어떤 클래스에 속해있는지를 확인하시면 됩니다.
예) <span class="reply_desc">[ ##_rp_rep_desc_##]</span>에서 reply_desc부분.
<방명록 관련 치환자 목록>
[ ##_guest_rep_id_##] :
[ ##_guest_rep_class_##] : 방명록의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘
[ ##_guest_rep_name_##] : 글쓴사람 이름
[ ##_guest_rep_date_##] : 글쓴 날짜
[ ##_guest_rep_desc_##] : 글 내용
[ ##_guest_rep_onclick_delete_##] : 답글 삭제 온클릭 이벤트
[ ##_guest_rep_onclick_reply_##] : 답글 수정 온클릭 이벤트
이 역시도 앞선 댓글부분과 마찬가지로써, 먼저 guest_rep_class를 찾아 방명록 부분으로 이동하신뒤, 수정하고자 하는 부분의 클래스 명을 확인하시면 됩니다. 예를들어 방명록의 경우 관리자의 이름 앞에 관리자만의 특별한 아이콘을 추가하고 싶으시다면 guest_rep_name부분이 속해있는 클래스 이름을 확인하시면 됩니다.
예) <p class="guest_name">[ ##_guest_rep_class_##]</p>에서 guest_name부분.
2. 아래의 내용을 이용하여 원하는 모양대로 수정한 뒤 style.css에 추가합니다.
앞서서 클래스를 확인하셨다면 이를 통해 새로운 클래스를 만들어 style.css에 추가해주시면 됩니다. 아래에 몇가지 예를 드립니다.
.rp_admin .reply_desc
{ color:black;background:#e7f0f7; padding-left:10px; padding-right:10px; }
댓글의 경우에는 .rp_admin .찾은 클래스명 { 원하는 스타일 속성 } 으로 진행하시면 됩니다.
.guest_admin .cb_nick_name {padding-left:22px; letter-spacing:-0.5px;}
방명록의 경우 .guest_admin .찾은 클래스명 { 원하는 스타일 속성 } 으로 진행하시면 됩니다.
'Blog Tip > Design' 카테고리의 다른 글
티스토리 카테고리 목록 갤러리 형태로 보기 (37) | 2013.08.05 |
---|---|
원하는 모양대로 H 태그를 꾸며 사용하기 (4) | 2013.07.09 |
플로팅 상단 메뉴바 달기 (6) | 2013.03.06 |
플로팅 SNS 배너 달기 (5) | 2013.03.05 |
스킨 제공 상단 메뉴바에 드롭다운 메뉴 넣기 (7) | 2013.03.04 |
댓글