본문 바로가기
애드센스 블로그

북클럽 스킨 추천, 게시글 썸네일 정사각형, 비율, 안 잘리는 방법

by 우 주 0531 2024. 2. 20.
반응형

티스토리 북클럽 스킨 추천

북클럽 스킨 추천하는 이유

티스토리 블로그를 처음 시작하시는 분들이라면 아마도 거의 대다수의 분들이 북클럽 스킨으로 설정을 하실 텐데요.

이는 처음 애드센스 수익형 티스토리 블로그를 시작하시는 분들이 설정 방법을 검색하면 북클럽 스킨을 추천한다는 글이

무수히 많기 때문입니다. 남들이 입을 모아 추천하는 데는 분명 이유가 있습니다. 

 

티스토리에서 제공되는 예쁘게 디자인되어 꾸며진 여러 스킨들이 많이 있습니다.

유료로 판매되는 스킨들도 구매하거나 폰트나 폰트 크기도 바꾸고 싶은 생각이 들 때도 있을 텐데요.

결론적으로 전혀 그러실 필요가 없습니다.

왜냐하면 필요한 정보만 텍스트로 보고 사라지기 때문입니다. 

 

계속된 스킨 편집과 html, css 설정 변경은 크롤링 면에서 득 될 것이 전혀 없습니다.

 

티스토리 스킨 설정을 할 때 중요한 것은 두 가지만 기억하시면 됩니다.

1. 북클럽 스킨 사용

2. css 설정을 통한 폰트 크기 조정

 

티스토리 검색 유입을 보면 모바일 유입이 꽤 많은 비율을 차지하게 된다고 합니다. 스킨을 예쁘게 꾸며놓아도 모바일 화면에서 스킨은 보이지 않습니다. 그렇기 때문에 스킨 설정을 통한 꾸미기는 크게 쓸데없는 작업입니다.

가장 중요한 이유는 페이지 로딩 속도입니다. 북클럽 스킨은 매우 안정적이고 빠르게 페이지가 로딩됩니다. 

구글 seo(검색 엔진 최적화)는 페이지 로딩 속도도 중요하게 보는 요소 중에 하나입니다. 그런데 다른 스킨을 사용하여 페이지 로딩 속도를 저하시키게 된다면 구글에서는 해당 블로그를 후순위로 매기게 됩니다.

위 이유 때문에 같은 맥락에서 구글 노출을 위한 티스토리 블로그는 사진 개수와 용량도 제한하는 게 좋다고 하는 이유입니다.

 

결론적으로 티스토리 블로그 운영을 계획하신다면 페이지 로딩이 빨리되는 가벼운 페이지를 최우선으로 잡아야 합니다.

 

  

1:1, 비율, 안잘리는 방법

티스토리 썸네일 정사각형 변경

위에서 티스토리 북클럽 스킨의 장점에 대해 소개해 드렸는데요. 그런데 북클럽 스킨의 썸네일은 우리가 일반적으로 알고 있는 직사각형의 책의 비율로 되어있어 이미지가 잘리는 경우가 있습니다.
이번 포스팅에서는 북클럽 스킨에서 정사각 썸네일을 사용해 내 썸네일 이미지가 잘리지 않도록 하는 방법을 알아보겠습니다.

 

1. 가장 먼저 '블로그 관리 홈 > 꾸미기 > 스킨 편집'으로 들어갑니다.
'기본 설정 - 목록 구성 요소''목록+내용'으로, '리스트(아래로 스크롤) - 리스트 타입''뉴북'으로 설정합니다.

 

2. '스킨 편집 > html 편집'에서 Ctrl+F를 눌러 <s_article_rep_thumbnail>로 시작하는 부분을 찾아냅니다.

3. 썸네일 크기를 230*230으로 수정합니다.
230*300으로 되어있을 텐데 230*230으로 크기 변경 후 적용 버튼을 눌러주세요.

블로그 홈에 가보시면 게시글 썸네일이 정사각형으로 바뀌어 있음을 확인할 수 있습니다. 

썸네일비율조절

 

썸네일 사이즈 키우기

설정된 썸네일 사이즈가 작다고 느껴진다면, CSS 편집으로 수정할 수 있습니다.

 

1. 'html 편집'에서 CSS로 들어갑니다. Ctrl+F를 눌러 아래 내용을 검색합니다. 

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

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


2. 아래 내용으로 따라 변경 후 적용 버튼을 눌러주세요.('/* 내용 */'은 주석처리) 

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

width: 160px; /*width: 126px;*/
height: auto;

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

width: 160px; /*width: 126px;*/
height: auto; /*height: 166px;*/
 

 

css설정

 

 

변경전&#44;후


위 방법을 통해 간단하게 정사각형 썸네일 만드는 설정을 하였습니다.
애드센스 블로그 설정에 도움이 되셨길 바랍니다. 감사합니다.


반응형