티스토리 북클럽 스킨 I 본문 카테고리 '뉴북' 썸네일 정사각형으로 수정하기

 

목차

본문 카테고리 '뉴북' 썸네일 정사각형으로 수정하기

제 블로그는 북클럽 스킨을 사용하고 있으며 북클럽 스킨의 장점은 다음과 같습니다.

□ 깔끔하고 세련된 디자인
북클럽 스킨은 책을 읽는 느낌을 강조하는 디자인으로, 깔끔하고 세련된 느낌을 주어서 사용자들이 더욱 집중할 수 있도록 도와줍니다.

□ 커스터마이징이 용이
북클럽 스킨은 사용자가 쉽게 커스터마이징 할 수 있는 기능들을 제공합니다. 사용자는 색상, 글꼴, 배경 이미지와 커버 홈화면 등을 조정하여 자신만의 독특한 블로그를 만들 수 있습니다.

□ 모바일 반응형
북클럽 스킨은 모바일 환경에서도 적절하게 노출되도록 반응형으로 디자인되었습니다. 따라서 모바일 사용자들도 편리하게 블로그를 이용할 수 있습니다.

 

이런 이유 등으로 많은 사람들이 처음 블로그를 시작하시는 분들에게 추천하는 스킨 중 하나입니다.

 

스킨 편집과, 카테고리 관리 등을 통해 자신이 원하는 스킨으로 최적화를 만들어 놓고 조금 더 수정하고 싶은 부분이 있다면 HTML 편집으로 넘어가서 수정을 하면 됩니다.

 

이때는 조금만 웹서치를 한다면, 많은 자료들을 었을수 있고 이를 잘 적용한다면 자신이 원하는 스킨으로 수정하여 자신만의 블로그를 만들 수 있을 것입니다. 

728x90

 

💡 '뉴북' 썸네일 정사각형으로 CSS 수정하기 예제

 

 

'뉴북' 썸네일 CSS 수정하기

북클럽 스킨 테마는 썸네일 이미지가 책 표지 비율을 띄고 있습니다. 이 형태도 나쁘진 않지만,

기본적으로 통용되는 1:1 비율의 정사각형 썸네일을 만들어 보도록 하겠습니다.

 

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

---

 

2. cltr+F를 눌러 .list-type-thumbnail .post-item .thum img를 검색합니다.

.list-type-thumbnail .post-item .thum img

---

 

3. width: 126px / height: auto를 각각 with: 168px / height: fit-content 로 바꾸고. 상부의 '적용'을 클릭합니다.

---

 

4. 168px는 현재 이 블로그에서 쓰이는 크기이고, 각자 성향에 따라 숫자를 크게 쓰거나 작게 써서 크기를 조정할 수 있습니다.

 

CSS 코드 복사하기 🔻

    /* 뉴북 썸네일 수정 */
    width: 168px; /* 126 */
    height: fit-content; /* auto; */

 

CSS 코드 다운로드 🔻

뉴북 썸네일 CSS.txt

0.00MB

 

 

'뉴북' 썸네일 HTML 수정하기

1. 'html 편집 > CSS옆 HTML'로 들어갑니다.

---

 

2. cltr+F로 index_article_rep을 쓰고 저 항목을 검색합니다.

index_article_rep

---

 

3. 검색 후 3번째 index_article_rep에서 C230x300으로 되어 있는 것을 C230x230으로 변경합니다.

여기서 C은 꼭 대문자여야 하고, x는 꼭 소문자여야 합니다.

 

HTML 코드 복사하기 🔻

<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C230x230/?fname=https://blog.kakaocdn.net/dn/EvaaU/btsEVJ431UR/0mxj7KKrnfrI3ckndPQk3K/img.gif" alt="">
</s_article_rep_thumbnail>

 

HTML 코드 다운로드 🔻

뉴북 썸네일 HTML.txt

0.00MB

 

4. '적용'을 클릭 후 새로고침을 하면 변경된 썸네일을 확인할수 있습니다.

728x90

 

마치며

간단한 CSS를 사용하여 티스토리 북클럽 스킨의 썸네일의 스타일을 변경하는 방법을 살펴보았습니다.

이외에도 CSS의 코드를 조금씩 변경하면 좀 더 멋진 나만의 블로그를 만들 수 있습니다.

 

다만 CSS의 코드 수정 시 /* 스타일 코드 삽입 */ 또는 <!-- HTML -->을 꼭 넣어주어 수정한 부분을 표시해 주시기 바랍니다.

 

티스토리 북클럽 스킨 I 커버 아이템 뉴스레터 썸네일 정사각형으로 변경 (tistory.com)

티스토리 북클럽 스킨 I 커버 아이템 뉴스레터 썸네일 정사각형으로 변경

 

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