신규 블로그를 만들면서 어떤 블로그 스킨을 사용하는 게 좋을지 둘러보다 마음에 딱 드는 스킨을 발견했습니다. 반응형이면서도 사이드바가 있는 스킨을 선호하는데, 북클럽 스킨이 군더더기 없이 깔끔한 디자인이라 마음에 들더라고요.
그런데 예전에는 티에디션을 이용해 홈 화면을 구성할 수 있었는데, 현재는 그 기능이 사라졌습니다. 기존부터 티에디션을 사용해왔다면 유지는 가능하지만, 신규 블로그는 사용할 수 없게 되었죠. 현재는 홈설정-커버를 이용해 그 역할을 대신할 수 있긴 합니다.
현재 제가 사용 중인 Book Club 스킨입니다. 홈설정에 커버아이템으로 섬네일 리스트를 이용하고 있는데요. 아쉽게도 홈화면에서 포스팅 제목이 잘려서 나온다는 단점이 있습니다.
위와 같이 한글 기준 10자 정도가 넘으면 ...으로 표시되어 포스팅 제목을 알아볼 수가 없습니다. 정말 안타깝죠? 그래서 오늘은 홈화면에서 포스팅 제목이 잘리지 않게 만드는 방법을 소개해드리려고 합니다. 굳이 북클럽 스킨이 아니더라도 적용하는 방법은 동일하니, 참고해서 커스터마이징 해보세요.
스킨수정을 위해 티스토리 관리자모드에서 스킨 편집-html 편집으로 이동 후 CSS로 들어갑니다.
컨트롤 F를 눌러 .cover-thumbnail-1 ul li .title ( 을 검색하세요! 제 블로그 기준 607행에 있는데, 워낙 건드린 게 많아서 조금 차이는 있을 수 있습니다. 위 사진상의 607행부터 615행을 지우고, 동일한 위치에 아래와 같이 붙여 넣기 하세요.
첨부: html태그 텍스트 파일
위 메모장 파일을 다운받아서 적용하시면 편리합니다!
위 태그에서 -webkit-line-clamp: 2;라고 되어있는 부분에서 숫자는 제목을 몇 줄까지 표시할 건지를 말합니다. 2라 되어있다면 제목이 아주 길 경우 2줄까지만 제목을 표시해주고, 나머지는 ...으로 표시되겠죠? 3으로 해보니 공백이 생겨서 저는 2로 해줬습니다. 이 부분은 적당하게 수정해서 사용하시면 될 거예요.
그리고 완료된 모습. 제목 2줄까지는 정상적으로 표시됩니다. 잘 따라오셨나요?
만약 홈커버를 섬네일 리스트가 아닌 다른 걸 적용했다면, 다른 부분을 수정해야 하는데요.
.cover-thumbnail-1 ul li .title
CSS에서 thumbnail-1이 아닌 thumbnail-2 ul li .title 부분을 수정해보세요. 생각보다 어렵진 않습니다. 그런데 이렇게 수정하면, 메인 페이지 홈화면에만 적용되고, 카테고리 페이지에서는 적용이 안됩니다. 이 부분은 다음 포스팅에서 소개해드릴게요!
