댓글 최근글 방명록 리스트 순서 정렬 변경하기 - 최신글 맨 상단으로 정렬

티스토리의 댓글 리스트는 과거의 댓글부터 순서대로 차곡 차곡 쌓아서 시간순으로 보여주는 방식이다.

그러므로 최신 댓글은 맨 아래 하단에 위치하게 된다.

그러나 누군가는 반대로 최신 댓글이 맨 상단에 위치해서 순서대로 나열하고 싶은 경우도 있을 수 있다.

나도 시도해 봤으나 과거부터 시간 순으로 정렬해서 댓글을 보여주는게 보기 편해서 기본 상태로 사용하고 있다.

댓글이나 사이드바의 댓글 순서등 모두 같은 방식으로 순서를 역으로 표현할 수 있다.

방법은 아주 간단하다.

댓글의 순서를 변경해보자!!

1 댓글 시간순 정렬 변경하기

스킨의 관리모드에서 HTML/CSS 수정에서 CSS 부분으로 이동하여 댓글 리스트 부분의 클래스명을 찾아 아래의 문구를 추가하면 된다.

display: flex; flex-direction: column-reverse;

현재 사용중인 CCZ-CROSS 스킨의 경우는 댓글 리스트의 클래스가 .cng-list 로 정의되어 있다. 아래와 같이 추가하면 댓글의 순서는 최신 순서의 댓글부터 정렬된다.

2 변경방법 사용예 - CCZ-CROSS 스킨

.cng-list {
	margin-left: -15px; 
	margin-right: -15px; 
	vertical-align: middle; 
	display: flex;  /* 추가 */
	flex-direction: column-reverse;  /* 추가 */
	}

3 변경방법 사용예 - 티스토리 #1 스킨

티스토리의 기본 스킨도 마찬가지이다. 기본 스킨 #1의 경우 댓글 리스트의 클래스는 .area_reply .list_reply 로 정의되어 있다. 위와 마찬가지로 추가하면 순서가 역으로 바뀌어 표현된다.

티스토리 기본 스킨에서는 댓글과 대댓글까지 순서가 바뀐다. 기본 스킨에서는 그냥 기본 상태로 사용하는게 좋겠다.

스퀘어 스킨의 경우 #communicate .communicateList ol { } 괄호안에 적용하면 제대로 출력 된다. ol 구조로 된 댓글은 대댓글까지 순서가 제대로 출력되나 그렇지 않은 스킨의 경우는 대댓글까지도 순서가 바뀌어 출력되는듯 하다.

주의 : 모바일 부분의 설정도 있으니 확인 후 구분해서 변경해주면 된다. 그리고 방명록 부분과 중복될 수도 있으니 댓글과 방명록의 클래스는 다르게 사용하는게 좋다.

.area_reply .list_reply {
	margin-bottom:20px; 
	margin-top:5px;
	border-top:1px solid #e0e0e0;
	display: flex;   /* 추가 */
	flex-direction: column-reverse;   /* 추가 */
	}

4 기본 정렬 상태 - 시간 순(최신 댓글이 맨 하단에 위치)

5 순서 변경 상태 - 시간 역순(최신 댓글이 맨 상단에 위치)

댓글과 방명록 뿐만 아니라 순서 구조로 되어 있는 모든 부분이 역순으로 변경 가능하다. 사이드바의 댓글이나 최근 글의 순서도 마찬가지로 적용하면 변경할 수 있다.