티스토리 북클럽 스킨 I 본문 상단 타이틀 수정 및 사이드바와 피드 여백 조정 방법

본문 상단 타이틀 및 여백 조정 방법

티스토리는 다른 블로그와의 다르게 HTML 형식으로 스킨의 변환이 가능합니다.

이번에는 가장 기본적으로 가독성을 높이기 위한 본문 타이틀(제목)을 수정하는 방법을 간단히 알아보겠습니다.

 

 

목차

 

 

 

본문 상단 타이틀 수정하는 방법

먼저 아래에 보이는 4곳을 수정하는 방법을 알아보겠습니다.

---

1. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다.

---

2. CSS에서 Ctrl + F를 이용해 post-cover { 를 검색합니다.

post-cover {

3. 변경할 내용은 아래와 같습니다.

• ① 타이틀(배경화면) 높이 조절
   1045번 줄 근처 height: 340px; / 340px 값을 내릴수록 타이틀 높이가 줄어듭니다. (200px 이하 설정이 불가)
• ② 배경 투명도 조절
   1059번 줄 근처 background-color: rgba(0,0,0,0.25); / rgba(0,0,0,0.75); 값을 높게 쓸수록 어둡고, 낮게 쓸수록 밝아집니다.
• ③ 제목 높이 조절
   1066번 줄 padding-bottom: 78px; / 값을 내릴수록 제목이 위치가 낮아집니다.
• ④ 제목 폰트 두께 조절
   1078번 줄 font-weight: 300; / weight: 700; 값을 올릴수록 폰트가 두꺼워집니다.
• 마지막으로 '적용' 버튼을 누릅니다.

728x90

 

피드 및 사이드바 상단 여백

아래의 2곳을 수정하는 CSS 위치입니다.

---

1. CSS에서 Ctrl+F를 누르고 #content으로 검색합니다.

#content

 

2. 변경할 내용은 아래와 같습니다.

• ⑤ #content 영역을 수정하면 커버 상단의 간격이 줄어듭니다.
  339번 줄 근처 padding: 72px 0 60px; 를 padding: 30px 0 60px; 로 수정합니다.
• ⑥ #aside 영역을 수정하면 사이드바 상단의 간격이 줄어듭니다.
  353번 줄 근처 padding: 75px 0 32px; 를 padding: 30px 0 32px; 로 수정합니다.
• 참고로 padding: 30px 0 60px의 의미는 위쪽 간격 30px, 좌/우 간격 0, 아래쪽 간격 60px의 의미입니다.
  간격을 적용해 보시고 원하는 간격으로 30px의 수치를 변경하시면 됩니다.
• 마지막으로 '적용' 버튼을 누릅니다.
• (개인별 차이가 있으니 미리보기를 통해 확인 하면서 적당한 간격으로 조정하세요.)

 

타이틀과 본문 사이의 여백 조정

보통 #content와 #aside를 수정하면 본문까지 여백이 조정되지만 광고가 들어가면 여백이 틀어지는 경우가 있는데 이때 상단 타이틀과 본문 사이의 여백을 따로 수정하는 CSS의 위치입니다.

---

1. CSS에서 Ctrl+F를 누르고#tt-body-page#container { 을 검색합니다.

#tt-body-page #container {

2. 변경할 내용은 아래와 같습니다.

• 439번 줄 근처 padding-top:339px / 339px 값을 내릴수록 간격이 줄어듭니다.
  PC만 생각하면 200px도 좋지만, 모바일에서는 너무 좁게 되므로 250 정도가 좋습니다.
  
• 마지막으로 '적용' 버튼을 누릅니다.
• (개인별 차이가 있으니 미리보기를 통해 확인 하면서 적당한 간격으로 조정하세요.)

 

마무리

이번에 수정한 값은 나중에 애드센스 광고 등 다른 변경 사항들이 계속해서 쌓여가면 다시 수정이 필요할 수도 있습니다.

이외에도 CSS의 코드를 조금씩 변경하면 좀 더 멋진 나만의 블로그를 만들 수 있습니다.

다만 CSS의 코드 수정 시 /* 스타일 코드 삽입 */ 또는 <!-- HTML -->을 꼭 넣어주어 수정한 부분을 표시해 주시기 바랍니다.

 

Living

 

 

 

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"