티스토리 북클럽 스킨 필수 수정 3가지 – h1 중복, 제목 잘림, 모바일 구독 버튼

◆ 티스토리 북클럽 스킨 필수 수정 3가지

 

티스토리 북클럽 스킨을 열흘 정도 사용하면서 필요한 부분을 조금씩 손봤다.

 

그 중에서도 사용자 입장에서 꼭 수정해두면 좋은 부분은 다음 3가지다.

 

1. <h1> 요소 중복 문제

2. 모바일에서 글 제목 잘림 현상

3. 모바일에서 구독하기 버튼 사라짐

 

---

1. <h1> 요소 중복 문제

북클럽 스킨은 기본적으로 블로그 이름과 글 제목 모두에 <h1> 태그가 적용되어 있다. 이 상태로 네이버 서치 어드바이저에서 사이트 점검을 하면 “<H1> 요소가 2개 이상 발견됨” 같은 진단이 뜬다.

검색엔진에서는 보통 <h1>을 해당 페이지의 가장 중요한 주제라고 보기 때문에, 글 제목에만 사용하는 것이 좋다. 블로그 이름은 중요도가 상대적으로 낮으므로 다른 태그나 div로 바꿔도 무방하다.

다음과 같이 HTML과 CSS를 수정한다.

 

---

 

A. HTML 수정

(1) 티스토리 관리자 → 꾸미기 → 스킨 편집 → HTML 편집으로 이동한다.

(2) HTML 아래쪽의 header 영역에서 <h1> 태그를 찾는다.

 

header 영역의 h1 태그를 찾는다.

(3) <h1> → <div class="site-title">, </h1> → </div> 으로 변경한다.

 

h1 태그를 div로 대체한다.

(4) 적용 버튼을 눌러 저장한다.

 

---

B. CSS 수정

(1) CSS 편집 화면에서 편집창을 한 번 클릭한 후 Ctrl+f를 눌러 검색창을 연다.

 

편집창을 한 번 클릭 후 Ctrl+f를 눌러 검색창을 연다.

(2) 검색창 왼쪽 가장자리의 ">"를 눌러 검색창을 확장한다.

 

">"를 눌러 검색창을 확장한다.

(3) 윗 칸엔 "#header h1", 아랫 칸엔 ".site-title"을 입력한다. 총 5개가 검색된다.

 

총 5개가 검색된다.

(4) 엔터를 5번 누르거나 "Replace all" 버튼으로 한꺼번에 치환한다.

 

빨간 네모 안의 버튼을 눌러 한꺼번에 수정할 수 있다.

(5) 적용 버튼을 눌러서 수정 완료.

이렇게 하면 SEO 경고도 사라지고, 블로그 구조도 더 깔끔해진다.

 

---

2. 모바일에서 글 제목 잘림 현상

북클럽 스킨은 모바일 화면이 좁거나 PC에서 창 크기를 줄였을 때, 글 제목이 두 줄을 넘으면 잘리는 문제가 있다.

아래 내용을 CSS 맨 아래에 추가하면 글 제목이 최대 4줄까지 자연스럽게 표시된다.

.post-cover .inner h1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 최대 4줄까지만 표시 */
  overflow: hidden;
}

 

두 줄 이후엔 잘리다가 4줄까지 표시된다.

 

---

3. 모바일에서 구독하기 버튼 사라짐

메뉴바/구독 설정에서 구독 버튼을 활성화해도, 모바일 화면에서는 이 버튼이 자동으로 숨겨져 보이지 않는다.

모바일에서도 구독 버튼을 항상 표시하고 싶다면, CSS 맨 아래에 다음 내용을 추가한다.

.menu_toolbar {
    display: block !important;
    visibility: visible;
    opacity: 1;
}

다만 이렇게 하면 모바일에서 사이드 메뉴(햄버거 메뉴)를 열 때 구독 버튼이 겹쳐 보일 수 있다.

 

이럴 때는 아래 코드를 추가하면, 사이드바가 열릴 땐 구독 버튼이 잠시 숨겨지고 닫히면 다시 나타난다.

body.mobile-menu .menu_toolbar {
    display: none !important;
}

 

글 제목 잘림과 모바일 구독 버튼 사라짐 문제 해결 CSS