목차
일반 웹에서 블로그를 방문하면 사이드바 광고가 길게 나오는데요 .
이게 모바일에서도 그대로 길게 나오기 때문에 상당히 거슬립니다.
그래서 이번에 모바일에서만 안보이게 사이드바 광고를 지워 봤습니다. (웹에서는 그대로 광고 송출됨)
아래에서 광고가 삭제된 결과를 확인해 볼 수 있습니다.
1. 모바일 사이드바 광고 삭제 결과
위 이미지와 같이 모바일에서 사이드바 광고가 지워진 것을 확인할 수 있습니다.
해당 부분은 '코드 관리자'를 통해서 해당 부분 코드를 찾은 뒤에 '티스토리 html 편집창'에서 'CSS'를 수정해 주었습니다.
'코드 관리자'와 '티스토리 html 편집창' 사용 방법은 아래 남겨 놓겠습니다.
2. 모바일 사이드 광고 코드 이름 찾기
'F12 코드 관리자'창에서 위 버튼(이미지 참고)을 클릭하면 모바일 화면으로 확인 할 수 있습니다.
'F 12 코드 관리자'에서 '구글 애드센스 사이드바 광고' 부분을 지정하고 있는 이름을 찾아 봤습니다.
사이드바 광고의 지정 이름은 'module module_plugin'인 것을 확인할 수 있습니다. (이미지 참고)
그럼 이제 '티스토리 HTML 편집창'에서 해당 부분을 안보이게 하는 코드를 넣어 보겠습니다.
3. '티스토리 HTML 편집창'에 코드 적용하기
티스토리 모바일 화면을 지칭하는 코드는 따로 있습니다. 위와 같이 코드 앞에 '@media screen'이 지정되어 있고 '@media screen' 안에 있는 코드들을 수정하면 PC웹사이트에는 영향을 주지 않고 모바일에서만 변경됩니다.
이를 이용하여 사이드 광고를 없애 보겠습니다.
붙여 넣을 코드는 아래와 같습니다.
/*모바일 광고 끄기*/
@media screen and ( max-width: 767px ) { > 모바일에서만 변경될 수 있게 앞에 @media screen 지정
.module.module_plugin { display: none; } > 위에서 찾은 광고 코드를 display: none 코드로 안보이게 설정
}
위와 같이 'CSS 창'에 코드를 넣은 모습니다. 해당 코드의 위치는 아무 곳이나 붙여넣어도 상관 없습니다.
/*주석처리*/ << 주석처리를 통해서 나중에 알아 볼 수 있겠 끔만 표시해 두면 됩니다.
코드 추가 설명
'@media screen and (max-width: 767px)'
모바일에서만 사이드 광고를 없앨거기 때문에 앞에 모바일 코드를 지정해 줬습니다.
'Max-와이드' 값은 767px의 화면 안에만 표시한다는 코드입니다.
'.module.module_plugin { display: none;} '
그 다음 이전에 찾은 광고를 지정하고 있는 이름을 넣고 'display: none;' 코드로 보이지 않게 설정해 두었습니다.
댓글