티스토리 리스트 글 제목 모두 보이도록 수정 하기

프롤로그

티스토리 블로그 페이지를 자세히 살펴보면 리스트에 표시되는 글 제목이 긴 경우나 길지는 않지만 할당된 화면의 폭이 작을 경우 제목의 뒤 부분이 생략됩니다. 이 번 글에서는 글 제목이 모두 보이도록 하여 방문자가 어떤 글인지 쉽게 이해하도록 수정하는 방법에 대해 알아보도록 하겠습니다.

리스트 글 제목을 모두 보이도록 해야 하는 이유

검색을 통해 블로그를 방문한 사람이 다른 글도 보게 하기 위해서는 관심을 가질만한 글 제목이 정확히 제공되어야 합니다. 하지만 북클럽 스킨의 경우 홈페이지나 각 카테고리 글 리스트에서는 물론이고 글 본문 하단의 관련 글 리스트에서도 제목의 앞 부문만 보이고 뒤 부분은 생략되어 방문자가 어떤 글인지 이해하고 클릭하기가 어렵습니다.

 

이러한 문제는 화면 폭이 좁은 모바일 환경에서 더욱 심해지는데 방문자의 약 70%가 모바일을 통해 방문한다는 사실을 고려하면 반드시 수정하여 개선해야 할 항목인 것입니다. 각 리스트에서 글 제목이 길더라도 제목 전체가 모두 보이도록 수정하는 방법을 설명드리도록 하겠습니다. 

 

모든 스킨 편집은 블로그 관리 모드에서 꾸미기/스킨 편집/html 편집/HTML 또는 CSS로 클릭하여 들어간 후 해당 행 번호 부근으로 직접 스크롤해서 이동하거나 Ctrl+F를 누른 후 키워드 찾기 기능을 활용하여 수정할 곳으로 이동해야 합니다. 행 번호는 개인마다 삭제 또는 추가한 행들이 다르기 때문에 정확히 일치하지 않으니 참조하시기 바랍니다.

홈페이지 / 카테고리 리스트에서 글 제목 모두 보이도록 수정

CSS 파일의 1182행 부근으로 이동하여 수정 위치를 찾거나 아래 표시된 코드 중에 키워드 단어를 검색하여 수정 위치로 이동합니다. 여기서 white-space: nowrap; 을 white-space: normal; 로 변경한 후 적용 버튼을 누르면 됩니다.

 

홈페이지 / 카테고리 리스트의 글 제목이 모두 보이도록 수정하기 전과 수정 후

 

'nowrap'은 글 내용을 둘러싸지 않는다는 no wrap의 뜻으로 글 내용이 할당된 화면 폭보다 커도 줄 바꿈 없이 잘리도록 설정하는 것이며 이것을 'noraml'로 변경하면 제목이 모두 표시됩니다.  

.post-item .title {
display: block;
overflow: hidden;
max-width: 98%;
margin-bottom: 4px;
padding-top: 9px;
text-overflow: ellipsis;
white-space: nowrap;      ← white-space: normal; 로 수정
line-height: 1.4;
}

글 하단 관련 글 리스트의 글 제목 모두 보이도록 수정

CSS 1413행 부근으로 부근으로 이동하여 수정 위치를 찾거나 아래 표시된 코드 중에 키워드 단어를 검색하여 수정 위치로 이동합니다. 위의 경우와 동일하게  white-space: nowrap; 을 white-space: normal; 로 변경한 후 적용 버튼을 누르면 됩니다.

 

글 하단 관련글 리스트의 글 제목이 모두 보이도록 수정하기 전과 수정 후

 

.related-articles ul li .title {
display: block;
overflow: hidden;
max-width: 95%;
text-overflow: ellipsis;
white-space: nowrap;    ← white-space: normal; 로 수정
font-size: 0.875em;
line-height: 1.4;
}

 

아래 링크된 이전 포스팅 글도 참조하시기 바랍니다.

 

2022.08.16 - [디지털 노매드/블로그] - 티스토리 스킨 속도 비교 테스트 결과 공유