홈화면 글 목록에 댓글 개수 표시하기

피드에 빨간 점이 생기면 뭐지 뭐지 하면서 들어가 본다. 대부분 관심 가는 주제로 글을 쓰시는 분들을 구독해서 재미있게 읽는다. 그분들은 보통 댓글이 많으시다. 부럽다. 난 소심해서 소통을 잘 못한다. 그러면서 느끼는 점. 이분들 홈 화면에서 글 목록 옆에 댓글 개수가 표시되면 어떨까? 댓글 개수를 표시해주는 스킨도 많지만 그렇지 않은 스킨이 더 많은 것 같다. 그래서 오늘은 홈 화면 글 목록에 댓글 개수 표시하기를 만들어보자.

 

조금 어려울수도 있지만 천천히 따라 해 본다면 딱히 어렵지도 않다.^^

 

 

일단은 제가 쓰는 스킨으로 설명합니다. 이 부분은 모든 스킨에 해당되니 스킨에 크게 신경 쓰지 마셔요. 참고로 이미지는 스킨 편집에 이용하는 테스트 블로그예요. 저는 테스트 블로그에 실험해보고 본 블로그에 적용합니다.

홈 화면의 글 목록입니다. 저 글에 댓글이 몇 개 달렸는지 알면 좋지 않을까요? 해봅시다. 고고~

 

 

▲ 먼저 댓글 태그를 가져와야합니다. 크롬도 되고 IE도 됩니다. F12키를 눌러 소스를 보죠. 저는 크롬~

 

 

▲ 소스 창에서 저기를 클릭합니다. 그럼 원하는 부분을 클릭했을 때 그 부분의 소스를 표시해줘요.

 

 

▲ 이렇게 클릭.

 

 

▲ 댓글 숫자 부분은 span class="count" 라는 이름이 가지고 있어요. 티스토리 스킨 편집-html은 하나의 화면에 모든 태그를 다 보여주기 때문에 태그가 여러 번 사용됩니다. 그러니 주변의 태그도 잘 보고 찾아야 해요.

 

 

▲ 댓글 숫자 태그는 div class="comments"에 있어요.

저기 빨간 줄이 숫자 부분입니다. 구조는 아주 단순해요.

"댓글"이라는 글자가 위치하고 다음에 숫자가 있는 거예요.

참고로 span이란 태그는 기본 inline 성격을 가지고 있습니다. inline은 옆으로 나열되는 형식이에요.

 

저 빨간 줄 부분은 복사해서 메모장이나 다른 곳에 복/붙해 두세요.

 

참고로 저는 스킨 편집할 때 따로 편집기를 켜서 복/붙을 합니다. 스킨 편집기는~

2019/09/19 - [컴퓨터 TIP · 맛 좋은 Soft] - 티스토리 스킨 수정 html/css 편집기 입력기 Sublime Text!!!

티스토리 스킨 수정 html/css 편집기 입력기 Sublime Text!!!

이 글을 참고해보세요.

 

 

▲ 홈 화면으로 와서 댓글 수를 달 곳을 찾아야 합니다. 제 블로그 스킨은 저기 날짜 옆에 다는 게 좋을 것 같아요.

이것도 아까 F12로 찾은 것처럼 소스를 찾아야 합니다.

 

 

▲ 소스를 보면 span class="date"라는 이름을 쓰고 있어요. 그리고 주변 태그들의 이름을 잘 보시고요. 위에도 설명했지만 여러 번 사용하고 있습니다.

 

 

▲ span class="date"는 div class="post-item" 안에 있어요. ctrl+f로 빠르게 찾으세요. 빨간 줄 부분이 날짜 태그입니다.

그럼 날짜 옆에 아까 복사해둔 댓글 수 태그를 붙여 넣기 하면 됩니다.

 

 

▲ 이렇게요. 자세히 보세요. 태그는 항상 <태그> 내용 </태그> 이렇게 씁니다. 열고 닫는 태그를 잘 확인하세요.

댓글 태그 앞에 날짜와 구별하기 위해 " ㅣ 댓글"이라고 썼습니다. 적용을 해보면~

 

▲ 날짜 옆에 댓글과 개수가 생겼습니다.^^

 

 

▲ 이왕 하는 거 살짝 꾸며보죠. 글자 색만 바꿔보겠습니다.

 

 

▲ s_rp_count 에는 스타일 태그를 적용할 수가 없어요. 저도 몰랐습니다.

그래서 span 태그를 한번 더 쓰고 그 안에 댓글 글자와 숫자를 넣었습니다. span에 스타일 태그를 넣어주고 color 값을 넣습니다. 원하는 색을 넣어주세요. 저는 tomato 색을 좋아합니다.^^

 

자세히 설명한다고 했는데 궁금한 점 있으시면 댓글로 물어보셔요.

제 블로그에 적용하지 않는 이유는 댓글 잘 안 달려서요.  ε=ε=ε=(~￣▽￣)~