티스토리 북클럽 스킨 썸네일 이미지 모양 변경 (정사각형 1:1 정방형) 및 제목 길이 조절 방법

 

*티스토리 블로그 『북클럽』 스킨 중 「북리뷰」와 「베스트셀러」 리스트의 썸네일 모양을 정사각형(1:1, 정방형)으로 바꾸는 방법과 제목 길이를 1줄에서 2~3줄로 변경하는 방법을 알려드립니다

 

티스토리 블로그 스킨 중 『Book Club』 스킨 리스트로는 총 4가지가 있습니다

북클럽 스킨 리스트

이 네 종류의 리스트 중에서
「북리뷰」와 「베스트셀러」 리스트의
썸네일을 정사각형(1:1, 정방형) 형태로 바꾸는 방법
& 제목의 길이를 조절하는 방법을 알아보도록 하겠습니다

잘 모르는 분야라 변경 방법을 찾아 쓰는 수고로움이 있었지만 방법 자체는 무척 쉬웠기에
저처럼 코딩, 티스토리 블로깅, 정보검색 등이 어렵고 어색한 분들을 위해 제 블로그에 적용한 방법을 공유해 보려 합니다

모쪼록 도움이 되었으면 좋겠습니다

 

 

1. 「북클럽 / 북리뷰」 썸네일 이미지 '정사각형'으로 바꾸는 방법

북클럽 북리뷰 썸네일 변경 전 / 후

 

1-1. 블로그 [관리] → 꾸미기 [스킨 편집] → [html 편집]으로 이동

[관리] → [스킨 편집] → [html 편집]

 

1-2. HTML 편집창에서
Ctrl+f 로 <s_article_rep>을 검색하거나 400 전후로 스크롤을 내려
C230x300를 C250x250으로 변경 

 

1-3. CSS 편집창에서
Ctrl+f 로 thum img 를 검색하거나 1150 전후로 스크롤을 내려
아래 이미지와 같이 변경 (수정+추가입력)

 

1-4. 좌측 창 새로고침하여 변경 상태 확인 후, 우측 창 적용 버튼 클릭

 

🎉 완성입니다 🎉

 

---

---

 

 

2. 「북클럽 / 베스트셀러」 썸네일 이미지 '정사각형'으로 바꾸는 방법

북클럽 베스트셀러 썸네일 변경 전 / 후

 

2-1. 블로그 [관리] → 꾸미기 [스킨 편집] → [html 편집]으로 이동

[관리] → [스킨 편집] → [html 편집]

 

2-2. HTML 편집창에서
Ctrl+f 로 <s_article_rep>을 검색하거나 400 전후로 스크롤을 내려
C230x300를 C230x230으로 변경

2-2 까지 완료한 상태

 

2-3. CSS 편집창에서
2220 전후로 스크롤을 내려 padding-bottom을 찾아
130.434782608695652%를 100%로 변경

 

2-4. 좌측 창 새로고침하여 변경 상태 확인 후, 우측 창 적용 버튼 클릭

 

🎉 완성입니다 🎉

 

---

 

 

---

 

 

3. 「북클럽」 노출되는 제목 길이 바꾸는 방법

북클럽 북리뷰 제목 길이 변경 전 / 후

 

북클럽 베스트셀러 제목 길이 변경 전 / 후

이 포스팅처럼 제목이 길다면 한 줄 노출로는 글의 주제를 단번에 파악하긴 어려울 수 있겠지요
제목 길이를 늘리는 방법은 「북리뷰」와 「베스트셀러」 리스트 둘 다 방법이 같아 한 번에 안내하겠습니다!

 

3-1. 블로그 [관리] → 꾸미기 [스킨 편집] → [html 편집]으로 이동

[관리] → [스킨 편집] → [html 편집]

 

3-2. CSS 편집창에서
Ctrl+f로 post-item .title 을 검색하거나 1170 전후로 스크롤을 내려
아래 이미지와 같이 변경 (삭제+추가입력)

※ 새로 입력한 -webkit-line-clamp:3; 에서 3은 3줄을 의미합니다
-webkit-line-clamp:2; 로 바꾸면 제목이 2줄로 노출됩니다

3-3. 좌측 창 새로고침하여 변경 상태 확인 후, 우측 창 적용 버튼 클릭

 

🎉 완성입니다 🎉