티스토리 북클럽 스킨 커버아이템 뉴스레터 수정하기

  YES HOME의 스킨을 오랜만에 변경했습니다. 기존에 사용했던 스킨은 Letter였는데요. 스킨 기본값에서 큰 변경 없이 사용했더니 제가 봐도 방문자가 다양한 정보를 얻지 못할 것 같더라구요. 좀 수정해볼까 했더니 Letter 스킨에 한계가 있어 요즘 많이 쓰시는 북클럽 스킨으로 바꾸었습니다. 그런데 처음 설정 그대로는 쓰기 어렵겠더라구요. 앞으로 조금씩 손보면서 기록을 남겨두려고 합니다. 북클럽 스킨 쓰시는 분들께 도움이 되길 바랍니다.

북클럽 스킨 최종 수정 목표

스킨편집 HTML, CSS에서 뉴스레터 영역 찾기

현재 홈에 커버 아이템 한 개를 추가해뒀는데요. 뉴스레터라는 커버 아이템을 선택했어요. 썸네일이 우측에 작게 표시되고 텍스트 중심의 아이템이라 깔끔하면서 정보가 눈에 잘 보여서 마음에 들더라구요. 그런데 이런 저런 기본값이 마음에 들지 않아 수정해보려고 합니다. 

북클럽 스킨 홈설정

먼저 스킨편집 HTML, CSS 페이지에서 뉴스레터에 해당하는 영역을 찾아야겠죠? 저는 이 부분을 찾는 게 좀 어려웠어요. HTML을 본지 너무 오래라 더 애먹었던 것 같아요. 😅

HTML 내 뉴스레터 커버아이템 영역

북클럽 스킨에는 여러 종류의 커버 아이템을 제공하고 있는데, 각 커버 아이템마다 HTML 영역이 다르더라구요. 뉴스레터는 cover-thumbnail-2라는 이름으로 구분되어 있어요. HTML 197라인에 위치해 있습니다. 이번에는 스타일을 지정하는 CSS 페이지에서 뉴스레터를 찾아볼게요.

CSS 내 뉴스레터 커버아이템 영역

HTML에 cover-thumbnail-2라는 이름으로 지정해뒀으니, 똑같은 이름을 CSS 페이지에서 검색해보시면 돼요. CSS 627라인부터 나오네요. 수정하기 쉽게 태그별로 구분이 되어있습니다. 이제 뉴스레터 영역을 알았으니 입맛에 맞게 수정해봅시다.

반응형

뉴스레터 썸네일 이미지 1:1 정사각형으로 표시하기

북클럽 스킨은 이름만으로도 알 수 있겠지만, 도서 컨텐츠를 제공하는 출판사 블로그에 적합한 스킨입니다. 그렇다보니 썸네일 이미지가 책 비율로 표시가 돼요. 책을 리뷰하시는 분들에게는 정말 편리하겠지만, 보통 1:1 정사각형 썸네일을 선호하는 저에게는 아쉬운 점이죠. 

북클럽 스킨 썸네일 기본 형태

이제 썸네일 이미지를 1:1로 수정해보겠습니다. 먼저 HTML에서 뉴스레터의 썸네일 영역을 찾아봅니다.

HTML 내 북클럽 스킨 뉴스레터 썸네일 영역

figure 태그로 썸네일 이미지를 보여주고 있네요. figure 태그 내부에 img 태그에 썸네일 이미지가 들어있는데, 저 URL의 형태는 어떤식으로 가져오는 건지 잘 모르겠어 궁금하네요. 혹시 아시는 분 댓글 부탁 드려요. 😊 

북클럽 스킨 썸네일 사이즈

집중 해주셔야 할 부분이 바로 저 C126x166인데요. 단위는 정확히 모르겠지만 126x166 사이즈로 썸네일 이미지를 불러오고 있습니다. 이 부분을 먼저 C126x126으로 수정해볼게요.

썸네일 이미지 사이즈 수정 후

와! 1:1 비율의 정사각형으로 썸네일이 보이네요. 만족스럽습니다!

뉴스레터 썸네일 이미지 사이즈 변경하기

썸네일이 정사각형으로 표시된 건 좋은데 사이즈가 너무 작은 것 같다하시면 CSS에서 사이즈를 변경해주시면 돼요.

아까 썸네일 이미지가 figure 태그 안에 있었던 거 기억나시죠? 그래서 figure의 width 값을 변경해주시면 돼요. 원하시는 사이즈로 변경해주시면 됩니다. 

뉴스레터 썸네일 위치 조정하기

그런데 썸네일 비율을 조정하고 나니까 뭔가 삐뚤빼뚤한 게 마음에 들지 않네요. 제목의 Top(상단)과 썸네일의 Top이 값이 다른지 시작점이 다른 것 같네요. CSS를 열어봅니다.

CSS 내 뉴스레터 리스트 아이템 타이틀 영역

CSS 664라인을 보시면 됩니다. title에 대한 스타일이 정의되어 있습니다. 이 중에 잘 살펴보니 padding-top이라는 값을 지정해줬네요. 제목 영역에서 상단 안쪽에 7px만큼 패딩을 주었네요. 

CSS 내 뉴스레터 리스트 아이템 썸네일 영역

큰 고민하기 싫다면 제목과 똑같이 padding-top을 7px 주시면 됩니다. 저도 나중에 틀어지면 수정하지 뭐 하고 padding-top으로 주었어요 😏

아까보다 훨씬 정돈되어보이네요. 마음에 듭니다.

뉴스레터 리스트 아이템 발췌 내용 라인 수 변경하기

마지막으로 본문 내용을 발췌해서 보여주는 영역을 수정해보려고 합니다. 리스트 아이템 상단을 잘 맞췄더니 하단이 거슬리네요. 

이렇게 썸네일 하단을 기준선으로 잡았을 때 올린 날짜도 기준선 안쪽에 표시가 되었으면 좋겠더라구요. 어떻게 할까 고민하다가 발췌 내용의 라인 수를 줄이는 방법을 선택했어요.

CSS 내 발췌 영역

-webkit-line-clamp라는 속성에 3이라고 값을 주었네요. -webkit이 뭔지는 정확히 모르겠지만 현재 표시되는 라인 수가 3인 걸로 보아 이 속성을 수정하면 될 것 같아요! 2로 수정해봅니다.

썸네일 하단 기준선 안에 올린 날짜까지 쏘옥 들어왔네요! 다른 방법도 있겠지만, 미리보기 내용을 꼭 많이 보여줄 필요는 없을 것 같아서 라인 수를 줄이는 걸로 해결했습니다 😄

이번 수정은 여기까지입니다. 다음에 또 수정하게 되면 글 올리도록 할게요. 봐주셔서 감사합니다!