728x170

    북클럽 스킨 수정을 계속 하는 중이다.

    헤더를 한번 줄여봤었는데, 이걸로는 성이 안찬다.

    티스토리 북클럽 스킨 헤더 높이 수정방법

     

    이번에는 헤더크기를 더욱 줄이고, 제목사이즈도 줄여보겠다.

    앞서 헤더 높이만 약간 줄인 것 보다 여백 처리에 있어 PC와 모바일 화면을 둘 다 고려해야해서 조금 애먹었다.

     

     

    | 티스토리 북클럽 스킨 헤더 및 제목크기 대폭 줄이기

     

    스킨편집 - html 편집 - css 탭으로 이동한다.

    여기서 총 6군데를 수정해줘야한다.

     

    1041라인 부근

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

    여기서 height를 140으로 줄였다. (이전에는 220이었음)

    헤더 높이를 대폭 줄여서 이대로 두면 제목폰트 크기와 카테고리, 날짜 등등 수직정렬 하나도 안맞고 데스크탑, 모바일 화면에서도 정렬이 안되서 보기 좋지 않다.

     

    439라인 부근에서 아래 코드 부분을 찾는다

     

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

    padding-top: 199px; 로 되어있는데 여기서 숫자를 헤더 사이즈 줄인만큼 빼면 된다.

    그럼 헤더 사이즈 줄어든만큼 본문 시작위치도 조정되어 깔끔하게 보이게 된다.

     

    1062라인 부근 (데스크탑 화면의 헤더 하단 여백)

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

    padding-bottm을 25로 바꿨다.

     

    1076라인 부근 (헤더 제목 사이즈 변경)

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

    font-size를 1.125em으로 바꿨다.

    font-weight도 400으로 줄였다.

     

    1088라인 부근 (작성자, 게시일)

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

    margin을 19px로 바꿨다.

     

    여기까지하면 데스크탑 화면에서는 어느정도 수직정렬이 맞춰서 보인다.

    대신 모바일 화면으로 바꾸면 여백 적용이 되어있지 않아 정렬이 안맞으니 이걸 다시 보정해준다.

     

     

     

     

    2919라인 부근

    	.post-cover .inner {
    		padding-bottom: 19px;
    		vertical-align: bottom;
    	}

    여기서 padding-bottom을 19로 바꿔준다.

    이렇게 바꾸면 최종 아래모습으로 바뀐다.

     

    해결완료!

     

    도움이 되었다면 공감과 추천👍 꾹 부탁한다

    그리드형
    • 네이버 블러그 공유하기
    • 네이버 밴드에 공유하기
    • 페이스북 공유하기
    • 카카오스토리 공유하기

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