사이드바는 이제 그만! 블로그스팟 카테고리를 '상단 가로 탭 메뉴'로 바꾸는 법

 

세로 메뉴를 가로로! 블로그 상단 탭 메뉴 제작 가이드

카테고리가 사이드바에만 있으면 모바일이나 하단 스크롤 시 접근성이 떨어집니다. 가로형 상단 메뉴는 독자가 언제든 다른 주제로 이동할 수 있게 도와주며, 페이지뷰(PV) 상승에 직접적인 도움을 줍니다.

1단계: 가젯 위치 이동하기

먼저 메뉴로 사용할 라벨 가젯을 상단 영역으로 옮겨야 합니다.

• 블로그 관리자 홈에서 [레이아웃] 메뉴로 들어갑니다.
• [라벨(Labels)] 가젯을 마우스로 잡아 헤더(Header) 바로 아래나 상단 가젯 영역으로 드래그하여 옮깁니다.
• 가젯 설정에서 '목록' 형태가 아닌 '클라우드' 혹은 '목록' 중 하나를 선택하세요. (어느 것이든 CSS로 수정 가능합니다.)

2단계: 가로 배치를 위한 CSS 설정

📍 위치: [테마] → [맞춤설정] → [고급] → [CSS 추가]

아래 코드를 복사해서 붙여넣으세요. 세로로 흐르던 목록을 가로로 정렬하고 세련된 버튼 형태로 바꿔줍니다.

/* 라벨 가젯을 가로 메뉴로 변환 */ .Label ul { list-style: none; padding: 0; margin: 0; display: flex; /* 🚩 가로 정렬의 핵심 */ flex-wrap: wrap; /* 🚩 메뉴가 많으면 다음 줄로 넘김 */ justify-content: center; /* 🚩 가운데 정렬 (왼쪽은 flex-start) */ background-color: #ffffff; /* 메뉴 배경색 */ border-bottom: 1px solid #eee; } .Label li { margin: 0; } .Label li a { display: block; padding: 12px 20px; text-decoration: none; color: #555; font-weight: bold; transition: all 0.3s ease; } /* 마우스를 올렸을 때 효과 */ .Label li a:hover { color: #4285f4; background-color: #f0f7ff; border-bottom: 3px solid #4285f4; }

💡 더 프로처럼 보이게 만드는 팁
1. 고정 메뉴 만들기: CSS에 position: sticky; top: 0;를 추가하면 스크롤을 내려도 메뉴가 상단에 고정됩니다.
2. 글자 크기: 메뉴가 너무 많다면 font-size: 14px; 정도로 조절하여 한 줄에 다 들어오게 하세요.
3. 간격 조절: padding 값을 수정하여 메뉴 버튼의 넓이를 조절할 수 있습니다.

3단계: 모바일 가독성 확인

⚠️ 주의사항
카테고리가 너무 많으면 모바일 화면에서 메뉴가 여러 줄로 겹쳐 지저분해 보일 수 있습니다. 이럴 때는 [가젯 설정]에서 중요한 라벨만 선택해서 노출하거나, 모바일 전용 미디어 쿼리(Media Query)를 사용하여 크기를 줄여야 합니다.

사이드바에서 탈출한 상단 메뉴로 방문자들에게 편리한 이동 경로를 제공해 보세요!