본문 바로가기

티스토리스킨/팁.활용.확장

티스토리 블로그 댓글 디자인팩1 배포합니다.




티스토리 글보기 댓글에 말풍선 디자인을 입혀주는 디자인팩입니다.


티스토리 스킨을 조금은 수정할줄 알아야 적용가능하기 때문에 스킨 수정을 할 줄 모르는 분은 적용에 어려움이 다소 있을 수 있습니다.


말풍선 디자인 종류는 50개이며, css 스타일만 간단하게 적용하면 모든 댓글에 적용됩니다.




apost.kr-tistory-reply-design-pack.zip



* 댓글을 뿌리는 구조가 다른 구 티스토리 스킨이나 다른 제작자 스킨에서는 정상 동작하지 않을 수 있습니다.




1. 댓글디자인팩 적용전 스킨 백업은 필수입니다. 나중의 원상복구를 위해 스킨 백업을 반드시 먼저 하시기 바랍니다.

티스토리 스킨 백업하는 방법은


-> 티스토리 스킨 백업하기


를 참조하시면 됩니다.



2. 디자인팩 다운로드 후 압축을 풀면 rdp.css 파일과 PNG 이미지 파일들(댓글 말풍선 디자인 이미지들)이 나옵니다. 디자인 미리보기 확인은 아래 이미지를 참조하거나, 압축푼 파일 중 rdpa.jpg 이미지를 열어서 확인하면 됩니다.





3. css 파일과 사용할 말풍선 이미지파일 2개( 말풍선-디자인-코드.png, 말풍선-디자인-코드r.png, 예를 들어 rdpa-001.png, rdpa-001r.png)를 블로그 스킨 편집기에서 업로드 합니다.





4. css 편집기로 들어가서 css 내용 최상단에 


@import url('./images/rdp.css');


을 추가합니다.



<중요>

위처럼 rdp.css 파일을 가져오면 스킨 css 가 나중에 적용되기 때문에 댓글 영역에 추가의 css를 스킨 css에서 적용한 경우 댓글 디자인이 깨지거나 일부가 적용되지 않을 수 있습니다. 


이런 경우

스킨 css 편집기쪽이 아니라 스킨 html 에서 rdp.css 파일을 링크를 해서 가져와야 합니다.

어포스트에서 배포하는 스킨 기준으로 style.css 파일을 링크한 아랫줄에 아래와 같이 rdp.css 파일을 링크를 걸어주면 됩니다.






5. html 편집기로 들어가서 


"<s_rp_rep>"


을 검색합니다.


이 치환자(<s_rp_rep></s_rp_rep>) 안의 반복되는 내용(댓글 리스트)에 댓글 디자인팩 css를 적용해야 합니다.


어포스트 블로그에서 배포하는 대부분의 티스토리 스킨이나 레퍼런스 스킨은 

<s_rp_rep> 로 반복되는 댓글이


<s_rp_rep>

<li id="[##_rp_rep_id_##]">

</li>

<s_rp_rep>


와 같은 구조로 되어 있습니다.


<li></li> 태그가 반복되면서 댓글 리스트가 뿌려집니다.

스킨 구조가 다를 경우 "[##_rp_rep_id_##]" 를 검색해 해당 위치의 태그에 css를 추가해주면 대부분 적용됩니다. 



<li id="[##_rp_rep_id_##]" class="rdp rdpa-001">


과 같이 css를 적용해줍니다.

적용된 예는 rdpa-001 코드인 댓글 디자인(상단 코드표 참조)을 적용해준다는 뜻입니다.


"rdp rdpa-001"


