고래스킨을 쓰다 보면 티스토리에 존재하는 애드센스 설정이 아닌 수동광고를 넣어야 할 때가 존재합니다.
이는 블로그 로딩 속도 측면에서도 그렇고, 930px~1235px에서의 반응형 광고는 무조건 네모 형식으로 나오기 때문입니다. 이건 html에 광고 코드를 넣어줌으로써 해결할 수 있습니다.
그리고 이걸 하다 보면 고래스킨의 경우 사이드바가 930px~1235px에서 본문 글과 겹치는 걸 발견할 수 있습니다. 이에 대한 해결방법은 @media only screen and ()와 관련된 CSS 코드를 조금만 고쳐주면 사이드바와 본문 글을 겹치지 않게 설정할 수 있습니다.
따라서 오늘은 고래스킨에서 애드센스를 사이드바에 넣는 방법과, 사이드바가 본문 글과 겹치지 않게 하는 방법에 대해서 설명해보겠습니다.
사이드바 관련 광고를 설정하는 방법 및 이유
고래스킨의 경우 광고 영역이라고 해서 사이드바에 직접 광고 element를 넣었다 뺄 수 있는 기능이 있습니다.
일반적으로 티스토리에 존재하는 광고 설정으로 설정할 수도 있지만, 직접 광고를 넣게 된다면 중복되는 코드를 없애서 속도가 더욱 빨라지게 되는 이점이 존재합니다.
그 이유는 다음과 같습니다.
애드센스에서 수동광고를 쓰는 이유
일반적으로 구글 애드센스를 승인받아 광고 송출이 가능한 상태라면 아래와 같은 코드가 블로그 html의 <head>와 </head> 사이에 넣어집니다.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?
client=ca-pub- " crossorigin="anonymous"></script>
그런데 수동으로 디스플레이 광고나 자동광고를 넣을 때 보면, 어떤 광고를 불러오는 코드는 다음과 같습니다.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client="ca-pub-"
crossorigin="anonymous"></script>
<!-- 상단 고정 광고 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub- "
data-ad-slot=" "
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
보시다시피 두 개의 코드를 비교해 보면 최상단에 위치한 코드가 중복되는 것을 보실 수 있습니다.
제가 다른 글에서 말씀드렸다시피, html의 원리는 위에서 아래로 차례로 읽게 되는 인터프리터 언어입니다.
만약 중복되는 코드가 있다면 그 코드를 건너뛰는 것이 아니라, 광고 데이터를 불러오는 코드를 또 한 번 읽게 되어 시간이 지체되고, 메모리 공간마저도 차지하게 됩니다.
따라서 만약 광고를 직접 설정할 수 있는 역량이 존재한다면, 가급적 광고를 직접 설정하여 조금이라도 블로그의 속도를 빠르게 하는 것이 마케팅 측면에서도 좋습니다.
티스토리에서 사이드바에 애드센스를 넣는 방법
북클럽 스킨 기준의 설명은 많으므로 여기서는 고래 스킨을 기준으로 설명하겠습니다. 하지만 원리는 둘 다 동일하다는 점을 안다면 전부 적용할 수 있습니다.
고래스킨의 경우 사이드바에 구글 광고를 넣었다 뺄 수 있는 기능이 자체적으로 존재합니다. 따라서 사이드바에 구글 광고를 넣는다면 s_sidebar_element가 html에서 생기게 됩니다.
여기서 자신의 디스플레이 광고 코드를 불러와서, 위의 예시처럼 <ins> </ins> 코드와 <script> </script> 안쪽에 있는 코드만 붙여 넣으면 됩니다.
이는 앞서 설명했듯이 중복되는 코드를 없애서 더욱 속도를 높이기 위함입니다.
애드센스 광고 코드 가져오는 방법
애드센스 광고 코드를 가져오기 위해서는 먼저 애드센스 홈페이지에서 광고 > 광고 단위 기준으로 들어가야 합니다.
그 후에 디스플레이 광고를 눌러 자신이 원하는 형태의 광고를 선택하면 됩니다. 여기서 저는 사이드바를 수직형태로 하는 반응형 광고를 만들어 코드를 불러왔습니다.
그 후에는 위에서 언급한 바와 같이 해당 위치에 코드를 복사-붙여 넣기 해주면 간편하게 설정이 끝납니다.
사이드바와 본문 글이 겹치지 않게 만드는 방법
이 방법을 적용하는 경우는 위의 설정을 모두 이행했거나 혹은 사이드바 광고 설정을 따로 해두셨을 때 고래스킨에서만 일어나는 일이므로, 북클럽을 쓰시는 분들께서는 신경 쓰지 않으셔도 됩니다.
고래스킨의 경우 930px~1235px에서 광고 영역을 카테고리 사이에 넣었을 때 무조건 사이드바와 본문 글이 겹치게 됩니다.
이를 해결하기 위해서는 CSS에서 @media의 설정을 건드려 줘야 합니다.
@media only screen and (max-width: 1235px) {
nav div {
width: 100%!important
}
#container {
width: 95%!important
}
}
위의 코드는 max-width가 1235px 일 때, 즉, 1236 이상에서 1235 쪽으로 줄어들거나 그 반대의 경우일 때 동작하게 만드는 코드입니다.
원래라면 @media only screen and (max-width: 930px) {} 지만, 930픽셀을 1235 픽셀로 바꾸어 적용되는 영역을 넓혀준 것입니다.
사각형 광고를 만들어주는 이유는 container가 100%로 되어 있어서 좁은 영역에 대한 반응형 광고를 만들어내는 것이므로 container의 width를 100%에서 위의 코드처럼 95%로 만들어주면 됩니다.
그런데 만약 위의 코드만 적용한다면 블로그의 타이틀을 나타내는 부분이 엉망진창이 되는 걸 확인하실 수 있습니다.
따라서 아래의 코드도 찾아 같이 적용해주어야 합니다.
@media only screen and (min-width: 930px) {
#main {
display:flex
}
.h-entry {
max-width: 900px;
width: auto !important;
max-height: unset;
padding: 10px !important;
}
}고래스킨의. h-entry 함수로 헤드를 고정해 줍니다.
여기서 중요한 부분은 width로 auto로 설정해 주었기 때문에 이는 본문 글과 사이드바가 겹치지 않게 만들어 줍니다.
이렇게 모든 코드를 적용하고 나면, 930px~1235px에서도 사이드바가 본문 글과 겹치지 않게 되는 것을 볼 수 있습니다.
본 글을 참고하셔서 사이드바에 애드센스 광고를 설정하는 방법과 사이드바를 겹치지 않게 하는 방법을 알아가셨으면 좋겠습니다.
<함께 읽으면 좋은 글>
티스토리 블로그 속도 최적화를 위한 폰트 로드 수정 방법과 그 이유
고래스킨 4.1 제목 설명 텍스트 제거 방법 및 CSS 수정 팁
