Fastboot v1.6.2 사이드바 모듈 및 배너 간격 수정하기

사이드바 간격을 굳이 줄이고 싶으시다는 분이 계셔서.. ㅋㅋ

또 열심히 뒤적뒤적해봅니다.

 

아무래도 사이드바 모듈의 top이나 bottom에 마진을 줬을 것 같죠?

(padding은 콘텐츠 안의 여백이고, margin은 콘텐츠 밖의 여백입니다.)

 

요소검사를 통해 한 번 찾아봅시다.

요소검사는 정말정말 좋은 녀석입니다..ㅋ

혹시 지나치셨다면 꼭 한번 참고하세요.

 

☞ 홈페이지 요소 검사 활용하기

 

평소에는 익스플로러로 요소검사를 활용하는데,

div구조나 여백을 파악할 땐 크롬이 짱입니다.

 

 

 

#1. 여백 구조 파악하기

 

일단 사이드바 모듈 한 부분을 클릭하여 요소검사(크롬에서는 검사)를 해볼게요.

저 초록부분을 가리키네요.

참고로 저 태그들은 티스토리에 등록한 skin.html이 아니라 로딩된 화면에 대한 html입니다.

그러니 당연히 100% 일치하지는 않지요.

 

 

이제 크롬의 진가를 발휘해봅시다.

마우스 포인트를 코드 위아래로 움직이면 해당되는 구역에 블럭 표시가 됩니다.

아래처럼요!

블럭된 부분을 보니 바닥에 여백이 있습니다.

사이드바 모듈 간격은 bottom으로 설정된 거였군요.

div.panel.panel-default 라고 되어있구요.

 

 

 

 

#2. Fastboot 사이드바 모듈 간격 수정하기

 

감을 잡았으니 얼른 테스트를 해봐요.

이 속성은 fastboot.css에 정의된 속성인데요.

이것 때문에 fastboot.css 파일 다운로드 했다가 업로드하기는 좀 귀찮아요.

CSS로 가서 Important를 사용해보자구요.

 

관리 < 꾸미기 < HTML/CSS편집 < CSS 맨 마지막에다가

아래 태그를 추가해봅니다.  

 

Fastboot 사이드바 모듈 간격 태그.txt

#sidebar .panel.panel-default {margin-bottom:0px !important;}

 

바닥 여백을 0으로 해보았습니다. 새로고침을 해보니 정말 간격 없이 딱 붙어버렸네요.

얘가 맞았어요ㅠㅠ 찾아서 기쁘네요.

이제 원하는 수치에 맞추어 적절히 조정하고, 저장!

 

 

 

#3. 티스토리 플러그인 배너 간격 수정하기

 

위의 태그는 skin.html으로 설치한 사이드바 모듈에만 적용됩니다.

티스토리 플러그인으로 사이드바에 HTML 배너출력한 경우에는

태그를 한 줄 더 추가해야합니다.

 

티스토리 플러그인 배너는

margin이 아닌 padding으로 bottom에 9px 적용되어 있더라구요.

아래 태그를 참고하세요.

 

티스토리 플러그인 배너 간격.txt

 

#sidebar .module.module_plugin {padding-bottom:0px !important;}

 

어디 입력하시는 지는 알죠!?

#2와 똑같이, 관리 < 꾸미기 < HTML/CSS편집 < CSS 맨 마지막에 입력하시면 됩니다.

 

이 스샷 안남겨도 잘 해결하셨으리라 믿어요.

혹시 사이드바에 광고를 게재하고 계시다면

사이드바 모듈 간격을 조정할 때, 광고와 다른 컨텐츠의 간격을 고려하시는 거 잊지마세요!