과 같이 코드 css(rdp-001"와 공통 css(rdp) 를 공백을 두고 모두 표시해주어야 합니다.




<댓글영역 HTML 코드 샘플>


<s_guest_reply_container>
    <ul>
        <s_guest_reply_rep>
            <li id="[##_guest_rep_id_##]" class="rdp rdpa-001">
                <div class="author-meta">
                    <img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
                    <span class="nickname">[##_guest_rep_name_##]</span>
                    <span class="date">
                        [##_guest_rep_date_##]
                    </span>
                    <span class="control">
                        <a href="#" onclick="[##_guest_rep_onclick_delete_##]">수정/삭제</a>
                    </span>
                </div>
                <p>[##_guest_rep_desc_##]</p>
            </li>
        </s_guest_reply_rep>
    </ul>
</s_guest_reply_container>





6. "적용" 버튼을 눌러 스킨 변경 내용을 적용합니다.

파일이 정상적으로 업로드 되어있고, 스킨 수정이 되었으면 아래와 같이 댓글 디자인이 적용되어 표시됩니다. 





<주의>


첫번째 댓글에만 디자인팩 테두리가 입혀지지 않는 경우 style.css 에서


.comments .comment-list ul li:first-child {

border: none;

}


을 찾아 삭제해야 합니다. 레퍼런스 스킨, 또는 어포스트에서 배포하는 스킨 모두에 해당됩니다. 레퍼런스 스킨에서 이어져 오는 것인데 디자인팩을 입힐 경우 필요 없는 부분이므로 삭제해도 무방합니다.

  • 감사합니다

  • 감사합니다 :)
    즐거운 한주 보내세요!

  • 파일 업로드 정상적으로 잘 했고 파일명도 알맞게 잘 적었습니다..
    몇번을 다시 봐도 위치 또한 저기가 맞는 것 같은데
    블로그 댓글란 보면 잘 안맞더라구요....
    혹시나 싶어 중요하다고 하신 부분의 rdp css링크까지 걸어보았는데 현상은 동일합니다.
    혹시 어디 부분을 만지면 될까요?

    그리고 카톡 처럼 서로 대화를 주고 받는 형식의 모양이 아니라
    댓글에 대댓글을 달면 같은 말풍선 안에 계속 댓글이 누적되는 방식인가요?
    사람들이 달아준 댓글은 왼쪽정렬, 블로그주인이 작성한 댓글은 오른쪽 정렬 방식이 아닌거죠?

    코드를 첨부하려고 했는데 티스토리 운영 정책상 댓글을 달 수 없다고 나와 코드 없이 질문드립니다 ㅜㅠ

    • 티스토리 댓글은 대댓글이 임베드 구조여서 원 댓글 하위에 대댓글이 달려 있습니다. 구조상 대댓글을 별도의 말풍선으로 분리를 할수도 있지만, 기존 스킨들과의 호환성이 아얘 없어지고 스킨 구조를 손을 많이 봐야하는 문제가 생깁니다.

      블로그 주인을 인식하려면 javascript로 추가 코드가 들어가야 하고, 그렇게 되면 일반인은 쓰기가 힘든 복잡한 디자인 기능이 됩니다.
      스킨단에서는 블로그 주인 여부가 판단되지 않습니다.

      rdp.css 파일을 html 에서 링크를 거시기 바랍니다. 첫번째 댓글 말풍선이 깨지는건 해당 원인때문입니다.

    • html에서 style.css를 불러오는 바로 밑줄에 rdp링크도 태그 해둔 상태에요... ㅠㅜ

    • 아. rdp.css 링크의 경로가 잘못되었었네요
      다시 확인해서 수정하니 첫번째 댓글도 안깨지고 나옵니다.

      그런데 댓글 끝에 있는 까만색 세로줄은 뭔가요,,?
      아마 rdp css파일에서 박스 크기가 안맞는 문제인거 같은데 음,,

      그리고 이코드는 모바일에선 적용이 안되나요?
      모바일에서는 그냥 네모 박스로만 표시가 되네요

    • 순서상 뒤에 있는 rdp.css가 나중에 로딩되어야 하는데 먼저 로딩되는거 같습니다.
      이유는 모르겠고...

      style.css 에서

      .comments .comment-list ul li:first-child {
      border: none;
      }
      를 찾아서 지우시면 됩니다.

      레퍼런스 스킨에서부터 달려오는건데 첫번째 댓글에 테두리를 지우는 역할을 합니다.

    • 모바일에서 잘 나옵니다.
      기본적으로 실기기 테스트는 다해서 업로드됩니다.
      웹브라우저 캐시 소거, 또는 모바일 브라우저 캐시 소거를 한번 해보시기 바랍니다.

      세로줄은 크롬계열 웹브라우저의 렌더링 버그입니다.(파이어폭스도 동일) 테두리에 이미지를 적용한 경우 소숫점 계산 차이로 인해 배경색이 보이는 빈 공간에 생겨납니다.
      브라우저 크기를 조절하면 생겨났다 사라졌다하며, 세로공백, 또는 가로공백이 한줄씩 나타났다 사라집니다.

      ie, 엣지에서는 나타나지 않는 현상입니다.

      이런 점을 감안해서 흰색 배경에 옅은색 테두리를 사용해서 디자인팩을 배포하는 것입니다.
      어두운 배경에는 어두운색 말풍선을 사용하고...

    • 제 블로그는 배경이 까만색이고 글씨는 하얀색이라서
      하얀색 말풍선을 적용하게 되면 글씨가 안보이고 검정색 말풍선을 적용하면 말풍선과 블로그 배경간 구분이 거의 안가더라구요 ㅋㅋ
      그래서 생각해본게 제 블로그 포인트 색이 #ffbe96 이니 말풍선도 포인트 색상으로 해야겠다 싶어서 말풍선 색상을 rdp css에서 직접 수정했어요.
      png 이미지도 포토샵을 이용해서 동일 색상으로 수정했구요.
      그런데 랜더링 버그 ,,, 때문에 저런 까만줄이 나왔던거네요,, 흠,,,


닫기