본문 바로가기

티스토리 북클럽 스킨 I 본문 ' 뉴북' 및 커버 '뉴스레터' 제목 잘림 수정하기

by Galam. 2023. 3. 8.
728x90

타이틀

본문 카테고리 '뉴북' 및 커버 아이템 '뉴스레터' 제목 잘림 수정하기

북클럽 스킨의 장점

레이아웃이 간결하고 깔끔합니다.
티스토리 북클럽 스킨은 레이아웃이 간결하고 깔끔한 디자인을 가지고 있어, 콘텐츠가 더욱 돋보이게 됩니다.

 

반응형 디자인을 지원합니다.
티스토리 북클럽 스킨은 모바일 기기에서도 적절한 디자인을 보장합니다. 따라서 모바일 환경에서도 콘텐츠를 편리하게 이용할 수 있습니다.

 

무료로 제공됩니다.
티스토리 북클럽 스킨은 무료로 제공되기 때문에, 추가적인 비용 없이도 쉽게 사용할 수 있습니다.

 

이런 장점들 때문에 많은 분들이 북클럽 스킨을 이용하지만, 그래도 조금 부족하거나 마음에 안 드는 부분들도 있습니다.

이번에는 카데고리의 제목이 길어지면 뒷부분이 '...' 말줄임 표시로 나오는 부분을 전체 제목으로 나오도록 해보겠습니다.

제목 잘림 수정하기
제목이 잘리고 ... 말줄임으로 표시됩니다.

 

 
 

목차

     

     

    본문 카데고리 '뉴북' 제목 잘림 수정하기

    1. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다.

    제목 잘림 수정하기


    2. CSS에서 Ctrl + F를 이용해 post-item .title 를 검색 후

    post-item .title

    아래쪽에 white-space: nowrap; 부분을 white-space: normal; 로 변경한 후에 '저장'해주면 됩니다.

    white-space: normal;

    제목 잘림 수정하기
    제목 잘림 수정하기


    제목 잘림 수정하기
    ... 말줄임 표시가 사라지고 제목의 전체가 표시됩니다.


    위와 같이 수정하고 나면 PC 화면과 모바일 화면 모두 기존에 제목이 잘리던 부분이 아래와 같이 제목 전체가 표시됩니다.

    이제 제목을 한눈에 인지할 수 있어 시인성이 높아지고 자연스럽게 게시글에 대한 클릭율도 증가하게 됩니다.

     

    728x90

     

     

    커버 아이템 '뉴스레터' 제목 잘림 수정하기

    홈 설정에서 커버를 선택하고, 커버 아이템을 뉴스레터로 설정하셨다면 이 부분도 CSS를 위와 동일하게 수정해줘야 합니다.

     

    1. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다.

    제목 잘림 수정하기


    2. CSS에서 Ctrl + F를 이용해 cover-thumbnail-2 ul li .title 를 검색 후

    cover-thumbnail-2 ul li .title

    아래쪽에 white-space: nowrap; 부분을 white-space: normal; 로 변경한 후에 '저장'해주면 됩니다.

    white-space: normal;

    제목 잘림 수정하기
    제목 잘림 수정하기


    제목 잘림 수정하기
    ... 말줄임 표시가 사라지고 제목의 전체가 표시됩니다.

     

    마무리

    간단한 CSS 수정을 통해서 PC 화면과 모바일 화면 두 가지 모두 제목이 잘렸던 부분이 모두 정상적으로 모두 보입니다.

    게시글을 가장 요약한 것이 제목인데 이 제목이 잘리면 방문자가 유입되어도 클릭하고 머무르는 시간이 줄어들 수 있으니 이 부분은 꼭 수정해 주시기 바랍니다.

     

    "쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"

    반응형

    ▸Googie 광고


    top