여행준비하기/디지털노마드

[블로그] 티스토리 Odyssey 스킨 - 인용(quote) 글씨 크기 변경 방법

Carpet Rider 2025. 2. 16. 23:06
반응형

 

티스토리 오디세이 스킨에서 인용(quote) 글씨 크기를 변경하려면, CSS 코드를 수정해야 합니다. 다음 방법을 따라 적용해 보세요.


1. 티스토리 관리자 페이지 접속

  1. 티스토리 블로그에 로그인합니다.
  2. 관리 > 꾸미기 > 사용중인 스킨 > 편집

2. CSS 파일 수정

  1. HTML/CSS 편집을 클릭합니다.
  2. style.css 파일을 찾습니다.
  3. CSS편집란을 클릭 후, ctrl+F로 검색창에 blockquote을 검색합니다.

📌 모든 인용문 크기를 줄이고 싶다면

.article-view blockquote모든 인용문(blockquote)에 적용되는 기본 스타일이에요.
font-size : 원하는 폰트 크기로 조정합니다.

.article-view blockquote {
  font-size: 14px; /* 기존 16px에서 14px로 줄이기 */
}

.article-view blockquote의 font-size 값을 조정하면 블로그의 세가지 스타일( style1, style2, style3 )인용문 크기에 영향을 받을 수 있어요. 원치 않으면 수정하지 않는 게 좋아요.  만약 하나의 특정 인용 스타일을 변경하고 싶다면 아래를 참고하세요.

인용이 3가지 스타일이 있죠. 아래와 같습니다. 

저는 style3 인용의 폰트만 줄이고 싶어서 예를 들어보겠습니다. 

📌 style3(blockquote[data-ke-style='style3'])만 변경할 경우

#article-view blockquote[data-ke-style='style3'] {
  border: 1px solid #dddddd;
  background-color: #fcfcfc;
  text-align: left;
  padding: 21px 25px 20px 25px;
  color: #666;
  font-size: 0.9em; /* 기본값 1em → 0.9em으로 줄이기 */
  line-height: 1.6; /* 줄 간격도 줄이고 싶다면 1.75 → 1.6 */
}

 

💡 폰트 크기 예시

  • 1em  (기본 크기, 변경 전)   0.9em (90% 크기로 줄이기)
  • 1em  (기본 크기, 변경 전)   1.1em (11% 크기로 키우기)
  • 14px → 원하는 픽셀 단위로 변경

📌 추가로 줄 간격(line-height) 조정 가능

폰트를 줄이면 줄 간격도 조정하는 게 좋을 수도 있어요.
아래처럼 line-height 값을 함께 변경하면 더 균형감 있게 보일 거예요.

 

제발 바꿔줘...
반응형