티스토리 스킨, 본문 글자 크기만 줄이고 싶다면?

 
 
이 글은 📝티스토리 본문 font-size만 수정하는 방법📝을 안내
🔗 티스토리 본문 상단의 타이틀 영역을 수정하는 방법은 여기를 참고

2025.07.27 - [LAYERED PAGE/PAGE] - 티스토리 스킨, 내 취향대로 편집하기(쉬움주의)

---

 

 

1️⃣ 이슈 체크

현재 사용하는 스킨의 본문 텍스트 크기가 너무 큼
기본으로 선택되는 '본문2'가 아니라 '본문3'을 선택해야
게시물 등록 이후 뷰 페이지 화면에서 적당한 크기가 됨..
매번 에디터 기본 폰트 크기를 변경해주는 것도 귀찮지만
tistory.com/manage/newpost/ 페이지 상단 에디터의
인용, 테이블, 리스트 등 스타일 적용 기능을 사용하면
텍스트 크기가 '본문2'에 자동으로 맞춰지는 이슈를 발견
 

인용, 테이블, 리스트 등 사용 시 고정된 font-size로 적용됨

 
 
 

2️⃣ 해결 방안

• body의 font-size만 수정(초간단) 
• ✖️ 이 경우 티스토리 화면 상의 모든 텍스트 크기에 영향을 미치게 됨
• article-view 관련 font-size, line-height 값을 수정(조금 귀찮) 
• ✔️ 본문에 관여하는 속성만 직접 수정할 수 있음, 그 외 화면 요소의 텍스트 크기는 영향을 받지 않음

 
 
 

3️⃣ 실행

'Tistory > 블로그 관리 > 꾸미기 > 스킨 편집' 페이지로 진입 후
CSS 모드에서 /* 텍스트 관련 */ 영역을 찾아서 수정(회색 글씨가 원본, 원본 기준으로 1단계씩만 축소)

/* 텍스트 관련 */
#article-view h2[data-ke-size] {
  font-size: 1.44em; /* 1.62em */
  line-height: 1.48; /* 1.46 */
}

#article-view h3[data-ke-size] {
  font-size: 1.25em; /* 1.44em */
  line-height: 1.55; /* 1.48 */
}

#article-view h4[data-ke-size] {
  font-size: 1.12em; /* 1.25em */
  line-height: 1.67; /* 1.55 */
}

#article-view p[data-ke-size='size18'] {
  font-size: 1em; /* 1.12em */
  line-height: 1.75; /* 1.67 */
}

#article-view p[data-ke-size='size16'] {
  font-size: 0.87em; /* 없던 걸 추가함 */
  line-height: 1.71; /* 1.75 */
}

#article-view p[data-ke-size='size14'] {
  font-size: 0.7em; /* 0.87em */
  line-height: 1.8; /* 1.71 */
}

 
/* 리스트 */ 도 찾아서 수정

/* 리스트 */
#article-view ul li,
#article-view ol li {
  margin: 0 0 3px 22px;
  font-size: 0.87em; /* 없었는데 추가함 */
  line-height: 1.7;
}

 
 
 

4️⃣ 결과

각 이미지 클릭해서 원본을 확인하길 권장

font-size 수정 전

font-size 수정 후

 
 
LNB는 그대로인데 본문만 줄어들었다, 매우 흡족!
이제 에디터 사용하면서 스트레스 받는 일은 없을 듯😌