반응형이기에 스스로 화면의 크기에따라 조절이 됩니다
하지만 어디까지나 인공지능이기에 내가 원하는 크기를 출력해주진 않죠
그래서 나는 반응형 크기를 내맘대로 제어해볼까합니다
반응형 크기를 조절하려면 티스토리나 웹사이트에서 CSS로 조정을합니다
먼저 HTML로 들어가서
애드센스 코드에 추가해야할게 있습니다
뭔가 없습니다 그리고 추가된게 있죠
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 본문 상단 반응형 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-9134653606147405"
data-ad-slot="4762419173"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
이코드에서
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- C-TOP -->
<ins class="adsbygoogle C-TOP"
style="display:block"
data-ad-client="ca-pub-9134653606147405"
data-ad-slot="4762419173"
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
이렇게 바뀌었습니다
위코드를 보고 원하는 제목과 추가항목 그리고 지워야할 항목을 지우세요
/*애드센스 반응형 크기 조절*/
@media(min-width: 739px) {
.C-TOP { width: auto; height: 280px;}}
@media(max-width: 738px) {
.C-TOP { width: auto; height: 280px; padding:0 15px 0 15px;}}
이렇게 해주시면 됩니다
C-TOP에선 자신이 만든 코드 넣어주시면되고 높이값인 height도 조절하시면됩니다
파란색으로 표시한 내용은
(min-width: 739px)는 739px이상일때 보여주는 광고이고
(max-width: 738px)는 738px 아래일때 보여지는 광고입니다
그래서 작은화면일때는 작게 큰화면일때는 크게 적용이되는것입니다
작은화면일때 padding을 넣는 이유는 여백이 없으면 보기가 좀 그렇더라구요
padding은 상 하 위 아래 여백을 뜻합니다
적용법은 아래와 같습니다
첫 번째 숫자 상단
두번째 왼쪽
세번째 아래쪽
네번째 오른쪽
숫자가 0일때는 px를 안붙여도되지만 0 이상의 숫자가 들어갈경우 px를 붙여줘야 적용이됩니다