본문 바로가기
공부 STUDY/블로그 blog

티스토리 시작하고 썸네일 크기변경이랑 비율 설정 바꾸기 겨우했다

by 비프리노 2020. 3. 28.

  네이버 블로그를 하다가 티스토리로 넘어온지 1주일 정도 되었네요. 그러던 중 포스팅은 일단 하고 있는데 음.. 뭔가 스킨을 바꾸고 싶은 욕심이 들더라구요! 사람이 그럴 때 있잖아요 ㅋㅋ 왠지 뭔가 꾸미고 싶은거!! 네이버는 편했는데 티스토리는.. 하 무지 어렵더라구요 ㅋㅋ 하지만 자유도가 높아서 썸네일 크기나 비율 설정을 맘만 먹으면 할 수 있다는 거!! 어렵지만 공부하면 할 수 있다는 생각에 신이나서 몇시간 동안 ㅡㅡ 썸네일 크기변경하겠다고 이를 악 물고 매달렸네요. HTML CSS 이런 걸 잘 모르다보니 그냥 무조건 그럴 싸한 영어만 보고 웬만한 숫자 다 바꿔서 바뀌면 그거구나!! 이러면서 ㅋㅋㅋ 하.. 근데 실력이 부족해서인지 다 바꾸진 못했지만 봤을 때 좀 뿌듯한 정도로 바꿨습니다. 티스토리 블로그 초보자의 스킨 변경과 꾸미기 연습! 시작합니다.

티스토리 썸네일 고치기

  이 썸네일 마저도 포토샵이 없는 컴퓨터를 사용하다보니 PPT로 그럴싸하게 만들었네요 ㅋㅋ 사람이 절실하면 뭐라도 되긴 됩니다. 무튼 저처럼 티스토리를 시작하는데 썸네일 만드는 법 말고 블로그에 표시되는 썸네일 사이즈나 비율 변경을 원하시면 한 번 보세요! 사이다 처럼 알려드릴 수는 없겠지만 대략 이런 방법인 것 같다. 정도로만 보시면 되겠습니다.

 

스킨 설정하자마자 볼 수 있는 모습

  우선 마음에 안 들었던게 세로로 길쭉한겁니다. 물론 이 스킨이 책 출판?용이라서 왠지 잡지 느낌도나고해서 썼지만 세로 사이즈가 A4용지 비율과 달랐고 그럴바에 차라리 무난하게 1:1 정사각형 비율로 가고 싶었습니다. 마치 인스타그램처럼요! 아시다시피 다음 노출에도 1:1 비율 사진이 필요하더라구요. 우측 사이드바도 정사각형이니 썸네일도 역시 조정하고 싶었습니다. 와 근데 이걸 바꾸려니 진짜 뭐 부터 건드려야 할지도 모르겠고 ㅋㅋ 안그래도 더운데.. 땀은 계속나고 ㅋㅋ 참고로 저는 중국 광저우에 거주중입니다. 그래서 엄청 습하고 덥네요 ㅠㅠ 3월인데도..

 

스킨 변경 하는 방법을 알아내는 중

  우선 아~주 조금이나마 알고 있는 HTML을 들어가봤습니다. 진짜 별거 다해보다가 저 썸네일 사이즈를 체크하니 230정도 더라구요 그래서 검색해봤는데 딱 있었어요 ㅠㅠ 이 과정까지.. 1시간 이상 소요됐습니다 ㅋㅋㅋㅋ 하 컴알못.. ㅠㅠ 제가 포토샵 이런 건 자신 있는데 와 이런 인터넷 언어는 정말 어렵네요. 하지만 재밌습니다. 모르던 수학 공식을 하나하나 풀어가는 느낌이랄까요? 다시 태어나면 이과로 가야겠어요..

 

크기 변경했는데 뭔가 이상함

  일단 숫자를 바꿔봤습니다. 근데 왠걸? 뭔가 반응이 왔습니다. 1:1 비율이니 300x300으로 바꿨지만 어차피 230x230이니까 덜 깨지고 용량도 적게하기 위해 스샷찍은 뒤 230으로 바꿨습니다. 아 근데 또 문제가 있습니다. 도대체 저 회색은 뭥미?!?! html은 아주 조금 알아도 CSS는.. 하 미지의 세계였는데 오늘 드디어 발을 들였습니다. 어찌나 어렵고 열받던지. 하지만 바꿨을때의 성취감이란 ㅠㅠ 블로그하며 성취감이라니!! 진작 옮길걸..

 

