쉽빠! 티스토리 북클럽 스킨 편집 (제목 크기 및 투명도 조절 방법)

티스토리 북클럽 스킨 편집 (제목 크기 및 투명도 조절)

안녕하세요. 벨라입니다. 

북클럽 스킨은 수익성 블로그를 운영하는 티스토리 블로거들에게 인기 있는 스킨입니다. 그러나 북클럽 스킨을 그대로 사용하기엔 디자인의 한계가 있습니다. CSS와 HTML을 몰라도 누구나 쉽고 빠르게 북클럽 스킨 편집 방법 모두 알려드릴게요!  

---

북클럽 스킨 디자인의 한계

▲ 북클럽 스킨을 그대로 사용하기엔 디자인의 한계가 있습니다. 위 그림에서 보듯이 북클럽 스킨의 초기 세팅은 포스팅 제목에 썸네일이 중복되도록 설정되어있습니다. 글이 이미지에 가려 가독성이 떨어집니다. 이미지를 투명도를 낮춰 제목이 돋보이도록 수정하겠습니다. 

---

북클럽 스킨 제목 투명도 변경 방법 (투명 → 불투명)

▲ 관리자 페이지 → 꾸미기 →스킨 편집을 눌러주세요. 

▲ html 편집 버튼을 눌러주세요. 이곳에서 CSS편집을 하면 제목의 투명도를 어둡게 변경할 수 있습니다. 

 

▲ CSS를 클릭합니다. CSS 빈 공간 아무곳을 클릭하여 커서를 두고 ctrl과 F10키를 동시에 눌러 검색창을 엽니다. .post-cover:before 을 입력한 뒤 엔터 버튼을 누릅니다. 

 

▲background-color: rgba(0,0,0,0.25)에서 0.25 수치를 1에 가깝게 수정시키면 투명도가 어두워집니다. 

 

▲ 위 이미지에서 보듯이 background-color: rgba(0,0,0,0.25)에서 0.25 수치를 1로 변경하면 투명도가 제로가 되어서 이미지가 보이지 않게 됩니다. 취향에 맞는 투명도 수치로 변경을 하면 됩니다.

 

▲ 저는 불투명도 수치를 0.85로 결정했습니다. 원하는 수치를 넣고 우측 상단의 적용버튼을 클릭합니다. 북클럽 스킨 제목이 불투명하게 변경 완료되었습니다.

 

---

북클럽 스킨 제목 크기 변경 방법

▲ html 편집 버튼을 눌러주세요. 이곳에서 CSS편집을 하면 제목의 크기를 작게 변경할 수 있습니다. 

 

 

▲  CSS를 클릭합니다. CSS 빈 공간 아무곳을 클릭하여 커서를 두고 ctrl과 F10키를 동시에 눌러 검색창을 엽니다. .post-cover 을 입력한 뒤 엔터 버튼을 누릅니다. 

 

▲  height: 340px을 찾습니다. height: 340px의 수치를 낮추면 제목의 사이즈를 작게 줄일 수 있습니다. 

 

▲  height: 340px의 수치를 300px로 변경한 뒤 적용 버튼을 누릅니다. 

 

▲  제목을 높이가 줄어들었습니다. 

---

티스토리 북클럽 스킨 편집하기 어떠셨나요? 생각보다 쉽고 재밌었지요~ 
오늘도 긴 글 읽어주셔서 감사합니다. 좋아요와 구독하기는 큰 힘이 됩니다~

 읽으면 도움이 되는 이전 글  

티스토리 북클럽 스킨을 추천 이유와 초기 세팅 방법

쉽빠! 티스토리 북클럽 스킨 꾸미기 (썸네일 크기변경 방법)