Home

티스토리 방명록 & 댓글 아이콘 꾸미기

여러 사이트에서 댓글 및 방명록에 글을 남겼을 때 자신을 대표하는 아이콘이 나오게 되죠.. 티스토리도 마찬가지로 로그인 했을 때 자신의 아이콘이 나오지만 비 로그인이나 티스토리 계정을 없을 때는 아무런 아이콘이 나오지 않습니다. 페이스북이나 유튜브 등 기타 여러 사이트는 아이콘 설정을 하지 않거나 비 로그인 시에 따로 보여주는 게스트 아이디 나옵니다. 비 로그인 댓글들로 인하여 댓글이 많이 달인 글을 보면 들숙날숙 보기가 별로 안 좋아서 style.css 둘러보다 수차례 실패 끝에 대충 흉내를 낼 수 있는 방법을 찾았습니다. ㅎㅎ


기존 작성했던 float: 방식에 문제가 있어 position: 방식으로 수정 하였습니다.

미리보기 - http://speedink.tistory.com/guestbook

게스트 아이콘은 제 기준으로 적용 되었고 일부 적용이 힘든 스킨이 있을 수도 있습니다.

/* 종류별 코멘트 [##_rp_rep_class_##] */
.rp_general             {  }
.rp_admin span.name	{  }
.rp_secret              { color:#f30; }
/* 종류별 방명록 글 [##_guest_rep_class_##] */
.guest_general          {  }
.guest_admin p.ctrlGuest,
.guest_admin p.ctrlGuestRe {  }
/* 비밀 댓글 (로그아웃시 비밀글 표현)    */
.hiddenComment {  }

힌트를 얻은 티스토리 기본 스킨에 포함되어있는 명령어 입니다. 


style.css 문서 내에 저 문구가 없어도 상관없고 있으시면 다 지우시던지 괄호안에 내용만 지우셔도 됩니다.


 <-- 방명록 리스트
  1. [##_guest_rep_name_##] [##_guest_rep_date_##] MODIFY/DELETE REPLY

    [##_guest_rep_desc_##]

    • [##_guest_rep_name_##] [##_guest_rep_date_##] MODIFY/DELETE

      [##_guest_rep_desc_##]

<-- 댓글 리스트
  1. [##_rp_rep_name_##] [##_rp_rep_date_##]  댓글주소  수정/삭제  댓글쓰기

    [##_rp_rep_desc_##]

티스토리 스킨가이드의 방명록 & 댓글 리스트 skin.html 초기 소스입니다.


위 소스를 기준으로 css 설정 방법을 설명해 드리겠습니다.



.guestList li { position: relative; } 

.guestList li ul li { position: relative; } 


position:absolute; 속성을 사용하기 위해 position:relative; 속성값으로 기준점을 잡아줍니다. li 부분이 댓글이고 li ul li 부분이 댓글의 댓글 입니다. 기존 속성들 사이에 position:relative; 속성만 삽입하면 됩니다.


예)

.guestList li { margin:0; padding:10px 0 20px 10px; list-style:none; position: relative; }

.guestList li ul li  { margin-bottom:10px; padding:10px; position: relative; }





.guestList img { position:absolute; }


position:absolute; 적용 후 이미지가 공중에 떠버린 상황입니다. 공중에 떠서 왼쪽으로 붙어버린 본문과 아이디를 이미지 크기 만큼 밀어 줘야 하겠습니다.




아이디가 오른쪽으로 밀리면서 이미지도 같이 밀리기 때문에 position:absolute; 속성을 적용한 이미지를 위치까지 잡아줍니다.



.guestList span.name { margin-left:73px; }

.guestList img { top:10px; left:10px; width:64px; height:64px; position:absolute; }

.guestList span.name 부분이 작성자 아이디를 표현하는 부분이고 top:10px left:10px 속성값은 li 클래스에서 기준을 잡아 줬기 때문에 li 클래스 내에서 왼쪽 위에 붙인다는 뜻이고 속성값은  적당히 정해주시면 됩니다.



guestList .desc     { margin:0 0 0 75px; }

본문도 오른쪽으로 적당히 밀어 줍니다.

 HTML 문서의 <p>[##_guest_rep_desc_##]</p> 기본적으로 클래스가 없습니다. 사용중인 스킨에 클래스가 있으면 그대로 사용하시면 되고 없다면 <p class="desc">[##_guest_rep_desc_##]</p> 이런 식으로 만들어 주면 됩니다.이미지 부분 css코드로 64x64 로 고정 해 놓았습니다. 블로그 아이콘 플로그인만 설정하게 되면 크기 관계 없이 적용 됩니다. 

.guestLiist 은 HTML  <div class="guestList"> 에 대한 코드입니다. 방명록 시작 이  <div class="g_List"> 라면 CSS는 .g_List img { top:10px; left:10px; width:64px; height:64px; position:absolute; } 가 되겠습니다.   아이콘 표현이 되는 회원 아이콘을 손대는 이유는 비회원 아이콘 설정 후 모양과 라인을 맞추기 위해서 입니다. 아이디와 아이콘이 붙어 다니고 앞으로 설정할 비회원 아이콘은 배경이기 때문에 저로선 최선의 선택 입니다. ㅠㅠ


비회원 아이콘

.guest_general 코드 설정 입니다. 비회원 글에 아이디 앞에 24x24 이미지를 붙어 주는 기능인데 너무 작아 64x64 이미지를 적용할 수 있게 코드를 적용 해주기 위한 설정입니다.



.guest_general  { background: url(images/no-image.png) no-repeat; } 

이미지를 업로드 후 파일명만 수정해주면 됩니다. 


회원과 비회원 아이콘이 정열 된 모습입니다. 크기와 마진등은 본인의 블로그 스킨 디자인이나 자신이 원하는 대로 보기 좋게 지정 해주면 됩니다. 위 디자인을 벗어난 스타일을 표현하기에는 제한이 많은 방식인 것 같습니다.


비밀글 아이콘 

비밀글 아이콘은 별도로 지정 해줘야 합니다. 방식은 똑같습니다. 비밀 글은 방명록 & 댓글 같이 적용 됩니다.



.hiddenComment  { background: url(images/top-secret.png) no-repeat; }

 방문자 아이콘을 그대로 사용해도 되지만 잠긴 글이라는 걸 표현해줄 수 있는 아이콘이면 더 좋겠습니다. 관리자에겐 비밀 댓글 이미지가 표현 되지 않습니다. ㅠㅠ


.guest_secret  { background: url(images/top-secret.png) no-repeat; } 

관리자에게 비밀 글 아이콘을 표현 하기 위해선 위  코드를 css 추가하여 주셔야 합니다. 아무 곳에나 추가하셔도 되지만 관리를 위하여 다른 방명록 코드들과 함께 하거나 따로 모아서 하는 게 좋을 것 같지요?.                           


댓글 아이콘

댓글 아이콘 적용 법은 방명록 적용 방법과 동일하며 클래스명만 댓글 리스트에 맞게 적용해주시면 됩니다.

.commentList li { position: relative; }   <-- 댓글 이미지 기준점
.commentList li ul li  { position: relative; }   <-- 댓글의 댓글 이미지 기준점
.commentList span.name { margin-left:73px; }   <--  아이디 여백
.commentList img { float:left; width:64px; height:64px; }   <--  회원 아이콘   
.commentList .desc { margin:0 0 0 75px; padding:10px 0; }   <--  댓글 작성 내용
.rp_general  { background: url(images/no-image.png) no-repeat; }   <--  비회원 아이콘
.rp_secret { background: url(images/top-secret.png) no-repeat; }   <--   비밀 글 아이콘(관리자 표현)


마무리

SKIN.HTML 
<<방명록>>
<div class="guestList">
.
.
<p class="desc">[##_rp_rep_desc_##]</p>
.
.
</div>

<<댓글 목록>>
<div class="commentList">
.
.
<p class="desc">[##_rp_rep_desc_##]</p>
.
.
</div>

STYLE.CSS
<<방명록 목록>>
.guestList li { position: relative; }
.guestList li ul li  { position: relative; }
.guestList span.name { margin-left:73px; }
.guestList img { top:10px; left:10px; width:64px; height:64px; position:absolute; }
.guestList .desc { margin:0 0 0 75px; }
.guest_general { background: url(images/no-image.png) no-repeat; }
.guest_secret { background: url(images/top-secret.png) no-repeat; }
.hiddenComment { background: url(images/top-secret.png) no-repeat; }

<<댓글 목록>>
.commentList li { position: relative; }
.commentList li ul li { position: relative; }
.commentList span.name { margin-left:73px; }
.commentList img { top:10px; left:10px; width:64px; height:64px; position:absolute; }
.commentList .desc { margin:0 0 0 75px; }
.rp_general { background: url(images/no-image.png) no-repeat; }
.rp_secret { background: url(images/top-secret.png) no-repeat; }

위 항목들은 필수 항목입니다.   guestList .desc commentList .desc  속성은 자신의 스킨에 맞게 수정해서 적용하시면 됩니다.    


수정에 필요한 코드들 문서 파일입니다. 받아서 복사하여 사용하시면 됩니다.  


                       

방문자 이미지 파일입니다. 이미지는 파일은 Guest icon, Secret icon으로 검색하면 많은 이미지들을 구할 수 있습니다.



다른 방법으로 더 쉽게 꾸미는 방법이 있는지는 모르겠지만 전문 지식이 없는 저로선 저장 및 새로고침 수없이 하며 힘들게 찾아낸 최선의 방법이네요. 검색으로 찾아봐도 없는 것 같아서 안 돌아가는 머리 굴려가며 미천하게 나마 이만큼 표현하게 가능하게 됐습니다. ㅎㅎ 크롬이랑 익스플로러 9 버전에서 확인 하였습니다. 특수한 코드들이 아니니 브라우저에서 큰 무리없이 표현될꺼라고 봅니다.



Guest Icon skin html.txt


Guest Icon style css.txt


위에 설명된 방명록 스타일 입니다. 수정이 귀찮으신분은 파일들을 받아서 각 부분에 덮어쓰기 하면 됩니다. 적용전에 백업은 해주시고요.


<s_guest_container> ~ </s_guest_container> <s_rp_container> ~ </s_rp_container> 내용을 들어내고 Guest Icon skin html 안에 내용을 붙어 넣기 하시면 됩니다. CSS 코드는 중복 되지만 않으면 꼭 들어낼 필요는 없습니다. 백업 필히 하시고 코드 잘 확인 대조 해보시고 적용하세요. 대박나면 소인이 도와 드릴 수가 없습니다. ㅠㅠ 


※ 작업 전 백업 필히 하시고 충분히 확인 후 적용하시기 바랍니다. 작업 중 일어나는 불상사는 책임을 지지 않습니다.  


more

댓글을 달아 주세요

  1. 2014.02.04 17:34
    비밀댓글입니다
  2. 2014.03.07 22:53 신고
    좋은 정보 감사합니다.
    적용을 좀 해봐야겠네요. ^^
  3. 2014.10.31 16:26 신고
    안그래도 이부분때문에 골치가아파서 검색에 또 검색을 했는데
    떄마침 INK 님의 포스팅을 보고 적용시켜서정말 잘쓰고있습니다.
    좋은정보감사합니다.
    블로그 상단에 경남창원을 보니 정말반갑네요. 일때문에 지금은 다른지역에 와있지만
    고향이 창원이라 기분이 좋아지네요^.^
  4. 2014.12.08 18:23 신고
    감사합니다 이따가 집에가서 적용해보야겠네요
  5. 2015.01.28 06:54 신고
    이 문제로 꼬박 하룻밤을 고생했는데 덕분에 해결했네요
    정말 감사합니다ㅠㅠ
  6. 2017.06.05 00:41 신고
    좋은 정보 감사합니다.
  7. 2018.03.10 15:37 신고
    고맙습니다

.

Secret