[티스토리 초기설정] 글 제목 배경 크기 줄이기 및 관련 설정하기

 

티스토리 블로그 포스팅 제목이 표시되는 부분은, 글에 포함된 이미지(썸네일)가 배경이 되고 글 제목이 그 위에 표시되는 형식으로 되어 있습니다. 배경의 크기가 너무 크다 생각되어 줄이고 싶거나, 제목 폰트 크기를 변경하고 싶을 때 방법을 말씀드리겠습니다.

 

■ 블로그 포스팅 상단 조절 필요성

아래 샘플 화면과 같이 글을 작성하고 나니 마음에 들지 않는 부분들이 생겼습니다. 해결해보고자 합니다.

• 제목의 배경이 되는 부분(보라색 이미지)이 아래 위로 너무 넓어서 화면에서 너무 많은 부분을 잡아먹는다.
• 제목 글자 크기를 더 키우고 싶다. (또는 더 줄이고 싶다)
• 배경이 되는 썸네일 이미지가, 제목 글자와 중첩되어서 읽는데 방해가 된다.

테스트 글쓰기 예시 이미지

 

1)  포스팅 제목(타이틀) 배경 이미지 크기 줄이기

• 제목 배경의 크기를 조절하기 위해서 "블로그 관리 → 스킨 편집 → HTML 편집"으로 들어갑니다. 
• "CSS"를 선택하여 "ctrl + F"로 "post-cover"를 입력하면 여러 개가 쭉 검색되는데, 그중에서 대략 1040번 근처의 다음과 같은 내용이 나오는 부분을 찾아주세요.
• 'height: 340px'라고 되어 있는 부분에서 340px를 원하는 크기로 조절 후 "적용"을 눌러 확인해주시기 바랍니다. (예시 이미지에서는 180px로 조절하였습니다)

포스팅 상단 제목배경 크기

 

2)  포스팅 제목 위치 조절하기

제목 타이틀 배경의 크기를 줄였더니 제목이 너무 위로 올라간 것처럼 보여 약간 아래로 조정하고 싶습니다. 

위에서 조절한 CSS에서 조금 아래로 내려와서 계속 작업하면 됩니다.

테스트 글쓰기 예시 이미지(1차 조절 후)

• CSS의 1062번 열 부근에서 "post-cover. inner" 부분을 찾습니다.
• "padding-bottom: 78px;"이라고 아래쪽에서부터 78px을 띄어놨습니다. 숫자를 줄이면 제목이 아래쪽으로 이동하게 됩니다. (예시에서는 30px로 조절하였습니다)

post-cover .inner에서 padding-bottom 조절하기

 

3)  포스팅 제목 배경 이미지 어둡게(밝게) 조절하기

• CSS파일 대략 1060열 부근에서 "background-cover"를 찾습니다. 
• (0,0,0,0.25)라고 되어 있는 부분에서 0.25를 조절해줍니다. 이 숫자는 어둡기를 의미하므로 숫자가 커질수록 배경이 어두워집니다. (저는 0.25 → 0.75로 조절하여 어둡게 해 주었습니다)

post-cover .before에서 background-color 조절하기

 

4)  포스팅 제목 글자 크기 조절하기

• CSS의 1076열 부근에서 아래와 같이 생긴 "post-cover h1"을 찾습니다.
• "font-weight"가 기본 "300"으로 되어 있는 것을 400, 500 이런 식으로 키워주면 제목 글자의 굵기가 굵어집니다.
• "font-size"가 기본 "2.125em"이라고 되어 있는 부분을 키워주면 제목 글자의 크기가 커지고, 줄여주면 글자의 크기가 작아집니다. (저는 "1.8em"로 조금 작게 조절하였습니다.)
• "line-height"가 기본 "1.2352"라고 되어 있는 부분을 줄여주면 제목 아래쪽의 공백을 줄일 수 있습니다. (저는 "1.0"로 조절하였습니다.)

post-cover h1에서 제목 글자 굵기, 크기, 공백 조절하기

 

5)  포스팅 제목과 본문 사이의 간격 조절하기

위와 같이 조절하면 포스팅 제목 부분의 크기는 작아진 반면, 본문은 처음 그대로의 위치에 남아있게 되다 보니 제목과 본문 사이의 간격이 넓게 벌어지는 문제가 있습니다. 제목과 본문 사이의 간격을 줄이기 위해 다음과 같이 조절합니다. 

제목 배경 이미지 크기 조절 후 멀어진 본문과의 거리

• "CSS"의 439열 부근에서 "#tt-body-page #container"를 찾습니다. (아래 이미지 참조)
• container는 본문 부분을 의미하며 "padding-top: 339px"으로 위와 339px을 벌려놓은 부분을 줄여줍니다. (예시에서는 140px로 줄였습니다)

티스토리 블로그 제목과 본문 사이 간격 조절하기

 

■ 결과 확인

위와 같이 모든 조절 완료 후 최종 모습입니다. 각자 원하는 대로 조절하여 사용하시면 되겠습니다.

티스토리 타이틀 배경 크기 설정완료 후 모습