.navigation + .google-auto-placed .adsbygoogle {
margin: 0 auto !important;
}구글 애드센스 배너를 자동으로 설정하면,
블로그나 운영 사이트의 상단 메뉴바 혹은 헤더 바로 아래 배치됩니다.
배너 상단과 하단의 간격은 마진으로 10px입니다.
--- 헤더 (혹은 메뉴바) ---
10px의 공백, margin 10px
--- 애드센스 배너 ---
10px의 공백, margin 10px
이 형태인데 사이트 디자인에 상, 하단 공백을 없애고 싶을 경우 다음과 같은 CSS 코드를 추가합니다.
.google-auto-placed .adsbygoogle {
margin: 0 auto !important;
}
- 구글 애드센스 코드: 'google-auto-placed' parent 클래스 객체 안에 'adsbygoogle' child 클래스
- '!important'는 강제로 10px를 0으로 변경하기 위한 코드
이렇게 설정하면 페이지의 모든 구글 애드센스 배너의 상, 하단 간격이 0으로 변경됩니다.
이 상태에서 한 개의 배너에만 적용하고 싶을 경우 여러 가지 방법이 가능합니다. 여기서는 배너와 인접한 앞선 객체와의 관계를 이용합니다.
.navigation + .google-auto-placed .adsbygoogle-- 헤더, 클래스 navigation --
-- 애드센스 배너, 클래스 google-auto-placed
제 블로그의 구조가 이런 순서입니다. 사이트마다 구조가 다르겠죠. 수정하여 맞게 적용시켜야 합니다.
.navigation + .google-auto-placed .adsbygoogle {
margin: 0 auto !important;
}
그리고 블로그 페이지의 폭과 애드센스 배너의 폭을 일치시키려면 라인 하나를 추가합니다.
.navigation + .google-auto-placed .adsbygoogle {
margin: 0 auto !important;
max-width: 1080px !important;
}
이 코드는
navigation 클래스 객체와 인접한 구글 애드센스 배너에만 작동합니다. 나머지 애드센스 배너는 무시한다는 뜻입니다.
※ 구글 배너의 클래스 이름이 변경되면 그에 맞게 다시 수정해야 합니다.
※ 블로그(사이트)의 구조가 바뀌어도 마찬가지로 점검하고 필요하면 수정해야 합니다.
※ 현재 구글 애드센스에서 막아 놓은 코드
사용하여도 효과 없습니다.
- max-height
- height
댓글