구글블로그 메인 화면에서만 배너가 노출 설정방법

블로그를 운영하다 보면 메인 화면에 걸어둔 홍보 배너가 게시물 상세 페이지에서도 그대로 노출되는 경우가 있습니다. 방문자가 개별 글을 읽으러 들어왔는데 배너가 계속 따라다니면 오히려 콘텐츠 몰입을 방해할 수 있는데요, 오늘은 코코스학원 블로그에서 메인 화면에서만 배너가 노출되도록 설정한 과정을 정리해봤습니다.

▲ 메인 화면에는 배너가 정상적으로 노출된 모습

■ 문제 상황

배너를 처음 넣었을 때는 메인 화면과 게시물 페이지 구분 없이 모든 페이지에 동일하게 노출됐습니다. 홈 화면에서는 방문자의 시선을 끌기 좋지만, 이미 글을 읽으러 들어온 게시물 페이지에서까지 큰 배너가 반복적으로 나타나니 가독성이 떨어지는 문제가 있었습니다.

■ 해결 방법

테마의 <body> 태그에는 페이지 종류에 따라 자동으로 클래스가 붙습니다. 메인 화면일 때만 home이라는 클래스가 붙는 걸 확인했고, 이를 이용해 배너를 기본적으로 숨겨두었다가 메인 화면에서만 다시 보이도록 CSS를 추가했습니다.

/* 홈페이지에서만 노출 */

.custom-hero-banner { display: none; }

body.home .custom-hero-banner { display: block; }

이 두 줄을 기존 배너 스타일(.custom-hero-banner) 코드 바로 위에 추가하고 테마를 저장하는 것만으로 해결됐습니다. 별도의 스크립트 없이 CSS 두 줄로 끝나는 간단한 방법입니다.

▲ 테마 편집기에 CSS 코드를 추가한 화면

■ 정리

블로그 테마마다 <body> 태그에 붙는 클래스 이름이 다를 수 있으니, 같은 방법을 적용하고 싶다면 먼저 게시물 페이지에서 <body> 태그의 실제 클래스명을 확인한 뒤 그에 맞춰 CSS를 작성하면 됩니다. 홈 화면과 게시물 페이지의 역할을 구분해서 배너를 노출하니 방문자 경험도 한결 깔끔해졌습니다.