애드센스 반응형 광고, 코드 수정으로 크기변경

몇일 전 애드센스 최종승인을 받고 티스토리에 광고를 게재하기 시작했다. 광고를 어떻게 메인화면이며 사이드바에 넣어야 하는지 알지못하였다. 관련자료를 찾아보고 하나씩 광고를 넣어보고 수정해보고 최종적으로 현재의 화면으로 만들어냈다. 아직까지 만족스럽진않지만 조금씩 다듬어봐야겠다. 필자의 스킨은 반응형 스킨이다. 애드센스 광고도 여기에 맞춰서 반응형으로 바꿔주는게 주었다. 반응형 광고코드의 단점은 가로길이는 길지만 세로길이가 짧다. 필자의 블로그를 모바일로 접속하면 상단광고가 300x250으로 설정되어있다. 기존에는 300x100으로 설정이되어 눈에 잘 띄지않았지만, 지금은 코드변환으로 광고의 크기를 조정하여 눈에 확 띄게 바뀌었다. 오늘은 이렇게 코드 변환하는 방법에 대해 설명하고자한다. 

# 글과 사진에 대한 저작권은 지니군의 Daily Life에 있으며, 이미지는 직접 편집하여 사용하는것과 관련사이트 및 무료 배포사이트를 이용함을 알려드립니다. -- copyright(c)지니군.#

애드센스 반응형 광고, 코드 수정하기

우선 애드센스에 접속하여 광고코드를 하나 생성한다. 미리 만들어 둔 광고가 있다면 굳이 새로 만들 필요는 없다. [내광고 - 광고단위]에 접속하여 만들어진 광고 중에 아직 배치하지 않은 광고하나를 선택하여 코드 가져오기를 한다.

코드 가져오기를 하면 광고 코드 팝업창이 뜨고, 소스코드가 보인다. 이 부분을 복사하여 메모장에 붙여놓은 뒤 다음 사이트를 클릭하여 이동하자.

"뭐하라"님의 반응형 고급코드 생성사이트 이동하기 ---->>> CLICK

위 CLICK글자를 클릭하면 코드변환 사이트로 이동을 한다. 어느 실력좋으신 분이 만든 광고코드 변환 사이트이다. 필자와 같이 HTML/CSS 코드에 대해 잘 모르는 사람에겐 꼭 필요한 사이트이다. 제작자님께 진심 감사하다는 말씀을 드리고 싶다.

메인화면은 이렇게 나온다. 혹, 찝찝하다면 "더 자세한 설명은 여기에서 확인해보세요"라는 글귀에서 여기를 클릭하면 제작자님의 블로그로 이동하니 참고바란다.

코드변환 방법은 그리 어렵지않다. [붙이기와 수치만 입력]하면 된다. 복사해 두었던 애드센스 광고코드를 코드 삽입란에 붙여넣기를 한다. 

설정에서 광고이름은 자동으로 생성된 이름을 사용해도 되지만, 본인이 원하는 이름으로 설정하여도 된다. 다만 띄어쓰기 없이 영문과 숫자조합으로 작성하되 한글,특수문자는 사용하면 안된다. 기본크기는 기본이되는 크기를 말한다. 모바일 기준으로 설정해두는게 좋겠다.(모바일은 300x250크기이다)그리고 그 아래 조건부 설정이 가능하다. 가로 픽셀이 얼마이상일때 크기가 자동으로 변경되어 출력하게 된다. 만약 조건설정을 따로 하지않을 경우 기본크기로 출력이 된다.

[우측 물음표 아이콘]을 클릭하면 기본크기에 대한 설명이 있으니 참고바란다. 설정이 다되었다면 아래 체크표시를 클릭하여 적용한다. 새로운 코드가 생성이 되었다.

이제 새롭게 생성된 코드를 이용하여 자신의 블로그에 광고를 게재한다. 코드를 복사한 뒤 티스토리로 이동한다. [관리자-플러그인-플러그인설정] GoogleAdsense(반응형) 설정에 들어가서 원하는 광고타입을 선택하고 조금전 복사해둔 코드를 넣는다.

저장하고 메인으로 돌아가서 광고크기가 제대로 수정이 되었는지 확인한다. 만약 제대로 설정이 되지않았다면, 수치값 입력을 다시 확인해본다. 광고코드 수정하여 자신의 블로그에 맞게끔 배치를 잘하길 바란다. 이상, 긴글 읽어줘서 감사하다.