본문으로 바로가기

[Blog] 티스토리 본문 크기 변경 및 늘이기

category Blog 2014. 6. 7. 01:16

여러분의 광고는 사이트 혹은 블로그 디자인과 잘 어울립니까? 


아래 그림을 보면 본문 크기가 600 정도에 맞춰져 있습니다.


구글 애드센스의 가로형 광고는 728x90 하고 468x60 정도가 선호하는 크기인데요, 468x60짜리 광고를 달려고 하면 공백이 너무 남습니다. 보기 싫습니다. 728x90크기의 광고를 넣으려면 할 수 없이 본문 크기를 넣어야 합니다.  



구글은 왜 728이라는 크기를 사용할까요? 기본적인 해상도 중에서 1024x768이라는 해상도가 있습니다. 한때 참 즐겨쓰던 해상도네요. 이 768이라는 숫자에서 왼쪽 20, 오른쪽 20을 빼버리면 728이라는 숫자가 나옵니다. 티스토리에서 본문 크기를 800px 로 잡아두면 왼쪽과 오른쪽 여백을 20px를 잡습니다. 본문에서 실제 쓸 수 있는 크기는 760px이 되지요. 


728x90 크기의 광고를 본문에 꽉 차게 넣고 싶습니다. 어떻게 하면 될까요? 728에서 양쪽 공백 20씩 더해 768 크기로 본문을 늘이면 됩니다. 본문을 늘리는 방법은 티스토리 관리자로 가서 HTML/CSS 편집합니다.


#content {

float:left;

width:/*@post-width=*/768px/*@*/;

}


여기서 width 부분을 768로 변경시키줍니다. Ctrl+F 로 "@post-width="을 모두 찾아서 768px로 고치면 우리가 원하는 크기로 본문의 크기가 변경이 됩니다. 


본문 크기가 늘어난 만큼 컨테이너(container) 부분의 크기도 늘여줘야 합니다. 원래 본문 크기가 600에서 768로 변경되었으니 늘어난 168만큼 더해주면 됩니다. 원래 크기 808 에서 168을 더한 결과값 976로 변경합니다.


#container {

width:/*@post-width:208=*/976px/*@*/;

margin:0 auto;

padding:0;

color:#898989;

font:12px/1.5 Dotum;

word-wrap: break-word;

}




제대로 변경되셨나요? "티스토리 본문 크기 변경"을 검색해보면 대부분 여기까지만 설명이 되어 있습니다. 하나 빼먹었는데요, 관리자로 들어가셔서 글설정 -> 글쓰기 환경 -> 글쓰기 가로폭 -> 716 px 로 변경해주시면 됩니다. 광고 가로 크기였던 "728"로 설정해주셔도 크게 상관은 없는데요, 그림을 올리게 되면 오른쪽 부분이 짤려서 보이게 됩니다. 디테일한 부분에 신경을 쓰고 싶으시다면 원래 728에서 12px정도 뺀 716px로 설정하면 그림이 짤림없이 제대로 나오게 됩니다. 



한번 더 강조하면 글 설정에서 글쓰기 가로폭을 잊지 말고 설정해주시면 되겠습니다.