Fastboot 스킨 사이드바 넓히기, 넓이 조절

Fast boot 스킨 1.6.2 버전으로 바꾸고 난 후 나름 만족하며 어떻게 꾸밀지 고민하고 있을 때 사이드바에서 문제가 생겼습니다. 바로 사이드바의 애드핏 광고가 일부 잘리는 것이죠. 엄청 난감했습니다. 그림 일부가 잘리는 정도가 아니라 글자도 잘려나오는 것이었습니다. 예전에 사용하던 스킨에서는 이런 문제가 발생하지 않았는데 아마도 fastboot 1.6.2 스킨의 기본 사이드바의 너비의 문제인 것같습니다.

FastBoot 1.6.2 버전을 배포하신 제작자님 블로그에 가면 댓글과 제작자님께서 말씀해 주시는 부분들, FastBoot 관련 블로그들을 종합해 볼 때 FastBoot v 1.6.2는 화면 넓이를 가로로 12등분하였고, 1.6.2 버전의 본문과 사이드바간의 기본 비율은 9:3입니다. 

이 9:3이라는 것이 스킨의 html에 숫자로 적혀있다고 해서 들어가 봤습니다.

실제로 스킨 편집의 html에서 leftcontent를 검색하니 col-md-9로 되어 있습니다. 

html편집하러 들어가시는 방법 모르신다면 아래 링크를 참고해 주세요. 

[티스토리] 공감버튼 가운데로 옮기기, 공감버튼 삭제하기

그리고 위 그림에서 col-md-9 바로 밑에 있는 추천 광고위치1과 관련해 그 위치와 광고위치1 말고 다른 것은 어떤 것이 있는지 알고 싶으시다면 아래 링크를 눌러주세요.

[티스토리] - 카테고리 페이지 상단에 광고넣기

col-md-9는 본문 넓이를 말하는 것입니다. 이 숫자를 수정하였으면 사이드바 넓이를 수정해야 합니다. 사이드바는 sidebar col을 검색하시면 됩니다. 그러면 아래 그림과 같이 sidebar col-md-3이 나타나는데 이를 수정해 주시면 됩니다. 그리고 이 부분 바로 위에 col-md-9가 있는데 이 숫자는 신경 안쓰셔도 될 것 같습니다. 숫자를 바꿔 봤는데 눈에 띄는 효과는 없었습니다.

저는 우선 8:4로 바꿔 보았습니다. 

확실이 눈에 띄기는 한데 본문이 기존 설정에 비해 많이 작아보이기 때문에 저는 다시 9:3으로 복귀 시켰습니다. 혹시 비율의 총합이 12를 넘기면 안되냐고 물으실까봐 미리 말씀드립니다. 저의 경우 9:4로 바꿔보았는데 본문 부분은 위에 있고, 사이드바는 모바일에서 보는 것처럼 아래로 내려갔고, 8.5 : 3.5로 바꿨더니 역시 사이드바가 아래로 내려가고 원하는대로 나오지 않았습니다.

그래서 저는 이 본문과 사이드바 사이에 빈 공간을 줄여서 사이드바를 넓히는 것으로 생각을 바꿨습니다. 스킨을 하나 만들 수 없는 실력이기에 이 방법을 생각했습니다.

FastBoot 사이드바영역만 넓히기

CSS수정창에 들어가서 #content를 검색하시면 아래와 같은 부분도 검색이 될 것입니다. 여기서 숫자들 수정이 들어갑니다. 단순히 사이드바와 본문간에 있는 중간 빈 부분을 활용하시려면  margin-left와 margin-right의 크기만 바꿔 주면 됩니다.

아래 그림 중 뒷쪽에 있는 것이 수정한 것인데 여기서 right부분을 40px로 바꾼 것이고, 앞쪽에 있는 그림이 아무 숫자도 바꾸지 않은 것입니다. 확연히 차이가 나는 것은 알 수 있는데 사이드바 부분이 바뀌는 것이 아니라 본문이 바뀌네요.

테스트 해본 결과 차이가 나지 원했던 사이드바의 넓이는 고정되어있고, 본문의 넓이만 바뀌었습니다. right 부분을 -25로 하면 아주 약간 띄워진 상태로 사용하실 수 있습니다.

[티스토리] - 카테고리 페이지 상단에 광고넣기

[재테크] - P2P금융, P2P 재테크, P2P 금융업체 쉽게 이해하기

[재테크] - 재테크 투자하기 렌딧, 8퍼센트 5천원으로 P2P 재테크 시작하기

[재테크] 주식과 펀드의 차이

직류에서 교류로 바꾸기 AC DC 교류에서 직류로는 앞편에서