FastBoot스킨 사이드바 크기 조절하기

다른 블로그와 달리 티스토리를 많이 이용하는 이유중 하나가 티스토리 같아 보이지 않는 스킨 적용입니다. 제가 적용한 FastBoot 스킨이 그중 많이 이용을 하고 계시는 스킨인데요. 이 스킨을 적용한 티스토리 블로그에서 애드센스 광고를 적용하는데 사이드바 크기와 광고 크기가 안맞는 현상이 있습니다. 보통 그냥 냅두고 적용을 하고 계시죠.


사이드바에 적용한 애드센스 광고는 반응형인데 사이드바에 할당된 크기에 비해서 살짝 높이가 작게 광고가 노출이 되어서 아래쪽에 빈 공간이 생기고 있습니다. 



노출되는 사이드바 광고와 아래쪽에 생기는 빈 공간

사이드바에 반응형 광고를 적용했을때 어떻게 출력이 되는지 확인을 해보도록 하겠습니다.

이미지를 보시면 노출되는 광고 아래에 빈 공간이 생기는걸 보실 수 있습니다. 사이드바 크기를 키우면 광고가 반응형이기 때문에 빈 공간이 생기지 않을거란 생각을 하며 사이드바 크기를 키워보도록 하겠습니다.



사이드바 크기 조절하기

우선 티스토리 관리로 이동을 해주세요.

꾸미기 항목에서 HTML/CSS 편집을 클릭해 주세요.

HTML쪽에서 코드를 수정해 주셔야 하는데요. 수정해 주셔야 하는 부분이 두군데 입니다. 먼저 확인을 해보도록 하겠습니다. 컨트롤 + F를 눌러서 찾기를 해주세요.

첫번째로 수정해 주셔야 하는 부분은 leftcontent를 입력해서 찾아 주셔야 합니다. col-md-9라고 입력이 되어 있는걸 확인 하실 수 있습니다. 그 다음으로 수정해야 하는 부분을 확인해 보도록 하죠.

sidebar를 입력 하셔서 찾아 주시면 sidebar col-md-3이라고 입력이 되어 있는걸 확인 하실 수 있는데요. 사이드바 크기를 조절 하려면 이 두 부분을 수정해 주셔야 합니다. 숫자 9가 입력된 부분은 본문의 넓이 입니다. 숫자 3이 입력된 부분은 사이드바의 넓이구요. 9와 3의 합이 12인데 숫자를 수정 하실때에 꼭 지켜 주셔야 하는것이 합이 12가 되도록 숫자를 수정해 주셔야 한다는 점 입니다. 8이랑 4로 수정을 하셔도 되고 7이랑 5로 수정을 해주셔도 됩니다. 10이랑 2로 수정을 해주셔도 물론 되요. 합이 12면 어느 숫자든지 괜찮습니다. 본인이 원하시는 넓이로 수정을 해주시면 되요. 저는 8이랑 4로 수정을 해보도록 하겠습니다.




본문과 사이드바의 숫자 합이 12가 안되면 어떻게 될까

본문 넓이는 그대로 두고 사이드바 크기를 조절하면 어떻게 되는지 궁금해서 본문은 9로 그대로 두고 사이드바만 4로 적용을 해보았습니다.

적용된 블로그 메인을 보시면 사이드바가 노출이 되지 않고 있는걸 보실 수 있습니다. 숫자를 수정 하실때에는 꼭 12가 되도록 수정을 해주셔야 본문과 사이드바 노출이 잘 되는걸 보실 수 있습니다. 숫자의 합이 꼭 12가 되도록 수정을 해주세요.



본문은 8로 사이드바는 4로 수정을 해보았다

본문 넓이는 줄어들겠지만 사이드바에 애드센스 광고가 아래에 빈 공간이 없이 출력이 되길 바라는 마음으로 숫자를 수정해 보았습니다.

꽤나 충격적인 결과가 나왔습니다. 제가 생각했던 사이드바 광고는 빈공간 없이 꽉 찬 넓은 크기의 광고가 출력이 되어야 하는데 354x280의 크기로 줄어든 광고가 출력이 되고 있었습니다. 그리고 본문에 출력이 되는 광고는 옆으로 삐져나오는 결과가 되어버렸네요. 왜 사람들이 사이드바에 빈공간이 있어도 그냥 냅두는지 이유를 알게 되었습니다. 크기 조절 한번 했다가 모든 광고의 크기를 다시 조절해서 적용해야 하는 귀찮은 작업을 하게 생겨서 본문과 사이드바의 넓이를 원래 상태인 9와 3으로 다시 설정을 하였습니다. 결과는 원래 상태로 하였지만 그래도 궁금했던 부분이 해결이 되니 마음은 편안해 지네요.

반응형

이 글을 공유하기

댓글

Designed by JB FACTORY