친효스킨! 사이드바 애드센스 모바일 해상도에서 숨기기
친효스킨 모바일(스마트폰) 해상도에서 애드센스를 노출 안 되게, 그러니까 감추는 방법에 대해서 문의를 주셨습니다. 좀 더 깔끔하게 보이게 하기 위함과 로딩 속도를 조금이라도 올리는데 도움이 될 것 같기 때문 입니다. 이 문제를 해결하기 위해서는 사이드바에 애드센스 삽입 시, 약간의 HTML 코드 수정을 해야 합니다. 또한 CSS 반응형 미디어쿼리도 추가해야 합니다.
CSS 미디어쿼리 세팅
아래의 CSS 코드를 친효스킨의 CSS 항목에 빈 공간을 확보 후 추가합니다. 아래에 첨부파일도 있습니다.
div.rgy-sidebar-adss {
display: none;
}
@media (min-width: 1000px) {
div.rgy-sidebar-adss {
display: block;
}
}첨부파일을 열람하면 HTML과 CSS 둘 다 들어있는것을 확인할 수 있습니다. 먼저 본문 순서대로 CSS를 세팅해 주시기 바랍니다.
편의상 CSS의 맨 아래에 추가를 해 보았습니다. 다음은 HTML 사용 방법 입니다.
HTML 세팅
현재 친효스킨에서 사이드바에 광고를 게시할 때 순정 코드를 그대로 사용해서 편리하게 넣고 있습니다. 이 순정 애드센스 코드를 특정 <div> 태그로 감싸줘야 합니다. 방법은 아래와 같습니다.
<div class="rgy-sidebar-adss">
<!-- 이 주석을 지우고 애드센스 코드를 넣으세요 -->
</div>첨부파일에서 확인할 수 있듯, div 태그 사이에 있는 주석을 삭제한 후 그 자리에 순정 애드센스 코드를 삽입합니다. 그리고 코드 전체를 복사하여 자신의 티스토리 사이드바에 HTML 배너를 생성 후 그대로 붙여넣고 저장하시면 됩니다. 또는 기존에 적용된 사이드바의 애드센스 코드를 이 방법으로 수정 후 저장해서 사용해도 상관 없습니다. 이제 가로 1000px 이상의 해상도에서는 광고가 나오지만, 그 이하의 해상도에서는 사이드바 애드센스 광고나 나타나지 않는것을 확인할 수 있을 것 입니다. 참고로 친효스킨은 1000px 미만 해상도에서 사이드바가 본문 아래로 내려가도록 설계되어 있습니다. 그래서 1000px을 기준으로 보이게 하고 숨겨지게 만들었습니다. 끝.
