프롤로그
티스토리 블로그 페이지를 자세히 살펴보면 리스트에 표시되는 글 제목이 긴 경우나 길지는 않지만 할당된 화면의 폭이 작을 경우 제목의 뒤 부분이 생략됩니다.
이 번 글에서는 글 제목이 모두 보이도록 하여 방문자가 어떤 글인지 쉽게 이해하도록 수정하는 방법에 대해 알아보도록 하겠습니다.
리스트 글 제목을 모두 보이도록 해야 하는 이유
검색을 통해 블로그를 방문한 사람이 다른 글도 보게 하기 위해서는 관심을 가질만한 글 제목이 정확히 제공되어야 합니다.
하지만 북클럽 스킨의 경우 홈페이지나 각 카테고리 글 리스트에서는 물론이고 글 본문 하단의 관련 글 리스트에서도 제목의 앞 부문만 보이고 뒤 부분은 생략되어 방문자가 어떤 글인지 이해하고 클릭하기가 어렵습니다.
이러한 문제는 화면 폭이 좁은 모바일 환경에서 더욱 심해지는데 방문자의 약 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;
}아래 링크된 이전 포스팅 글도 참조하시기 바랍니다.
