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

 

 

이 글은 📝티스토리 본문 font-size만 수정하는 방법📝을 안내

🔗 티스토리 본문 상단의 타이틀 영역을 수정하는 방법은 여기를 참고

---

 

 

1️⃣ 이슈 체크

티스토리 스킨 편집 후 이런 저런 테스트를 하다 보니까

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는 그대로인데 본문만 줄어들었다, 매우 흡족!

이제 에디터 사용하면서 스트레스 받는 일은 없을 듯😌