애드센스 광고 수입 높이기 최적화 : 티스토리 스킨 가로 폭 줄이기

이번에는 애드센스 승인 후에 광고 수입을 조금이라도 더 높이기 위한 방법으로 고민했던 부분을 적용합니다. 아직 검증된 것은 아니라서 전체적으로 광고의 크기가 줄어들기 때문에 오히려 수입이 줄어들 수도 있습니다. 다만, 세로 광고의 폭이 너무 넓어서 전체적으로 게시물을 보는데 불편함이 많다는 생각이 들어서 전체적인 레이아웃을 수정하던 중에 발견한 방법입니다.

제목이 조금 잘못 표현되었을 수도 있겠네요. 정확히 말하자면 애드센스 광고 크기 최적화입니다. 블로그 전체 폭을 수정하는 경우 구글에서 새롭게 서비스를 개편한 좌우측에 날개 배너가 잘 나오게 됩니다. 구글 애드센스에서는 이것을 레일 광고라고 부릅니다.

---

일단 티스토리 스킨의 전체적인 레이아웃을 1080에서 980으로 줄입니다. 관리자모드 스킨 편집 CSS의 부분을 찾아 전체적으로 3군데를 수정합니다.

#header .inner {
  position: relative;
  max-width: 980px; /* 레이아웃 전체를 1080에서 980으로 바꿈 */
  margin: 0 auto;
}



#container .content-wrap {
max-width: 980px; /* body 부분 전체 폭 1080px; */
margin: 0 auto;
padding: 0 20px;
}


#footer .inner {
position: relative;
  max-width: 980px; /* 레이아웃 전체를 1080에서 980으로 바꿈 */
margin: 0 auto;
}

다음으로 가운데 body 부분의 세로 선의 위치를 옮겨줍니다.

#container .content-wrap:before {
content: "";
position: absolute;
top: 0;
left: 50%;
z-index: 10;
width: 1px;
height: 100%;
margin-left: 280px; /* body 부분 세로 선 가운데를 기준으로 오른쪽으로 이동 거리 255px; */
background-color: #eee;
}

이제 980 폭에 맞게 좌측의 뷰페이지와 오른쪽 aside 부분의 폭을 조절합니다.

#content {
float: left;
width: 742px; /* 68.518518518518519%; */
padding: 40px 0 60px; /* 본문과 오른쪽 부분 72px 0 60px; */
box-sizing: border-box;
}


#aside {
float: right;
width: 182px; /* 21.296296296296296%; */
padding: 18px 0 10px; /* 75px 0 32px; */
box-sizing: border-box;
}

마지막으로 반응형 부분에서 세로선의 위치가 겹쳐지는 부분을 수정하도록 합니다. 모바일에서는 상관이 없는데 태블릿 PC를 사용하는 유저들은 레이아웃이 망가져 보일 수 있습니다.

/* Media Screen */
@media screen and (max-width:980px) { /* body 부분 전체 폭을 1080에서 980으로 바꾼 경우 */


#content {
width: calc(100% - 220px);
}
#container .content-wrap:before {
left: calc(100% - 220px);
margin-left: 0;
}
.layout-aside-left #container .content-wrap:before {
left: calc(100% - 220px);
margin-left: 0;

---