티스토리 뷰

티스토리 Letter 스킨 본문 요약 내용 늘리기

안녕하세요.

이번 포스팅에서는 Letter 스킨 메인 화면에서 포스팅 요약 내용을 더 많이 표시될 수 있도록 늘려보겠습니다.

블로그 메인 화면 편집 전

티스토리 메인 페이지에서 본문 요약 내용은 위의 그림처럼 2줄로 표시되도록 기본값이 설정되어 있습니다. 개인 취향에 따라 요약 내용을 더 늘리고 싶은 경우에 CSS 속성을 어떻게 편집하는지 알아보겠습니다.

개발자 도구 선택 도구
개발자 도구 CSS 1

먼저 크롬 개발자 도구를 실행시킵니다. 선택 도구를 사용하여 내용 요약 부분을 선택합니다. 개발자 도구의 CSS 창을 보면 CSS 속성 1128행부터 해당 속성이 시작됨을 알 수 있습니다. 여기서 편집해야 할 부분은 max-height와 -webkit-line-clamp 속성 값입니다.

개발자 도구 CSS 2
블로그 메인 화면 편집 1

개발자 도구 CSS 창에서 -webkit-line-clamp 값을 3으로 바꿉니다. 즉 포스팅 요약 내용이 3줄로 표시되도록 변경하는 것입니다. 값을 3으로 바꾸고 나면 3번째 줄이 화면에 잘려서 보이는 것을 확인할 수 있습니다. 

개발자 도구 CSS 3
블로그 메인 화면 편집 2

그럼 이제 개발자 도구 CSS 창에서 max-height 값을 변경합니다. 65px로 값을 지정하면 3번째 줄이 잘리지 않고 올바르게 표시되는 것을 확인할 수 있습니다.

CSS 편집 1
CSS 편집 2

이제 개발자 도구에서 변경한 값을 티스토리 HTML 편집기의 CSS 속성에 적용해보겠습니다. CSS 속성의 1128행을 찾아서 해당 값들을 모두 변경하고 적용을 클릭합니다.

블로그 메인 화면 편집 후

이제 블로그 메인 화면을 새로 고침 해보면 본문 요약 내용이 3줄로 늘어났음을 확인할 수 있습니다.

 

행복한 하루 보내세요.

감사합니다.

댓글
댓글쓰기 폼