애드센스 대형 광고단위 적용을 위한 부트스트랩 CSS수정
부트스트랩 기반의 스킨들에 적용할 수 있는 팁입니다.
(Fastboot, 마크쿼리스킨 등)
부트스트랩은 그리드시스템을 기반으로 하고있습니다.
간단히 말해서 화면을 세로로 12분할하여 상자를 표현합니다.
대부분의 부트스트랩 기반 블로그에서는 본문영역이 12중 9, 사이드바가 12중 3을 차지하고 있고, 가장 이상적인 비율입니다.
그러나 이 비율상에서는 최근 등장한 애드센스 대형광고들을 적용할 수 없습니다.
몇몇 이용자들은 본문영역을 8로 줄이고, 사이드바 영역을 4로 확장해 가로크기 300px짜리 대형광고를 적용하기도 합니다만, 본문영역이 줄어들면서 가독성이 줄어드는 단점이 있습니다.
이제부터 소개드릴 수정 방법은 가로 해상도가 1400px이상인 모니터가 대상입니다.
그리고 당연히 반응형 광고단위를 통해 구현할 것입니다.
가로 해상도 1400px미만인 기기에서는 이전과 크기가 같지만, 1400px이상에서는 container의 가로크기가 늘어나, 본문영역에 970px광고, 사이드바에 300px광고를 삽입할 수 있게됩니다.
부트스트랩 CSS 수정하기
부트스트랩을 그대로 적용중이라면 다음파일을 업로드합니다.
bootstrap.cssFastboot 이용자는 다음 파일을 업로드합니다.
혹은 부트스트랩 기반 CSS파일을 열어 다음과 같이 수정합니다.
(압축된 파일 기준으로 설명합니다. 엔터가 많은 일반버전도 동일하게 수정하시면됩니다.)
.container를 검색해 위치를 찾습니다.
@media(min-width:1200px 부분을 찾습니다.
1200px을 1400px로, 그 옆에 1170px을 1370px로 변경한 후 저장, 업로드합니다.
반응형 광고단위 작성하기
위 링크를 클릭해 반응형 고급코드 도우미를 이용합니다.
물론 직접 수정할 수 있으면 직접 수정하시면됩니다.
본문광고의 경우 다음과같이 설정합니다.
사이드바 광고의 경우 다음과 같이 수정합니다.
적용을 누르면 아랫칸에 완성된 코드가 나오니 복사해서 이용하시면 됩니다.
(본인의 상황에 맞게 수정해 사용하세요.
참고로 완성된 코드에서 width를 px단위가 아닌 100%로 설정하면 고급코드도 스마트크기조정 단위처럼 가로가 꽉차게 사용할 수 있습니다.)
