티스토리 북클럽 스킨 제목(헤더) 높이 조절하는 방법



내 세컨 블로그 스킨으로 티스토리 북클럽 스킨 을 쓰는데 이걸 쓰다보니 본문 제목에 해당하는 헤더가 너무 크더라. 헤더 높이가 너무 커서 글이 눈에 잘 들어오지 않아 이걸 줄여봤다.

티스토리 북클럽 스킨 본문 제목 헤더 높이 줄이기


관리자 메뉴에서 스킨편집 – html – CSS로 이동한다.
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;
}

원래 얼마였는지 모르겠는데 (아마 340px 이었던 듯?)
height: 220px로 수정했다.
220이면 이정도 사이즈 된다.

티스토리 북클럽-1

여기서 더 줄이고 싶다면 220보다 작은 숫자를 입력하면 된다.

이거만 줄여서는 효과가 없다.
헤더의 여백부분도 줄여줘야 제목 텍스트가 수직 중앙정렬이 된다.

헤더 제목 여백 정렬하기


제목 아래 위의 여백을 줄여서 헤더 내부를 정렬된 것 처럼 보이게 해보자.
CSS에서 아래 코드 부분을 찾는다.

.post-cover .inner {
	display: table-cell;
	position: relative;
	z-index: 10;
	vertical-align: bottom;
	padding-bottom: 15px;
}

여기서 padding-bottom이 15px로 되어있는데 이걸 원하는 대로 수정하면 된다.
수치는 개개인마다 다르기 때문에 변경하면서 눈으로 확인하도록 하자.

본문 시작위치 수정하기


헤더 제목 부분의 높이를 수정해서 헤더 아래에 시작하는 본문의 시작점도 당겨줘야한다.
CSS에서 아래 코드를 찾는다.

#tt-body-page #container {
	padding-top: 199px;
}

padding-top이 199로 되어있는데 여기서 숫자를 헤더 사이즈 줄인만큼 빼면 된다.
그럼 본문 시작위치도 헤더 사이즈 줄어든만큼 조정되어 깔끔하게 보이게 된다.

블로그 관련글




파트너스 활동의 일환으로 수수료가 제공될 수 있음