티스토리 매거진 스킨: 본문 글자 크기 변경하는 방법

이 블로그에는 현재 가장 최근에 티스토리에서 공개한 Book Club 스킨이 적용되어 있습니다. 이 스킨을 사용하기 전에 Magazine (매거진) 스킨을 적용했었습니다. 매거진 스킨도 나름 깔끔하고 괜찮은 것 같습니다. 이 글에서는 티스토리 매거진 스킨에서 본문 글자 크기를 변경하는 방법에 대해 간단히 살펴보겠습니다.

참고로 워드프레스의 경우 아바다, 뉴스페이퍼, Divi 등의 테마에서는 쉽게 본문 글자를 비롯한 다양한 요소(헤더, 메뉴, 푸터, 위젯...)의 글자 크기 등을 변경할 수 있습니다. 테마 옵션에서 해당 옵션이 제공되지 않으면 약간의 CSS 코드를 사용하여 변경이 가능합니다.

워드프레스 글자 크기 변경하는 방법 (제목, 본문 등) - 워드프레스 정보꾸러미

티스토리 매거진 스킨에서 본문 글자 크기 변경하는 방법 (글자 크기 키우기/줄이기)

저는 티스토리 스킨을 변경하거나 워드프레스 테마를 변경한 후에 가장 먼저 글자 크기를 키웁니다. 이제 노안이 진행되고 있어 글자가 작으면 눈이 금방 피로해져서 먼저 글자 크기를 키워서 가독성을 향상시키는 작업부터 합니다.

매거진 스킨에서 블로그 글의 본문 텍스트 크기를 조정하려면 다음과 같은 CSS 코드를 사용할 수 있습니다.

/* 매거진 스킨 본문 글자 크기 변경 */
.box_article .article_cont p {
    font-size: 20px;
    line-height: 32px;
}

숫자를 높이거나 낮추어서 적절한 글자 크기와 줄간격(line height)을 조정할 수 있습니다. 당연한 말이지만 숫자를 높이면 글자 크기가 증가하고 숫자를 낮추면 글자 크기가 줄어듭니다.ㅎㅎ

위의 CSS 코드를 적용해보면 다음과 같이 본문 글자 크기가 늘어난 것을 확인할 수 있습니다.

글 제목의 크기를 조정하고 싶은 경우에는 다음과 같은 CSS 코드를 사용해볼 수 있습니다.

/* 매거진 스킨 제목 크기 변경 */
@media screen and (min-width: 743px) {
.box_article_tit .txt_sub_tit {
    font-size: 29px;
    line-height: 40px;
}
}

위의 코드는 해상도가 743px 이상인 기기에서만 작동합니다. 위의 코드를 적용하면 제목 크기가 줄어듭니다. 마찬가지로 숫자를 적절히 조정하도록 합니다. 글자색을 변경하고 싶은 경우 color: #4572cf;와 같이 추가할 수 있습니다.

CSS 컬러에 대해서는 다음 문서를 참고해보세요:

CSS Colors

티스토리에서 CSS 코드를 추가하려면, 꾸미기 > 스킨 편집 > html 편집을 클릭하고 CSS 탭을 선택한 다음, CSS 탭 화면에서 맨 아래에 추가하도록 합니다.

작업을 하기 전에 미리 스킨을 저장하면 추후에 문제가 될 경우 되돌릴 수 있습니다.

마치며

이상으로 티스토리 매거진 스킨에서 본문 글자 크기를 조정하는 방법에 대해 살펴보았습니다. 다른 티스토리 스킨에서도 비슷한 방법으로 글자 크기를 변경할 수 있습니다. 하지만 실제 코드는 약간 다를 수 있습니다. 기본적인 CSS 사용법을 익히면 이런 작업을 수월하게 할 수 있습니다.

font-size와 line-height 속성에 대해서는 W3 Schools 문서를 참고해보세요:

• https://www.w3schools.com/cssref/pr_font_font-size.asp
• https://www.w3schools.com/cssref/pr_dim_line-height.asp

참고:

티스토리 Magazine 스킨에 브레드크럼을 추가하는 방법

티스토리 Book Club 스킨 수정: 본문 글자 크기 변경하는 방법

티스토리 스킨 고래 스킨 4.0으로 변경