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

[📌 코드 수정 시 주의사항은 아래 '더보기'를 참고하세요.]

1. 스킨 저장.

스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.

스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.

2. [Ctrl] + [F]를 사용할 때.

먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.

커버 아이템 뉴스레터 썸네일 정사각형으로 변경

홈 설정에서 커버를 선택하고, 커버 아이템을 뉴스레터로 설정 후 뉴스레터의 썸네일 사진의 비율이 마음에 들지 않는다면, HTML과 CSS를 수정하여 아래처럼 직사각형의 썸네일을 정사각형으로 변경할 수 있습니다.

뉴스레터 썸네일 CSS 편집

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

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

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

2. 'ctrl + F'를 눌러서 cover-thumbnail-2 ul li figure를 검색하여 아래의 코드 위치를 찾습니다.

cover-thumbnail-2 ul li figure

3. 여기에서 수정할 부분은 총 2곳입니다.

width: 128px;를 width: 168px;로 수정,
height: auto;를 height: fit-content;로 수정
수정 후 [적용] 버튼을 클릭해 변경 사항을 저장합니다.

.cover-thumbnail-2 ul li figure {
float: right; width: 168px; /* width: 128px; */
margin-left: 57px;
}
.cover-thumbnail-2 ul li figure img {
width: 100%; height: fit-content; /*height: auto; */
border: 1px
solid #f1f1f1;
box-sizing:
border-box;
}

뉴스레터 썸네일 HTML 편집

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

2. HTML 탭에서 'ctrl + F' 버튼을 눌러서 cover-thumbnail-2를 입력하여 코드를 찾습니다.

cover-thumbnail-2

3. 여기에서 <img src="//i1.daumcdn.net/thumb/C126x166/?fname=" alt=""> 코드의 C126x166을 C168x168으로 수정합니다.

<s_cover_item_thumbnail>
                                                      <!-- (128x166) -->
	<img src="//i1.daumcdn.net/thumb/C168x168/?fname=" alt="">
</s_cover_item_thumbnail>

4. 마지막으로 상단의 [적용] 버튼을 클릭하고, 아래와 같이 바뀐 블로그 첫 화면을 확인하면 됩니다.

728x90