Google Adsense, Kakao Adfit 사이드바의 위아래 margin 삭제

카카오와 구글의 광고 Adsense, AdFit 로고 이미지

 

1. 본문과 사이드바에 모두 적용

.google-auto-placed,
.revenue_unit_wrap {
	width: 100%;
	max-width: 1080px;
	margin: 40px auto !important;
	}


2. PC 접속 페이지의 사이드바에 적용

:not(.mobile-menu) #aside .google-auto-placed,
:not(.mobile-menu) #aside .google-auto-placed ins,
:not(.mobile-menu) #aside .revenue_unit_wrap {
	margin: 20px auto !important;
	}

 

2021.10.30 "2. PC 접속 페이지의 사이드바에 적용" 수정 구글의 배너 설정이 약간 변경되었습니다. 위의 코드는 상하 스크롤바가 생기는 오류가 발생합니다. 내부 컨테이너 ".google-auto-placed ins"의 마진을 0으로 초기화 하고, 외부 컨테이너의 마진으로 전체 배너의 외부 공간을 조정하는 방법으로 해결하였습니다. 아래의 코드를 자신의 블로그에 맞게 활용하세요.

 

2. PC 접속 페이지의 사이드바에 적용 수정
(2021.10.30)

:not(.mobile-menu) #aside .google-auto-placed ins {
	margin: 0 auto !important;
 }
:not(.mobile-menu) #aside .google-auto-placed,
:not(.mobile-menu) #aside .revenue_unit_wrap {
	margin: 20px auto !important;
}

 

2021.11.01 - PC 접속 첫 페이지 상단 배너 - PC 접속 페이지 사이드바 상단 배너 - 모바일 접속 페이지 상단 배너 - 기타 페이지 4가지 유형에 맞게 다시 코드를 수정하였습니다.

 

구글 내부 배너 박스를 본문 폭에 맞게 설정
.google-auto-placed ins {
	max-width: 1080px;
	}

구글과 카카오 배너 외부 박스의 상단과 하단 마진 폭을 30픽셀로 설정
.google-auto-placed,
.revenue_unit_wrap {
	width: 100%;
	margin: 30px auto !important;
	overflow-x: hidden;
	}

본문 상단과 사이드바 상단에 배치된 배너의 상하 마진 폭을 0으로 설정
#header + .google-auto-placed,
#header + .revenue_unit_wrap,
#aside .sidebar-1 .revenue_unit_wrap {
	margin: 0 auto !important;
	}

모바일 접속 페이지 상단의 내부 박스 상하 마진 폭을 0으로 설정
@media screen and (max-width:840px) {
	#header + .google-auto-placed ins {
		margin: 0 auto !important;
		}

---

PC 접속자의, 

사이드바("#aside")에 나타나는 배너 광고의 상단과 하단 마진(margin)을 사용자 페이지에 맞게 설정하는 방법 공유합니다. CSS 코드로 설정하는 것입니다. 북클럽 스킨의 경우 'style.css'에서 지정합니다.

 

※ 인터넷 검색해 보면 이 방법 외에도 다른 좋은 방법이 많이 있습니다. 필요하다고 생각되면 자신의 블로그에 적용해 보세요.

 

적용하는 사용자 환경은, 

- 티스토리 블로그

- 북클럽 스킨

- 반응형 스킨의 PC 접속 페이지

- 사이드바('#aside')

- 구글 Adsense 광고

- Kakao AdFit 광고

※ 사용자 환경이 다를 경우 그에 맞게 변경이 필요합니다.

 

:not(.mobile-menu) #aside .google-auto-placed,
:not(.mobile-menu) #aside .google-auto-placed ins,
:not(.mobile-menu) #aside .revenue_unit_wrap {
	margin: 0 auto !important;
	}

 

코드를 간략하게 설명하면, 

 

모바일 접속 페이지의 사이드바가 아닌 경우, 

:not(.mobile-menu)

※ 북클럽 스킨의 경우, 모바일 접속 페이지의 사이드바를 실행하면 'body' 태그에 'mobile-menu' class가 추가됩니다.

 

사이드바 구역의

#aside

 

구글 애드센스 클래스와

.google-auto-placed (구글 외부 컨테이너)

 

구글 애드센스 클래스의 ins 태그와 

.google-auto-placed ins (구글 내부 컨테이너)

 

카카오 애드핏(애드센스 포함) 클래스의

.revenue_unit_wrap

 

상단과 하단의 마진은 0으로 제거하고, 

좌우의 마진은 auto로 설정하는 것입니다.

 

이렇게 설정하면 배너 광고의 위, 아래 폭이 지나치게 넓어져서 문단의 간격이 불규칙하게 되는 것을 막을 수 있습니다. 대신 그 사이의 콘텐츠의 위, 아래 폭을 환경에 맞게 설정하여 맞춰 줍니다.

 

2021.11.04 블로그 사용 코드

 

사이드바의 디자인 변경으로 인하여 배너 간격 설정이 불필요하여 해당 코드(":not")는 삭제하였습니다.

 

/* 구글 배너 내부 박스 크기 */ 
.google-auto-placed ins {
	margin: 0 auto !important;
	max-width: 1080px;
	}
 
 /* 구글, 카카오 배너 외부 박스 크기 */
.google-auto-placed,
.revenue_unit_wrap {
	width: 100%;
	margin: 30px auto !important;
	overflow-x: hidden;
	}
 
 /* 헤더 하단 배너와 사이드바 배너 크기 */
#header + .google-auto-placed,
#header + .revenue_unit_wrap,
#aside .google-auto-placed,
#aside .revenue_unit_wrap {
	margin: 0 auto !important;
	}

 

2021.11.05 블로그 사용 코드

 

목록 본문('#container')과 하단 바('#footer') 사이에 끼워 넣은 배너 위와 아래 마진 0 설정

 

.google-auto-placed ins {
	margin: 0 auto !important;
	max-width: 1080px;
	}
.google-auto-placed,
.revenue_unit_wrap {
	width: 100%;
	margin: 30px auto !important;
	overflow-x: hidden;
	background-color: #f7f7f7;
	}
#header + .google-auto-placed,
#header + .revenue_unit_wrap,
#container + .google-auto-placed,
#container + .revenue_unit_wrap,
#aside .google-auto-placed,
#aside .revenue_unit_wrap {
	margin: 0 auto !important;
	}

 

2021.12.08 블로그 사용 코드

 

구글 코드 변경으로 인하여 '.google-auto-placed ins' 설정 불필요하여 삭제

구글 애드센스 배너의 폭 '1120px'로 변경

 

.google-auto-placed,
.revenue_unit_wrap {
	max-width: 1120px;
	background-color: #f1f1f1;
	overflow-x: hidden;
	}

#wrap .google-auto-placed:first-child,
#header + .revenue_unit_wrap,
#container + .google-auto-placed,
#container + .revenue_unit_wrap {
	margin: 10px auto !important;
	}

 

2022.01.03 블로그 사용 코드

 

배너 광고를 본문 안으로 이동하여 최대폭 728픽셀 설정

사이드바 배너의 위와 아래 마진 0으로 설정

 

.google-auto-placed,
.revenue_unit_wrap {
	max-width: 728px;
	overflow-x: hidden;
	}
#header + .google-auto-placed,
#header + .revenue_unit_wrap,
#container .google-auto-placed:first-child,
#container + .revenue_unit_wrap,
#aside .google-auto-placed,
#aside .revenue_unit_wrap {
	margin: 0 auto !important;
	}