[카카오 에드핏] 반응형 스킨 설치 스크립트

지금 블로그가 모바일 웹 환경에서 티스토리 기본 스킨을 안쓰고있어서 배너 광고가 반응형이 안먹는다.

현재 width에 따라 다른 광고가 로딩되는 스크립트를 작성했다.

• width 768 이상이면 가로 728, 그 이하면 가로 300 크기의 광고가 노출된다.
• 가운데 정렬, 위쪽 여백 20px 적용

	<script>
	document.write('<div style="text-align: center; margin-top: 20px;">');
	if (window.matchMedia('( min-width: 768px )').matches === true) {
	document.write('<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "DAN-rkzmjd4usdv8" data-ad-width = "160" data-ad-height = "600"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>');
	}
	document.write('</div>');
	</script>

view raw sidebar-ad.html hosted with ❤ by GitHub

	<script>
	document.write('<div style="text-align: center; margin-top: 20px;">');
	if (window.matchMedia('( min-width: 768px )').matches === true) {
	document.write('<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "코드 입력" data-ad-width = "728" data-ad-height = "90"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>');
	} else {
	document.write('<ins class="kakao_ad_area" style="display:none;" data-ad-unit = "코드 입력" data-ad-width = "300" data-ad-height = "250"></ins><script type="text/javascript" src="//t1.daumcdn.net/adfit/static/ad.min.js" async><\/script>');
	}
	document.write('</div>');
	</script>

view raw tistory-ad.html hosted with ❤ by GitHub

적용하기

• 적용하려면 설정 - 플러그인 - 다음 에드핏에 들어가서, 스크립트를 삽입하는 칸에 붙여넣기 하면 된다.

 

속성 변경하기

• 만약 배너 광고의 여백, 테두리, 정렬 방식 등을 수정하고 싶다면, 두번째 줄에 들어가는 <div style="text-align: center; margin-top: 20px;"> 이 부분을 수정하면 된다. 살펴 보면 text-align은 정렬 방향, margin-top은 상단 여백을 설정하는 속성이다.
• 속성 이름: 적용할 값; 형식으로 < > 안에 나열하면 스타일이 바뀌는 것인데, 본인에게 필요한 속성을 찾고 싶다면 이 링크에서 찾아보면 된다.
• 속성 변경이 필요 없다면 2, 8번 line은 지워도 무방하다.