티스토리 북클럽 스킨 제목 높이 줄이기

티스토리 북클럽 스킨 제목 높이 줄이기

 

안녕하세요 사람사물상황입니다.

이번에는 북클럽 스킨의 제목의 크기를 줄여볼겁니다. 기본이 워낙에 커서 살짝만 줄여보려고 하는데요. 사실 아예 없앴으면 좋겠지만, 아직 그 방법은 몰라서 일단 조정만 해보겠습니다. 해보면서 알게된 건 사이즈가 높이 200px이하로는 줄지 않도록 되어있더라구요. 아직은 그에 대한 바꾸는 법을 몰라. 일단은 200에 맞게 폰트 크기와 간격을 조정해 보겠습니다. 먼저 기본화면은 이렇습니다. 

 

 

 

방법

css 에서 몇군데 손을 봅니다. 

 

1. 제목 높이 줄이기 

css post-cover 검색 약 1049행 즈음

 

.post-cover {
position: relative;
z-index: 20;
display: table;
width: 100%;
height: 340px;
background-color: #cbcbcb;
background-position: 50% 50%;
background-size: cover;
box-sizing: border-box;

 

에서 height: 200px; 으로 바꿉니다.

 

 

 

2. 제목안 제목 크기를 2로 수정

post-cover 밑에 좀 보면

.post-cover h1 {
max-width: 1080px;
margin: 0 auto;
font-weight: 300;
font-size: 2.125em;
line-height: 1.2352;
color: #fff;
}

에서 font-size: 2em;  로 바꿉니다.

 

 

3. 제목과 작성자 사이 거리 조절 

그대로 좀 밑에 보면

.post-cover .meta {
display: block;
max-width: 1080px;
margin: 34px auto 0;
font-size: 0.875em;
color: rgba(255,255,255,0.6);
}


에서 margin: 18px auto 0;  로 바꿉니다.

 

 

 

4. 작성자밑 공간을 전체 패딩으로 조절.

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


    padding-bottom: 48px; 로 조정

 

 

 

5. 본문을 위로 끌어올림.

css 447행 즈음

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


에서    padding-top: 165px; 

(200이 고정임 그래서 그 이하로 줄이면 일단 제목을 침범함.)

 

 

그럼 이렇게 바뀝니다.

좀 더 뭔가 괜찮게 만들고 싶은데, 일단은 크기만 살짝만 줄어든 거지만 나름 만족합니다. 

그럼 20000