티스토리 Whatever 스킨 가로폭 수정하는 방법

스킨의 사소한 부분을 수정하려고 스킨을 변경해 버리면 기존의 CSS가 초기화 되어버립니다.

(티스토리 블로그 스킨, SEO, 애널리틱스, 등) CSS와 최적화 설정이 전부 날아가버려요.

그래서 기존 스킨을 살짝 수정하려고 할 때는 무조건 html 편집을 해주셔야 합니다.

그럼 기존 스킨에서 가로 폭만 편집하는 방법을 알려드리도록 하겠습니다.

티스토리 반응형 스킨 가로 폭 변경하는 방법

우선, 관리자 화면 꾸미기 - 스킨 편집으로 들어갑니다.

블로그 메인 화면과 스킨 편집 창이 함께 뜨는데요. 여기서 html 편집 이라는 버튼을 누릅니다.

여기서 수정할 레이아웃을 찾아서 가로폭을 수정해 주시면 됩니다.

저는 Layout Selector에서 블로그 내용을 담당하는 레이아웃인 #content .inner를 쉽게 찾을 수 있었습니다.

예제를 위해서 500px로 줄여보았습니다.

이렇게 원래 700px 이었던 모습에서 500px로 가로폭이 줄어든 것을 확인할 수 있습니다.

왓에버 스킨의 원본은 700px도 아니였는데, 800~900px 정도 되었던 것 같아요.

저는 글자 크기를 키우는 것보다 폭을 줄이는게 이쁜 것 같아 유명 블로거 분을 참고 삼아 줄여보았습니다.

 

그러나, 왓에버 스킨은 이렇게 끝나면 문제가 생깁니다.

바로 이 위에 있는 post-header인데요. 내용물만 줄이면, 이 헤더가 붕떠버리기 때문에, 이 헤더도 함께 줄여주셔야 합니다. 헤더의 위치는, 05. Components에 있는 post-header에서 찾을 수 있습니다.

저는 530px로 줄여보았습니다.

완성된 블로그 화면입니다!

수정된화면

기존화면

기존의 블로그 화면과 비교해서 많이 좁아진 화면을 확인할 수 있습니다!

이상 오늘의 왓에버 스킨 가로폭 줄이는 방법에 대한 포스팅이였습니다!