티스토리/Book Club 스킨 글 제목 잘림 수정&글 설명 부분 줄이기
티스토리 반응형 스킨 중에서 Book Club 스킨이 디자인이 깔끔한 편이고 사이드 광고 붙이기에도 좋아서 많은 분들이 사용하고 계실 텐데요.
저도 Book Club 스킨을 선택해서 사용 중이지만 몇 가지 마음에 안 드는 부분은 조금씩 수정하면서 사용하고 있습니다.
아직 티린이지만 Book Club 스킨 수정에 관한 내용을 공유해보고자 합니다.
<글 제목 잘림 수정>
Book Club 스킨에 아쉬운 점은 여럿 있었지만 그중에 사진처럼 글 제목이 잘리는 부분이 걸리더라고요.
글에 대한 설명을 함축적으로 표현한 제목인데 잘려버리니까 글에 대한 요지가 파악이 되지 않는 것 같아서 수정을 위해 열심히 찾아봤습니다.
↓수정 방법↓
우선 스킨 편집에서 CSS에 들어가 주세요.
1164번째 줄에 있는 post-item. title로 이동합니다.
Ctrl+F로 'post-item'을 검색하셔도 되고요.
여기서 수정할 부분은 1171줄의 white-space: nowrap 부분입니다.
nowrap → normal로 고쳐주세요.
그러면 위 사진처럼 글 제목이 잘리지 않고 두 줄로 나옵니다.
제목이 잘리지 않으니 한눈에 글의 내용을 파악할 수 있게 되었습니다.
*모바일 화면도 자동으로 적용됩니다.
(꾸미기-모바일 탭에서 모바일 웹 자동연결 안 하신 분만 해당됩니다.)
<글 설명 줄이기>
글 제목을 늘리고 나니 모바일 화면에서는 세 줄까지 나타나는데 글 설명도 세 줄이니 왠지 너무 길어 보이는 거예요?
그래서 글 설명 부분을 세 줄에서 두 줄로 줄여보겠습니다.
↓수정 방법↓
우선 아까 글 제목 수정하던 부분 바로 아래에 있는 부분입니다.
1174번째 줄에 있는 post-item. excerpt 부분이에요.
여기에서 -webkit-line-clamp: 3;이라고 되어있는 부분에 숫자를 2로 바꾸어주세요.
그러면 말줄임표가 두 번째 줄에 생기게 됩니다.
여기서 끝이 아니에요!
그다음 2283번째 줄에 있는 list-type-thumnail. post-item. excerpt 부분으로 가주세요.
Ctrl+F로 list-type을 검색하시면 편합니다.
여기서 2285번째 줄의 height를 수정해줄 건데요.
3.75rem을 2.75rem으로 변경합니다.
짠! 글 설명 부분이 두 줄로 줄어들었습니다.
더 깔끔해 보이는 것 같네요.
*마찬가지로 모바일 화면도 자동으로 적용됩니다.
(꾸미기-모바일 탭에서 모바일 웹 자동연결 안 하신 분만 해당됩니다.)
1줄로 줄이거나 4줄로 늘리고 싶다면 숫자를 적당히 조절하면 됩니다.
<모바일 화면만 글 설명 줄이기>
(꾸미기-모바일 탭에서 모바일 웹 자동연결 안 하신 분만 해당됩니다.)
그런데 PC 화면은 그대로 두고 모바일 화면만 줄이고 싶다면 조금 복잡하지만 따라 해 보세요.
2859번째 줄로 이동해주세요.
그리고 2860과 2861 사이에 아래 내용을 추가해주세요.
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
그다음 2889번째 줄로 이동해주세요.(위에 세 줄을 추가해서 줄이 밀려내려 간 상태입니다.)
2890과 2891 사이에 아래 내용을 추가해주세요.
height: 2.5rem;
그러면 PC 화면과는 별도로 모바일 화면만 수정이 됩니다.
마찬가지로 1줄로 줄이거나 4줄로 늘린다면 숫자를 적당히 조절하세요.
<글 설명 아예 숨기기>
제목만 나타나길 원한다면 PC든 모바일이든 [list-type-thumnail . post-item .excerpt] 부분에서 height를 0rem;으로 입력하면 됩니다.
그러면 아래처럼 나오겠죠?
끝! 이 글 보시는 분들에게 도움이 되었으면 좋겠네요.
'패시브 인컴 > 블로그 관리' 카테고리의 다른 글
| 티스토리/블로그 최적화 위한 사이트맵 1초만에 만들고 등록하기(구글,네이버) (0) | 2020.08.16 |
|---|---|
| 티스토리/카카오애드핏 첫달 수익 공개(광고 게재 위치별 수익) (2) | 2020.08.06 |
| 티스토리/2020년 하반기부터 달라지는 점(애드핏&애드센스) (0) | 2020.07.28 |
| 티스토리/Book Club스킨 메인&관련글 썸네일 수정편집 (1) | 2020.07.26 |
| 티스토리/방문자 2천명 늘린 의외의 방법&애드핏 수익공개 (0) | 2020.07.09 |
댓글