본문 바로가기
블로그 정보/티스토리

티스토리 사이드바 최신글 댓글 글자 수 줄 설정하는 방법

by 비르자이 2024. 11. 30.

티스토리 블로그를 처음 열면 사이드바 메뉴가 적용되어 있을 텐데 보통 공지사항, 최신글/인기글, 댓글, 태그, 방문자 통계 등의 요소가 설정되어 있다. 이번 글에서는 사이드바에 구성한 공지사항, 최신글/인기글, 댓글 글자 수 설정 방법을 알아보려고 하는데 즉 몇 글자, 몇 줄까지 보이게 할 수 있는지 정할 수 있다.

* 원하는 사이드바 구성 방법 관련 내용은 아래 글을 참고하자.

 

티스토리 블로그 사이드바 효과와 설정 방법

블로그나 홈페이지 본문 영역 옆에 사이드바를 배치하면 블로그 내 추가 정보를 제공함으로써 방문자 경험에도 좋은 영향을 줄 수 있다. 물론 블로그 디자인에 정답은 없어서 운영자의 생각이

dailyspace.tistory.com

 

 

티스토리 블로그 방문자수 표시 장단점 감추는 방법

블로그에 표시되어 있는 '방문자수' 지표를 보면 하루에 얼마나 많은 사람이 블로그에 왔다 갔는지, 블로그 운영자와 방문자 모두 볼 수 있다. 티스토리의 경우 블로그를 개설하면 방문자수는

dailyspace.tistory.com

 

사이드바 글자 수

다시 본론으로 돌아와서, 최근 작성한 글 제목이 길어지면 위처럼 사이드바에서 말 줄임표(...)로 요약되는 것을 볼 수 있다.


블로그 관리 홈

이때 블로그 관리 페이지로 오면 사이드바에 보이는 제목 글자 수를 설정할 수 있다.

* 블로그 관리 홈 - 좌측 메뉴 중 꾸미기 - 사이드바 - 'n'글자까지 표시됩니다. (원하는 글자 수만큼 설정)


글자 수 설정 완료

글자 수 입력 후 화면 아래 [변경사항 저장] 버튼을 클릭하면 설정이 완료된다.

하지만 블로그 메인 화면에 접속해도 최신글/인기글, 댓글 모두 입력한 만큼 글자 수가 보이지 않을 텐데 이때 간단한 CSS 설정을 통해 해결할 수 있다.


스킨 편집

1. 블로그 관리 페이지 - 스킨 편집
CSS 설정을 위해 우선 스킨 편집 페이지로 이동하자.

html 편집
확인

2. html 편집
화면 오른쪽 위에 현재 스킨 정보가 있을 텐데 우측의 [html 편집] 버튼 - 안내 창 [확인] 버튼을 누르면 다음 페이지로 이동한다.


CSS

3. CSS 선택
다음 페이지 상단 탭의 기본 설정 값인 HTML이 아닌, 옆에 보이는 CSS를 클릭하면 된다.


클래스 이름 찾기

4. 최신글 클래스 요소 변경
CSS 변경후 화면 안에 아무 곳이나 클릭하고 Ctrl + F 키를 입력하면 맨 위로 검색 창이 나올 것이다.
여기에 .sidebar .post-list ul li 이름을 넣고 검색하면 약 2230열에 관련 이름 목록을 볼 수 있다.

이후 약 2250~2253열의 .sidebar .post-list ul li .title을 보면 -webkit-line-clamp: 2; 라고 되어 있는데 바로 글자가 나오는 줄 수를 뜻한다. 즉 숫자가 2로 되어 있으면 최대 2줄이고 3이면 3줄까지 보여준다. 따라서 이곳에 숫자를 크게 변경하면 조금 전 설정한 최신글/인기글 글자 수만큼 제목 글자를 보여줄 수 있다.

💡댓글 글자 수도 변경하려면 sidebar.post-listulli.title
{ 복사 } << {} 괄호 사이의 모든 요소를 Ctrl + C 키로 복사해 두자. (아래 이어서 설명


요소 지우기

5. 댓글 요소 설정
1. Ctrl + F를 눌러서 검색 창을 열고 recent-comment 입력
2. 약 2210~2213열로 이동해서 위 클래스 이름 찾기

둘 중 편한 방법으로
.sidebar .recent-comment ul li a 요소를 찾았다면 { 삭제 } >> {} 괄호 안에 있는 모든 요소를 지워주자.


요소 입력

그리고나서 조금 전 최신글/인기글 설정 후 복사한 코드가 있을 텐데, 위 { 와 } 사이에 위처럼 입력하면 된다.


미리보기

6. 미리보기 버튼 클릭
입력을 마치면 설정화면 상단의 [미리보기] 버튼을 누르면 화면을 새로고침할 수 있다.


변경된 최신글

이후 화면에서 최신글/인기글 목록 제목이 글자가 잘리지 않고 모두 나오면 성공이다. 위의 경우, 글자를 4열까지 보이도록 설정해 보았다.


변경된 댓글

이어서 댓글 글자 수도 잘리지 않고 잘 나오는 것을 볼 수 있다. 댓글 내용은 모두 5줄까지 나오도록 예시로 설정했는데 너무 과하다고 느끼면 역시 3~4줄 정도면 무난한 것 같다.


적용 버튼
확인 버튼

화면에 이상이 없으면 설정화면 상단우측의 [적용] 버튼 - 안내 창 [확인] 버튼을 클릭하면 작업 완료이다.

참고로 CSS 화면에서 줄 수를 늘렸는데도 글자가 요약돼서 잘린다면 처음에 확인한 관리자 화면 - 사이드바에서 글자 수를 대폭 늘리면 해결할 수 있다. 즉, 제목 줄 수를 늘려도 최대로 보여줄 수 있는 글자 수 자체가 적으면 잘려서 표시된다고 보면 된다.