친효스킨 최상단 최하단 애드센스 세로 크기 100px 고정시키는 방법 (Ver 1.15)
친효스킨 커스터마이징 정보를 제공하는 카테고리 입니다. 먼저 안내드릴 부분이 있습니다. 본문에서 제공하는 방법이 최종적인 방법이 아닐 수 있습니다. 계속 수정하고 연구하여 더 좋은 방법이 차후에 제공될지도 모릅니다. 만약 새로운 업데이트 내용이 나온다면 본문에서도 안내해 드리도록 하겠습니다.
현재 친효스킨에는 최상단 및 최하단에 애드센스를 적용할 수 있도록 설계가 되어 있습니다. 이곳에는 가로로 긴 형태의 애드센스가 노출되도록 하는게 목적인데 특정 해상도에서는 지나치게 큰 광고가 출력되는 불편함이 있었습니다. 이 부분을 수정하는 코드를 만들었습니다. 이곳에서 드리는 설명은 친효스킨 1.14 버전을 기준으로 안내해 드리고 있습니다. 참고하시기 바랍니다.
HTML 수정
먼저 기존 친효스킨의 HTML 구조를 조금 바꿨습니다. 최상단 애드센스의 위치를 변경했습니다. 아래의 코드를 살펴봐 주시기 바랍니다.
<!-- 최상단 빈공간 시작 -->
<div id="topEmpty"></div>
<!-- 최상단 빈공간 끝 -->
<!-- 최상단 애드센스 시작 -->
수정된 애드센스 코드
<!-- 최상단 애드센스 끝 -->
<!-- 콘테이너: 사이드바+본문 시작 -->
<div id="container">
친효스킨 1.14 버전까지는 최상단 애드센스 코드가 원래는 <div id="container"> 바로 아래에 있었습니다. 위치를 위에 나와있는 것처럼 최상단 빈공간과 콘테이너가 시작되는 사이로 옮겼습니다. 이렇게 위치를 수정해 주시면 됩니다. 또한 애드센스 코드도 약간 수정을 했습니다. 오리지널 반응형 애드센스 코드에서 필요한 부분이 딱 두 가지 입니다. 먼저 아래를 봐주시기 바랍니다.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="●"
data-ad-slot="■"
data-ad-format="horizontal"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
오리지널 반응형 애드센스 코드의 상태 입니다. 여기에서 필요한 부분은 client 값과 slot 값 입니다. 위에 각각 검정 동그라미와 검정 네모로 표시해 둔 부분입니다. 이 두 개의 값을 아래의 새로운 애드센스 코드에 같은 위치에 붙여넣기를 해주시면 됩니다.
참고로 파란색으로 표시해둔 data-ad-format="horizontal" 부분은 원래는 horizontal이 아니고 auto 입니다. 애드센스의 광고 형태를 정하는 부분으로 horizontal은 수평 형태의 반응형 광고가, rectangle은 직사각형 형태가, vertical은 수직 형태의 광고를 출력하겠다는 의미 입니다.
<!-- 최상단 애드센스 시작 -->
<div id="topAdss">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block;" data-ad-client="●" data-ad-slot="■" data-ad-format="horizontal" data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<!-- 최상단 애드센스 끝 -->
각 값을 같은 기호로 표시했으니 같은 값을 그대로 붙여넣기를 해주시고 위의 코드를 전체 모두 복사하셔서 사용하시면 됩니다. 위의 코드를 첨부파일로 올려놓도록 하겠습니다. 최하단도 동일한 광고 코드 입니다. slot 번호만 바꿔서 사용하시면 됩니다.
친효스킨 최상단 최하단 애드센스 수정 코드 HTML (Ver 1.15).txt
최종적으로 이렇게 수정하시면 됩니다.
이 위치로 정확히 수정되었는지 다시 한 번 확인해 주시기 바랍니다. 최하단 또한 같은 방법으로 진행하시면 됩니다. 단 최하단의 경우는 위치 수정이 필요 없습니다.
CSS 수정
스타일 부분에서 수정이 있습니다. 먼저 아래의 부분을 찾아주시기 바랍니다.
CSS 부분에서 Ctrl + F를 눌러서 애드센스라고 검색하시고 이 부분을 찾아주시면 됩니다. 애드센스 관련 시작 부분부터 끝나는 부분까지 안의 내용을 모두 변경해야 합니다. 최종 수정 코드는 아래의 첨부파일을 다운로드 받으시고 사용하시면 됩니다. 참고로 현재 친효스킨은 1.15 버전까지 업로드가 완료 된 상태 입니다. 1.15를 사용 중 이시면 이 과정은 생략하셔도 됩니다.
친효스킨 최상단 최하단 애드센스 수정 코드 CSS (Ver 1.15).txt
이렇게 수정하시고 직접 브라우저와 스마트폰에서 자신의 블로그로 접속하시어 애드센스가 정상적으로 출력되는지 확인해 보시기 바랍니다. 또한 아래의 주석도 검색하여 찾아주시기 바랍니다. "최상단 최하단 애드센스" 라고 검색하시면 됩니다.
/* 최상단 최하단 애드센스 넣을 경우 : 0 입력 */
@media (min-width: 768px) {
#topEmpty,
#bottomEmpty {
height: 20px; /* 기본값: 20px */
}
}
여기에서 주황색으로 표시된 부분을 0으로 변경해 주시기 바랍니다. px 단위는 생략합니다. 그냥 숫자 0만 넣으세요. 끝.
"친절한효자손 취미생활" 을 검색!