CSS로 넘어가서 이것저것 수정해봄 data-origin-width=

  아까 230으로 바꾼 부분을 잘보니 thumbnail-1이란게 있더라구요 그래서 혹시나 CSS도 있나해서 보니 하 ㅠㅠ 있어요!! 그래서 이것 저것 지우고 숫자 바꾸고 새로고침 노가다하고 ㅋㅋ 결국 그렇게해서 제가 필요한 것들을 찾았습니다. 마치 외국어 공부하는 느낌이 드네요. 저 padding-bottom 이라는 게 하단 여백. 그래서 저걸 100%로 바꿨던가.. 그랬을 겁니다. 이렇게 하나 둘 씩 만지니까 뭔가 제가 원하는 모습이 조금 씩 나오더라구요. 숫자 바꿔서 새로고침 했을 때 바뀌는 모습이란. 캬.

 

드디어 완성된 1:1 비율의 썸네일

  완전 생초보가 이렇게 바꿨을 때 어떤 기분이 들었겠습니까 ㅠㅠ 구글링도 열심히했는데 다들 썸네일 사이즈 조절이나 만드는 법만 많더라구요. 저는 스킨 편집을 하고 싶었는데!!! 결국 또 이것저것 만지다보니 썸네일 비율 편집만 4시간 걸린듯.. ㅋㅋ 그래도 오늘 이 정도 했으니 다음엔 더 잘 할 수 있을 것 같네요. 근데 문제는 카테고리를 클릭하니 이번엔 비율이 가로로 되어있더라구요 ㅋㅋ 그래서 그것도 바꾸고 오느라 좀 늦었습니다. 그건 list-post였나.. 까먹었네요 ㅋㅋ 저는 제목에 어쩌고 저쩌.. 이러면서 끊기면서 점이 찍히는게 싫어서 제목 다 나오게하고 날짜도 우측이 익숙해서 바꿨습니다. text-align : right; 이거를 하니까 되더라구요 이건 다행히 구글링으로 쉽게 찾았습니다. 요 몇일 구글 네이버 줌 빙 다 등록하고 이것저것 하니까 시간이 훌쩍 지나가네요. 이번 티스토리 블로그는 정말 열심히 키워봐야겠어요. 예전에 네이버 블로그를 쭉 들여다봤는데 열정이 대단하더라구요.. 그 열정 모아서 이 곳에 한 번 쏟아보겠습니다! ㅋㅋ 아자!!

 

변경 전 후

  전 후 비교를 해봤습니다. 음 이 때는 약간 이런 느낌이었군요. 그 이후에도 아주 살짝 바꿨습니다.

 

현재 최종 적으로 사용하고 있는 썸네일 모습

  이렇게 여백들 조금 조절하고 기존 썸네일 1:1로 변경해서 다시 올리고 게다가 오늘 쿠팡 배너도 달고 정신 없는 하루 였네요 ㅋㅋ 그 대신 이게 좋은 점이 쌓이면 쌓일 수록 재 자산이 된다는게 너무 뿌듯합니다. 네이버 블로그는 열심히 키워도 조금 안 하면 뭔가 확 죽는 느낌이고 억지로 글을 쓰는 느낌이었는데. 여긴 제 진심을 쏟을 수 있어 좋네요 ㅋㅋ 원래 워드프레스를 하려했는데 블루호스트에서 가입할때 오류가 나서 .. 아쉽게도 못하게 되었어요. 물론 돈도 드니까 조금 고민이었는데 티스토리가 의외로 잘 되어있네요. 티스토리하면서 느낀건데 Html css 이런 것도 모르고 워드프레스 하면 저는 ㅋㅋㅋ 어유 아직 아닌 거 같습니다. 일단 이거 부터 열심히 키워보자!!!!

 

  PS. 와 플러그인들 봤는데 신세계.. 너무 좋잖아?!

댓글