구글 애드센스 광고 노란색 배경 제거 2가지 방법

애드센스 노란색 배경

구글 애드센스를 승인받고 처음으로 광고를 달았는데 광고 배경이 노란색으로 나왔던 경험있으시죠?

티스토리 블로그에서는 많이 보지 못했는데, 대부분 워드프레스나 다른 플랫폼을 이용한 사이트에서 많이 발견했습니다. 제 워드프레스 사이트도 초반에 겪었던 문제이기도 하구요.

로딩이 늦게 되어 배경색이 먼저 보이거나 사이즈가 제대로 맞지 않아 여백 부분이 노란색으로 표시됩니다. 자신의 블로그 배경은 노란색이 아닌 다른 색이기 때문에 굉장히 눈에 거슬립니다.

이번 글에서는 이 구글 애드센스 광고 노란색 배경을 어떻게 제거하는지, 또는 어떻게 다른 색으로 변경하는지 알아보겠습니다.

 

코드에서 직접 삽입

구글 애드센스 - 개요 - 광고 단위 기준 - 기존 광고 단위에서 새로 생성하거나 생성된 광고 코드 하나를 가져옵니다. 그리고 가운데 style 부분에 아래 한 줄을 추가합니다.

background:transparent

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 상하이삼촌 예제 -->
<ins class="adsbygoogle"
     style="display:block; background:transparent"
     data-ad-client="ca-pub-88888"
     data-ad-slot="88888"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

먼저 background 앞에 꼭 세미콜론 ; 을 붙여주세요. transparent 는 투명하다는 뜻입니다. 즉 background 백그라운드를 투명으로 설정하겠다는 뜻입니다.

이렇게 설정된 코드를 애드센스 삽입하는 플러그인에 저장해 사용하시거나, 본문 중간에 적용하고 싶으시면 서식 기능을 이용해 코드를 미리 저장하여 불러오는 식으로 편하게 사용하시면 됩니다.

 

CSS 코드 추가

티스토리는 스킨 편집 - html 편집 - CSS

워드프레스는 대시보드 - 테마 디자인 - 사용자 정의하기 - 추가 CSS 에서 코드를 삽입할 수 있습니다.

.adsbygoogle { background:transparent; }

---

transparent 자리에 #fff 와 같이 다른 컬러로 지정할 수 있습니다만, 투명으로 설정하는 것을 권장드립니다. 스킨을 변경하거나, 블로그에 다른 색상을 입히고 싶을때 애드센스 배경이 투명이 아닌 다른 컬러로 지정이 되어 있으면 코드를 또 수정해야하는 번거로움을 피하기 위함입니다.

 

도움되는 글

[IT 정보/구글 애드센스 팁] - 6번 합격, 티스토리 애드센스 승인 방법 참과 거짓

6번 합격, 티스토리 애드센스 승인 방법 참과 거짓

[IT 정보/블로그 팁] - 티스토리와 워드프레스, 직접 운영 장단점 비교

티스토리와 워드프레스, 직접 운영 장단점 비교