티스토리 썸네일크 최적사이즈(1:1)로 변경하는 방법

이제 막 티스토리를 시작하며 썸네일도 몇시간에 걸려 만들었지만 정작 올리고 나면 오른쪽이 짤려있거나 왼쪽이 짤려있거나 등 다른 사람처럼 딱 맞는 1대1비율이 안맞는 경험을 했을거에요. 

저도 이제 막 시작한 블린이라 썸네일 제작할 때 400*400도 해보고 500*500도 해보았지만 막상 다시 올리면 제대로 된 비율이 안되더라구요. 이리저리 검색해서 찾아보고 수정해봐도 점점 더 이상해지는 내 썸네일.. 그러다 몇일에걸려 방법을 찾았습니다! 그 방법을 공유해보고자 해요. 

썸네일크기변경 방법 순서대로 작성 해 놓을 테니 그대로 따라하신다면 이쁜 썸네일이 만들어질거에요.

 

---

< 티스토리 썸네일크기 변경방법>

설정에 블로그관리자홈- 꾸미기에 스킨편집- 우측위 html편집 클릭- 맨위 두번째 css클릭

 

마지막에 html말고 CSS를 꼭 클릭하셔야 합니다. html을 누르시고 안나온다고 하시는 경우가 많으니 주의해주세요.

CSS에서 키보드 ctrl+F(찾기)를 눌러 thum img 를 검색해주세요.

 

스크롤을 내려 903번을 보면 노랑으로 칠해져있는 부분이 보이겠지만 

스킨종류 마다 위치가 다를 수 있고 보통 900대 쪽에 있으니 참고해주세요.

 

이제 집중해서 잘 따라와주세요.

width 를 145px로 변경, 아래 height: 145px 로 변경한다.

그다음 margin 를 0 0 0 0. 5px 로 변경한다. 

 

자, 이제 마지막으로 적용을 눌러주고 첫번째인 HTML을 클릭한다.  ctrl+F(찾기)를 눌러 s_article_rep_thumbnail 를 찾는다. 주황색으로 검색된 부분 아래 우측에 C264x200을 R230x230으로 변경하고 적용을 눌러준다. (R=대문자 x는 소문자)

 

 

적용 후 새로고침을 눌러 썸네일을 확인해보면 1:1 비율로 알맞게 만들어 진것을 확인할 수 있다.

만약 별 다른게 없다면 천천히 다시한번 설정해보세요.

 

참고로, CSS에서 width ,height를 145px 말고 150px로 해도 상관없다. 둘다 해보고 맞는 사이즈로 변경하면 됩니다. HTMI에서 C264x200을 R230x230 으로변경할 때 C.R.P 세종류가 있으며 세개를 다 적용해보고 원하는 것으로 적용하면 됩니다. R는 살짝 가로로 퍼진 스타일, P는 정중앙에 위치한 스타일이니 참고해보세요.

다 귀찮고 그냥 1:1이면 된다 하시는 분은 위 방법대로 해주시면 됩니다.

 

---

지금 작성한 방법은 PC버전용이라 모바일버전용 에서 확인했을 때는 그대로에요. 모바일(핸드폰)에서도 티스토리 블로그 관리 설정에 들어가셔서 위 방법과 같이 그대로 해주시면 모바일에서도 1:1비율 썸네일이 적용될거에요!

스킨편집으로 썸네일크기를 조절하긴 하였지만 애초부터 썸네일크기를 제각각으로 만들어서 아직 엉성하네요.. 블린이는 갈길이 멉니다~ 모두 화이팅해요^^