아재의 시선
반응형 스킨 애드센스 설정 팁 본문
블로그 스킨을 리디즈님의 Fastboot 1.6.1로 교체하면서 몇가지 수정을 거쳤다. life in mono 스킨을 쓰다가 비슷한 형태의 상단바가 있는 반응형 fastboot으로 이사를 했는데 블로그 http://blog.readiz.com/ 에서 얘기하시는 것 처럼 적용하기 쉬운 점이 훌륭. 하지만 그대로 적용하면 블로그들이 너무 천편일률적인 모습으로 남기에 몇가지 커스텀을 거쳤다.
앞으로 스킨이 버전업되면 좀더 손쉬운 교체를 위해 기본 스킨에서 추가한 커스텀과 애드센스 설정 및 팁들을 저장해두고자 한다. 가장 먼저 애드센스와 관련된 부분들을 위주로 정리하고 나머지 부분은 다음 포스팅에 기재한다.
목차
1. 애드센스 관련
1) 사이드바 애드센스
(1) 300x600 스카이 스크래퍼를 사용하는 경우
(2) 사이드바 애드센스 모듈 추가
2) 본문 애드센스
(1) 본문 우측 상단 애드센스
(2) 본문 중간 애드센스
(3) 본문 좌측 하단 애드센스
1. 애드센스 관련
Fastboot는 제작자인 리디즈Readiz님이 블로그에 설명해 놓은 애드센스 관련 설정&팁이 상당히 좋다. 특히 웹브라우저의 크기 변화에 따른 애드센스의 위치변화와 크기변화는 탁월하다. 자세한 사항은 링크해둔 리디즈님의 블로그에서 참조하시고 여기서는 요약, 설정의 저장과 몇가지 팁을 적어둔다. 덧붙여 수정하면서 html에 <!-- 사이드바 크기 비율--> 이런식으로 메모를 남기면 추후 검색해서 수정하기가 편리하다.
1) 사이드바 애드센스
(1) 300x600 스카이 스크래퍼를 사용하는 경우
보통 사이드바에 애드센스를 사용하는 경우 300x600을 사용하는가와 아닌가로 나뉜다. 200x600이라던가 160x600의 크기는 원 설정대로 적용하면 되지만 가로300의 경우는 사이드바를 늘려야 한다.
http://blog.readiz.com/176#.Vhk6B-ztmko
사이드바와 본문 크기/위치 조절하기 (Bootstrap 기반 스킨)
팁으로는 col-md-9 과 col-md-3를 검색해서 <div id="leftContent" class="col-md-9"> 와 <div id="sidebar" class="sidebar col-md-3">를 찾아 leftcontent와 sidebar의 비율을 8과 4로 조절하면 쉽다.
(2) 사이드바 애드센스 모듈 추가
기본 Fastboot 스킨에는 애드센스용 모듈이 추가되 있지 않기때문에 따로 추가를 해주어야한다. 리디즈님의 반반응형(半반응형)이라는 코드를 사용하는것을 추천. 브라우져의 창 크기를 조절함에 따라 사이드바가 하단으로 이동하는 특징을 보여준다.
http://blog.readiz.com/232#.Vhk5XOztmko
사이드바 구글 애드센스 예제소스
① 기본 코드만으로는 애드센스가 모듈에 딱붙어서 출력되기 때문에 사이드바 애드센스의 여백 조절을 위해 <div style="float:center; margin:20px 0px 10px 0px"> 의 형태를 추가해서 여백을 조절가능하다. margin 이후 나오는 수치는 상, 우, 하, 좌의 순서로 여백이 조절된다.
② 스크립트를 닫는 코드인 </script>는 <\/script>로 바꿔서 넣어줘야한다. 중요!
③ write(' 이후 삽입되는 코드는 한줄로 만들어야 하는데 백스페이스키로 공간을 줄이면서 코드가 갈색 글씨색으로 바뀌는걸 보면 된다.
④ 광고를 바꾸는 경우 보통 하단에 굵게 표시된 width: px과 height: px, 숫자들 부분을 자신의 애드센스 코드에서 가져다 그 부분만 수정하면 편하다. 그래도 script async src 부분도 다른게 있는지 한번 확인해보면 좋다.
⑤ 아이콘 수정을 할 수 있는데 https://fortawesome.github.io/Font-Awesome/icons/ 에서 선택해서 사용시 변경이 되는 경우도 있고 빈 공간으로 나타날때도 있다. 이유는 ??.
<300*600 스카이스크래퍼의 경우>
<s_sidebar_element>
<script>
if(window.getWindowCleintWidth()<1550 && window.getWindowCleintWidth()>=992){
document.write('<div class="panel panel-default"><h4 class="panel-heading"><i class="fa fa-camera-retro""></i></i> Adsense</h4><div class="panel-body" style="text-align:center;"><div style="float:center; margin:20px 0px 10px 0px"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><!-- 사이드바 300*600 --><ins class="adsbygoogle"style="display:inline-block;width:300px;height:600px"data-ad-client="ca-pub-숫자들"data-ad-slot="숫자들"></ins></div></div></div>');
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>
</s_sidebar_element>
2) 본문 애드센스
리디즈님의 애드센스 팁이 뛰어난 것은 데스크탑과 모바일에서 반응형 광고단위를 사용하지 않고도 자유자재로 원하는 광고를 출력할 수 있다는 것이다. 보통 반응형 광고단위를 사용하면 모바일 상단에서는 320x50가 나타나는데 반반응형 코드를 사용하면 320x100 등의 광고를 원하는대로 설정할 수 있다.
뿐만아니라 보통 본문 하단부 카테고리의 다른글 위에 애드센스를 설정하는 경우 일일히 코드를 넣어줘야 했던 반면 리디즈님의 코드는 창 크기에 따라 자동적으로 카테고리의 다른글 위로 이동한다. 크으. 좋다 좋아.
(1) 본문 우측 상단 애드센스
데스크탑과 모바일에서 다른 크기의 애드센스가 출력되도록 설정할 수 있다. 화면크기에 따라 더욱 세부적인 세팅도 가능하다. 화면이 줄어드는 경우 광고가 자동적으로 움직인다.
http://blog.readiz.com/204#.VhlKNOztmko
반응형 애드센스 안쓰고 원하는 애드센스 노출시키기
데스크탑에서는 336x280, 모바일에서는 320x100크기의 애드센스가 출력되도록 설정해 보았다.
① 반응형이 아니기 때문에 여백설정을 자유롭게 할 수 있는데 <div style="float:right; margin:20px 50px 10px 20px"> 식의 코드로 가능하다. 역시나 상우하좌의 순서. class style에서도 가능하다.
② write 안에는 항상 스크립트를 닫는 코드인 </script>는 <\/script>로 바꿔서 넣어줘야한다. 중요!
③ 아래에는 모바일 애드센스의 하단 10px 여백이 들어가있다. margin:auto;margin-bottom:10px 이부분
<div style="float:right; margin:20px 50px 10px 20px">
<!-- 데탑용 상단 -->
<script>
if(window.getWindowCleintWidth()>=768){
document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><!-- 큰사각형 상단 336*280 --><ins class="adsbygoogle"style="display:inline-block;width:336px;height:280px"data-ad-client="ca-pub-숫자들"data-ad-slot="숫자들"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>
</div>
<div style="text-align:center;width:100%;">
<!-- 모바일 상단 -->
<script>
if(window.getWindowCleintWidth()<768){
document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><!-- 모바일배너 320*100 --><ins class="adsbygoogle"style="display:inline-block;width:320px;height:100px;margin:auto;margin-bottom:10px;"data-ad-client="ca-pub-숫자들"data-ad-slot="숫자들"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>
</div>
(2) 본문 중간 애드센스
본문 중간에 애드센스를 삽입하는 방법에 대해서는 사이드바에 애드센스가 있는경우, 모바일에서만 본문에 출력되야하는 미묘한 문제가 생긴다. 구글 애드센스 규정에 따라 한페이지에는 3개의 광고단위까지 허용되기 때문이다. 따라서 사이드바를 없애지 않고 모바일에서만 출력되기 위해서는 몇가지 응용이 필요하다. 이 경우 규정상 문제가 발생할 경우에는 그냥 스킨에서 지워버리면 되기 때문에 편리하다. 뭐하라님과 리디즈님 방식의 혼합형.
관리가 편한 티스토리 본문 중간 광고 삽입법
모바일의 기준이되는 769px 이하의 경우 300x250의 애드센스가 출력되도록 수정해보았다. 스킨 html의 /body 안에 코드를 넣고 본문안에는 서식으로 만들어둔 .<div id="adhere"></div>을 사용하여 편하게 추가시킬수 있다.
<!-- 본문으로 이동할 광고 -->
<div id="movead" style="width:100%;text-align:center;">
<script>
if(window.getWindowCleintWidth()<768){
document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><!-- 모바일 중형 직사각형 300*250 --><ins class="adsbygoogle"style="display:inline-block;width:300px;height:250px;margin:auto;margin-bottom:10px;"data-ad-client="ca-pub-애드센스숫자"data-ad-slot="애드센스숫자"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>
</div>
<!-- 본문으로 광고 옮기기 -->
<script type="text/javascript">
function adLocate() {
if($("#adhere").length=="1"){
$("#adhere").append($("#movead"))
} else{
$("#movead").remove()
};
}
$('document').ready(adLocate());
</script>
(3) 본문 좌측 하단 애드센스
하나하나 코드를 삽입하면서 끼워넣었던 하단부의 애드센스를 다 갈아치워도 된다. 큰화면에서는 카테고리의 다른글 보기 좌측에 나타나고 화면이 줄어들면 다른글 보기 상단으로 올라간다.
http://blog.readiz.com/206#.VhlOlOztmko
본문 하단 다른글 보기 좌측에 애드센스 넣는 법
따로 본문 사이사이에 애드센스를 넣는 수고를 하지 않는 이상 이 방법이 최고인 것 같다.
데탑에서는 336x280 크기가 모바일에서는 300x250 크기의 애드센스가 출력되도록 만들어 보았다.
<!-- 데탑용 하단 -->
<script>
if(window.getWindowCleintWidth()>=768){
var adTmp = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><!-- 큰사각형 하단 336*280 --><ins class="adsbygoogle"style="display:inline-block;width:336px;height:280px"data-ad-client="ca-pub-숫자들"data-ad-slot="숫자들"></ins>';
document.getElementsByClassName('another_category')[0].className+=" col-md-6";
document.getElementsByClassName('another_category')[0].style.clear="none";
document.getElementsByClassName('another_category')[0].outerHTML='<div style="margin:0 auto;"><div class="col-md-6" style="margin-top:20px; padding:0; text-align:center;">'+adTmp+'</div>'+document.getElementsByClassName('another_category')[0].outerHTML+'<div class="clearfix"></div></div>';
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>
</div>
<div style="text-align:center;width:100%;">
<!-- 모바일 하단 -->
<script>
if(!rssLogFlag&&window.getWindowCleintWidth()<768){
var adTmp = '<div style="text-align:center;width:100%;overflow:hidden;"><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px;margin:auto" data-ad-client="ca-pub-숫자들" data-ad-slot="숫자들"></ins></div>';
document.getElementsByClassName('entry-ccl')[0].outerHTML = adTmp + document.getElementsByClassName('entry-ccl')[0].outerHTML;
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>
</div>
http://nacancel.tistory.com/51
Fastboot 1.6.1 애드센스와 커스텀 설정 팁1
http://nacancel.tistory.com/52
Fastboot 1.6.1 애드센스와 커스텀 설정 팁2
