지난 포스팅에서 티스토리 블로그 홈화면에서 포스팅 제목을 안 잘리게 하는 방법을 소개해드렸었는데요. 티에디션이 아닌 신규 홈설정 기능 사용 시 포스팅 제목이 잘리는 걸 막는 방법이었습니다. 궁금하다면 해당 포스팅도 참고하세요!
티스토리 북클럽스킨 홈화면 포스팅제목 안잘리게하는 방법
신규 블로그를 만들면서 어떤 블로그 스킨을 사용하는 게 좋을지 둘러보다 마음에 딱 드는 스킨을 발견했습니다. 반응형이면서도 사이드바가 있는 스킨을 선호하는데, 북클럽 스
saysensibility.tistory.com
오늘 소개해드리는 것은 카테고리 글목록에서 포스팅 제목이 잘릴때 해결하는 방법입니다. 지난 포스팅과 거의 동일한 방식이므로, CSS 어느 부분을 수정해야 하는지만 확인하면 쉽습니다.
티스토리 관리자모드에서 꾸미기의 스킨편집을 누른 후 나타나는 팝업창에서 하단으로 마우스를 내리다 보면 '리스트'가 나옵니다. 리스트 타입이란 카테고리 글목록을 어떻게 보여줄 것인지 선택하는 것인데, 이미지 중심으로 보여줄지 텍스트 위주로 보여줄지 원하는 스타일로 선택이 가능하죠. 참고로 제 블로그는 북클럽 스킨의 뉴북 리스트 타입입니다. 다른 티스토리 스킨을 쓰거나 리스트 타입을 다른 것으로 설정해도 수정하는 방식은 동일합니다. 단, 어디를 수정해야 하는지는 직접 찾아보면서 해야겠죠?
북클럽 스킨의 뉴북 리스트 타입을 선택할 경우 위와 같이 포스팅 제목이 길 경우, 뒷부분이 잘리게 됩니다. 위 사진은 PC 기준이라 그나마 글 제목이 길게 나오지만, 스마트폰에서 보면 10글자 정도밖에 보이지 않아 어떤 글인지 가늠조차 하기 어렵습니다. 따라서 포스팅 제목 뒷부분을 생략하지 않고 전체를 보여주기 위해 수정해봤습니다.
스킨편집 - HTML편집 - CSS로 이동해주세요. 제 블로그의 경우 수정해야 할 부분이 1167행에 위치하고 있습니다. CSS를 여러 번 수정했기 때문에 제 블로그와 동일한 위치는 아니므로, CSS편집 모드에서 컨트롤 F를 눌러 .post-item .title {를 검색하면 쉽게 찾을 수 있습니다.
기존 태그를 삭제하고 위 태그로 변경해줍니다. -webkit-box를 이용해 생략된 글 제목 전체를 보여주는 방법입니다. 중간쯤 보이는 webkit-line-clamp:2;는 글 제목이 길 경우 2줄까지 보여준다는 의미입니다. 3으로 설정할 경우 3줄까지 생략 없이 보입니다. PC 화면에서는 2로 설정해도 큰 문제가 안되지만, 스마트폰으로 확인해보니 3줄은 해야 할 것 같아 나중에 따로 수정했습니다. 포스팅 제목을 생략 없이 무조건 보여주고 싶다면 넉넉하게 7이나 8정도로 설정하면 되겠죠?
위 태그는 메모장으로 작성해 첨부파일로 올려두었으니, 다운받아서 적용하시면 됩니다.
그럼 어떻게 바뀌었는지 확인해볼까요?
기존: 현대자동차 더뉴싼타페 티저이미지 공개, 특이한 ···
변경: 현대자동차 더뉴싼타페 티저이미지 공개, 특이한 주간주행등
위처럼 길이가 긴 포스팅 제목도 생략되지 않고, 자동 줄바꿈이 되어 전체 제목을 보여주네요. 검색을 통한 블로그 유입 시 이탈률을 줄이고 체류시간을 늘리기 위해서는 이러한 사소한 것들도 제대로 수정해주면 좋겠죠?
