티스토리 북클럽 스킨을 쓰다보면 헤더의 높이가 너무 커서 본문 글이 눈에 들어오지 않을 때가 많다.
지나치게 큰 헤더는 글읽기에 방해되니 사이즈를 줄여보도록 하자.
| 티스토리 북클럽 스킨 헤더 높이 수정하기
스킨편집 - html - CSS로 이동하고 하래 코드를 찾는다.
.post-cover {
position: relative;
z-index: 20;
display: table;
width: 100%;
height: 220px;
background-color: #cbcbcb;
background-position: 50% 50%;
background-size: cover;
box-sizing: border-box;
}
여기서 height: 220px;로 되어있는데 이건 내가 수정한 사이즈라 작다.
원래 얼마였는지 모르겠는데...
하여튼 이 부분의 숫자를 수정하면 헤더 높이가 수정된다.
220이면 이정도 사이즈 된다.
좀 더 줄이고 싶다면 220보다 작은 숫자로 입력하면 된다.
이걸로 끝이 아니다.
헤더 사이즈를 줄였으면 그 바로 아래에 시작된 본문 시작위치도 같이 줄어들어야하는데
헤더 사이즈만 줄이면 본문 시작위치는 그대로 남아있게 되어 여백이 크게 남아있어 보기 싫다.
그래서 본문 시작위치도 기존보다 줄인 숫자만큼 줄여줘야한다.
| 티스토리 북클럽 스킨 본문 시작위치 수정하기
CSS에서 아래 코드 부분을 찾는다
#tt-body-page #container {
padding-top: 199px;
}
padding-top: 199px; 로 되어있는데 여기서 숫자를 헤더 사이즈 줄인만큼 빼면 된다.
그럼 헤더 사이즈 줄어든만큼 본문 시작위치도 조정되어 깔끔하게 보이게 된다.
| 헤더 제목 수직 중앙정렬 하기
헤더 높이를 줄이고 나니 제목의 수직정렬이 자동이 아니더라.
이거도 수동으로 조절해줘야한다.
CSS에서 아래 코드 부분을 찾는다. (헤더 높이 조절하는거 바로 아래에 있다)
.post-cover .inner {
display: table-cell;
position: relative;
z-index: 10;
vertical-align: bottom;
padding-bottom: 15px;
}
여기서 padding-bottom: 15px; 부분을 원하는대로 수정하면 된다.
수치는 개인마다 얼마나 헤더 사이즈를 변경했는지에 따라 다르기 때문에 수치 변경하고 왼쪽편에서 새로고침 하면서 변경을 눈으로 확인하며 바꿔주도록 하자.
도움이 되었다면 공감과 추천👍 꾹 부탁한다