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;
}
댓글