티스토리 북클럽스킨을 가장 많이 쓴다고 해서 바꿨는데, 상단의 제목에 너무 큰 이미지가 자리를 차지하고 있었어요. 그래서 그걸 조정하자니 줄줄이 수정해야할 것들이 나와서 다음에 다시 보기 위해 북클럽스킨 제목의 이미지 삭제 및 사이즈 조정하는 방법을 정리해봤어요.
원래는 회색으로 되어있는 제목부분이 크기도 훨씬 크고, 썸네일 이미지도 배경으로 들어가있어 가독성이 떨어졌어요.
광고를 넣게 되면 더 정신없을 것 같아서 이미지도 삭제하고 사이즈도 줄였습니다.
이 글은 개인적인 세팅방법을 나중에 또 보기 위해 정리한 것으로 모두에게 맞지는 않을 수 있습니다.
상단의 그림이 뜨지 않도록 편집하기
HTML에서 s_permalink_article_rep로 검색하여 style="background-image:url(https://blog.kakaocdn.net/dn/beGiyC/btrToa9zaac/zi0QLs6xFju461xZy8XKyk/img.jpg)"를 style="background-image:none" 로 변경합니다.
특정 이미지를 넣고싶다면, 위의 url 경로에 특정 이미지 경로를 넣어도 무방합니다.
제목바 색깔 변경하기
CSS에서 .post-cover 를 검색하여 background-color : #cbcbcb; 부분의 # 뒷부분을 원하는 색으로 변경해주면 됩니다.
색상정보 #앞의 네모박스에 마우스를 올리면 색상을 쉽게 변경할 수 있는 색상표가 제공됩니다.
색상표 위에 마우스 클릭을 하면 색깔이 바로 변경되므로, 기존 색상과 비교하고싶다면 미리 기존 색상의 색상정보를 따로 메모해두시는 것을 추천드립니다.
상단에 있는 카테고리 위치 제목 아래로 변경하기
1. 제목 상단에 카테고리가 있어 3줄이 되는 것을 2줄로 변경하는 것입니다. 제목부분을 작게 하고싶다면 작업을 하면 됩니다. 굳이 옮기고 싶지 않은 분은 해당 작업을 패스해도 좋습니다.
HTML에서 <span class="category">IT 인터넷/애드센스 티스토리</span> 부분을 s_permalink_article_rep의 inner-meta 아래로 넣습니다.
해당 위치로 옮기게 되면, 제목의 상단에 자리를 차지하던 카테고리 정보가 글쓴이 앞으로 와서 제목과 카테고리, 글쓴이, 날짜 순으로 보여지게 됩니다.
2. 카테고리의 글꼴을 일반 글꼴로 바꿉니다.
CSS에서 '.post-cover .category' 부분을 전부 삭제합니다. 모바일용에도 있지만, 거기는 글자크기만 조정하므로 필요시에만 삭제 또는 수정합니다.
제목 글자크기 및 제목바 높이 변경하기
제목의 글자크기는 웹, 테블릿용과 모바일용이 따로 있습니다. 따라서 글자크기를 조정하기 위해서는 두군데 다 손을 봐야 합니다.
CSS에서 처음 나오는 .post-cover는 일반(웹용)이고, 모바일용은 '@media screen and (max-width:767px) {' 이후로 나오는 부분이 전부 모바일용입니다.
1. 웹, 태블릿용 글자크기 조정하기
글자크기는 CSS에서 .post-cover h1의 font-size를 조정하면 되고, 굵기는 font-weight를 조정하면 됩니다.
해당 부분은 정답이 없으니 본인의 블로그에 어울리는 크기로 여러차례에 걸쳐 조정해보시면 됩니다.
저의 경우 글자크기를 작게 변경
=> .post-cover h1의 font-size: 2.125em -> font-size: 1.845em 로 변경
글자 굵기는 굵게 변경
=> .post-cover h1의 font-weight: 300 -> font-weight: 400으로 변경
글자의 색상을 변경하려면, color 부분을 변경하시면 됩니다.
2. 웹, 태블릿용 공간 크기와 제목 위치 조정하기
글자크기를 바꾸면서 공간이 비기 때문에 크기를 조정을 해야 합니다.
공간의 크기와 제목 위치는 어떤 위치로 옮기느냐에 따라 분위기가 달라서 여러 곳이 걸려있기 때문에, 적절히 여러차례 조정해보시면서 필요한 크기로 정하시면 됩니다.
저의 경우 CSS에서 제목바 크기를 줄이기
=> .post-cover의 height: 340px; -> height: 140px;로 변경
제목과 메타부분 공간 줄이기
=> .post-cover의 .meta의 margin: 34px auto 0; -> margin: 18px auto 0; 로 변경
아래 공백 줄이기
=> .post-cover .inner의 padding-bottom: 78px; -> padding-bottom: 20px; 로 변경
글자 크기나 폰트에 따라 분위기가 많이 차이나므로 공간크기는 블로그에 맞는 사이즈로 조정하시는 것을 추천합니다.
다만, 한 부분을 고치면 여러곳을 손봐야하기 때문에 조금 어려울 수는 있으니, 조정 전 사이즈를 기록해 놓은 후 조정하시기 바랍니다.
3. 웹, 태블릿용 글자크기 조정하기
글자크기는 CSS에서 모바일용으로 .post-cover h1의 font-size를 조정하면 되고, 굵기는 font-weight를 조정하면 됩니다.
해당 부분은 정답이 없으니 본인의 블로그에 어울리는 크기로 여러차례에 걸쳐 조정해보시면 됩니다.
다만, 모바일용으로 확인해보실 땐, 비공개글을 작성하여 확인하시는 것을 추천합니다.
저의 경우 글자크기를 작게 변경
=> .post-cover h1에 font-size: 1.625em 추가
글자 굵기는 굵게 변경
=> .post-cover h1의 font-weight: 300; -> font-weight: 400; 으로 변경
웹용과 마찬가지로 글자의 색상을 변경하려면, color 부분을 변경하시면 됩니다.
4. 모바일용 공간 크기와 제목 위치 조정하기
모바일용도 공간크기를 조정해야 합니다. 이 경우도 웹용과 마찬가지로 글자크기와 공간 크기에 따라 눈으로 확인해보며 조절하는게 좋고, 미리 변경 전 이전 수치는 적어두는게 좋습니다.
저의 경우 CSS에서 모바일 상 최하단 공간 줄이기
=> post-cover .meta의 margin-top: 33px -> margin-top: 18px으로 변경
아래 공백 줄이기
=>.post-cover .inner의 padding-bottom: 38px; -> padding-bottom: 20px; 로 변경
제목바 크기는 하나로 사용되므로, 웹용에서 이미 줄였기 때문에 별도로 줄이지 않아도 됩니다.
제목과 본문 사이 빈 공간 없애기
위와 같이 수정하면 제목과 본문의 사이에 줄인 공간만큼의 빈 공간이 나타납니다.
따라서 그 공간도 줄여줘야 하는데, 그것은 CSS에서 tt-body-page #container의 padding-top 부분을 줄여주면 됩니다.
저의 경우 tt-body-page #container의 padding-top: 339px; -> padding-top: 140px; 으로 변경하였습니다.
| < 이 블로그의 다른 읽을만한 글들 > ✔ 다이슨 에어랩을 남녀노소 추천하는 이유 ✔ 각질제거 최강 인생 화장품 리톤72 ✔ 숙취해소제 히말라야 모닝컴스 비교 분석 - 내돈내산 후기 |
왠만하면 티스토리 관련 팁은 아는게 많지 않기 때문에 남기지 않으려했는데, 나중에 다시 정리하기 힘들 것 같아 한번 정리해봤습니다.
북클럽스킨 제목란 사이즈를 조정하시는데 도움이 되었으면 좋겠네요.
'IT 인터넷 > 애드센스 티스토리' 카테고리의 다른 글
| 애드센스 무효클릭/무효트래픽 IP 신고 및 고소하기 (2) | 2022.11.12 |
|---|
댓글