티스토리 블로그 입문기 #12 본문 크기 늘리기 + 애드핏 광고 겹침/짤림 해결

오늘은 티스토리 블로그의 본문 크기를 조절하는 방법에 관해 알아보겠습니다. 애드핏 광고 겹침, 짤림 문제로 알아보게 되었는데, 해당 내용을 해결하는 과정에서 본문 크기를 조절하다 보니 함께 소개하게 되었습니다.

 

아마 모든 블로그가 이 설정이 필요하지는 않을 것 같고, 저와 같이 사이드바가 있는 레이아웃에서는 문제가 발생할 수 있습니다. 지금부터 하나하나 살펴보겠습니다.

---

문제 상황

 

애드핏 광고를 게시하고 난 직후, 아래와 같이 한가지 문제를 발견했습니다.

 

광고 겹치는 문제

 

광고가 올바르게 표시되지 않고 옆의 사이드바와 겹치는 문제였습니다.

 

분명 미리보기로 볼 때는 겹치지 않고 잘 표시되었는데, 실제 게시한 후에 자꾸 문제가 발생하니 정말 의문이었습니다.

 

어떻게 해결할 수 있을까 이리저리 방법을 찾다가 본문 가로 길이를 늘이면 될 것 같다는 생각이 들었습니다. 지금부터 그 방법을 자세히 알아보겠습니다.

---

티스토리 블로그 본문 크기 조절하기

 

티스토리 블로그는 HTML이나 CSS를 활용하여 레이아웃을 본인이 원하는 대로 커스터마이징 할 수 있다고 많이들 알고 계실 것입니다. 안타깝게도 HTML, CSS 자체를 잘 몰라 선뜻 시도하지 못하는 분들이 많은데요, 이번 내용 역시 CSS 코드를 수정해야 합니다. 전혀 어렵지 않으니 설명대로 따라 하시면 됩니다.

 

1. 설정 - 스킨 편집으로 이동하기

 

2. html 편집 - CSS로 이동하기

 

위 두 가지 단계는 이미 여러 포스팅에서 다루었기 때문에 생략하도록 하겠습니다. 필요하다면 아래 포스팅에서 해당 부분을 참고해주세요.

 

https://homubee.tistory.com/17

티스토리 블로그 입문기 #8 코드블럭 highlight.js 적용하고 테두리 없애기

 

3. .area-main 찾고 수정하기

 

Ctrl+F로 해당 내용을 찾아보면 아래와 같은 코드를 찾을 수 있습니다.

 

 

우리가 주목해야 할 부분은 max-width입니다. 640px로 되어있습니다.

 

반면, 카카오 애드핏 사이즈를 보겠습니다.

 

 

728px를 640px에 넣으려니 광고가 짤릴 수밖에 없는 것입니다.

 

이게 저와 같이 오디세이(Odyssesy) 스킨을 사용하는 경우 많이 발생하는 문제인데요, 사이드바도 있는데 본문 길이도 짧다 보니 광고를 제대로 출력하지 못한 것입니다.

 

이제 문제점을 알았으니 해당 부분을 고치면 됩니다. 저 같은 경우에는 본문이 너무 커지 않았으면 해서 광고만 딱 들어가도록 730px로 수정했습니다. 해당 내용으로 수정하시거나 아래 코드로 덮어쓰기 하면 됩니다. 더 크게 하고 싶다면 숫자를 늘리면 됩니다.

 

.area-main {
    width: 100%;
    max-width: 730px;
}

 

 

4. .main과 찾고 수정하기

 

본문 크기를 늘리게 되면 전체 크기에서 상대적으로 사이드바가 차지하는 비중이 줄어들게 됩니다. 그 때문에 아래와 같은 문제가 발생할 수 있습니다.

 

사이드바 압축 문제

 

기존에 비해 사이드바가 확 압축된 것을 확인할 수 있습니다. 광고는 겹치지 않지만, 사이드바가 그다지 보기 좋지 않아보입니다. 이 역시 해결해봅시다.

 

한가지만 고치면 됩니다. .main을 살펴보겠습니다. .area-main 바로 위에 있기 때문에 쉽게 찾으실 수 있습니다.

 

 

이번에 수정할 부분은 max-width입니다. 1020px로 되어 있습니다. 이는 본문과 사이드바를 포함한 전체 길이입니다. 이 값을 늘려주면 사이드바 크기를 원래대로 되돌릴 수 있습니다.

 

우리가 앞서 늘린 길이는 730 - 640 = 90px이므로 1110px로 수정하면 됩니다. 해당 내용으로 수정하시거나 아래 코드로 덮어쓰기 하면 됩니다.

 

.main {
    width: 100%;
    max-width: 1110px;
    margin: 0 auto;
}

 

여기까지 마치면 모든 작업이 완료되었습니다. 어렵지는 않지만, 처음 하다보면 조금 헷갈릴 수 있으니 천천히 따라해보시기 바랍니다.

 

정상 광고 및 사이드바

 

광고도 짤리지 않고, 사이드바도 정상 크기로 출력되는 것을 확인할 수 있습니다.

---

티스토리 블로그의 본문 크기 조절하는 법에 관해 알아보았습니다. CSS를 편집해야 하기 때문에 막연히 어려워하시는 경우가 있었을 것 같은데, 이 글을 보고 차근차근 따라해서 원하는 결과 얻으셨으면 좋겠습니다.

 

직접 조사해서 작성하는 글이다 보니 일부 정확하지 않은 정보가 포함되어 있을 수 있습니다.

궁금한 사항이나 잘못된 내용이 있으면 댓글로 알려주세요~

구독과 좋아요, 환영합니다!