워드프레스나 티스토리 블로그에는 운영자가 직접 원하는 위치에 구글 애드센스 광고를 삽입할 수 있다. 만약 광고 삽입 후 위아래로 여백이 적어서 답답해 보인다면 간단한 CSS 코드를 추가해서 해결하면 된다.
이 블로그의 수동 광고는 ① 본문 글 영역에는 작성자 이름 아래이고 ② 메인/카테고리 글 목록 화면에는 헤더 아래 배치하였다. 최근 블로그 테마를 변경하면서 영역별 간격을 20px로 줬는데 글 목록 페이지 광고 윗 부분과 헤더 사이에 전혀 여백이 없는 모습이다.
크롬 창에서 F12 키를 눌러서 개발자 도구를 연 다음 헤더 요소를 검사하면 ‘.main-navigation’으로 확인할 수 있다. GeneratePress 테마 커스터마이징 창에는 헤더 아래만 여백을 추가하는 설정 옵션이 보이지 않는 것 같다. 그래서 아래 코드를 Additional CSS 칸에 넣고 저장하면 적용된다.
.main-navigation {
margin-bottom: 20px;
}
* 사용 중인 테마의 헤더 여백 조절 옵션을 확인하면 좋은데, 만약 옵션이 없다면 CSS 클래스 이름이 다를 수 있으니 직접 개발자 도구로 검사해 보자.
하지만 헤더가 블로그 전체 영역에 나오고 있다면 글 페이지도 영향을 받게 된다. 즉 원래 빈 여백이 20px이라면, 위 코드 때문에 20px가 추가 돼서 총 40px의 여백이 생긴다.
40px의 여백이 신경 쓰인다면 헤더는 그대로 두고 직접 광고 요소를 검사해서 마진 값을 줘야 한다.
ins {
margin-top : 20px;
}
블로그 내 광고 설정 위치에 따라 마진은 top이 아니라 bottom이 될 수도 있는데, 위 코드와 마진 값을 블로그 여백 설정에 맞게 수정 후 CSS 영역에 붙여 넣으면 완료할 수 있다. 혹시 ins로 적용되지 않는다면 직접 개발자 도구로 검사해서 클래스 이름을 확인하면 된다.
하지만 ins 코드를 적용한 결과, 본문 상단 영역에 수동으로 넣은 광고 위에도 여백이 생겼다. 작성자와 날짜 아래 기본 여백을 20px을 적용했는데 설정 창으로 이동해서 0으로 바꿔주면 된다.
워드프레스 대시보드 – Appearance – Elements에서 (광고를 넣은) 글 페이지로 이동하자.
이후 글 작성자와 날짜 컨테이너를 선택하고 화면 맨 오른쪽에서 Padding-bottom 값을 20px에서 0으로 조정 후 Save 버튼을 누르면 블로그 적용을 마칠 수 있다.
본문 글 내용은 GP 마케터 테마에서 블로그 요소별 간격을 20px로 준 것을 기준으로 작성하였다. 따라서 자신의 블로그 여백이 다르다면 본문 내용을 참고해서 설정에 맞게 마진 값을 조정하면 된다.
관련 글
GeneratePress 마케터 테마 선택 이유와 설치 방법
GP 마케터 테마 글 본문에 브레드 크럼 태그 만드는 방법
블로그 개발자도구 검사로 CSS 요소 확인하는 방법
