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

2020. 4. 3. 00:18 | 댓글 6

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

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

 

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

워드프레스에서 제목, 본문 등의 글자 크기를 변경하고 싶은 경우가 많을 것입니다. 테마에서 글자 크기를 변경하는 옵션을 제공하면 테마 기능을 사용할 수 있고, 그렇지 않으면 CSS를 사용하여

www.thewordcracker.com

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

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

매거진 스킨에서 블로그 글의 본문 텍스트 크기를 조정하려면 다음과 같은 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 Colors Color Names Supported by All Browsers All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors): For a full overview of CSS color

www.w3schools.com

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

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

마치며

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

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

참고:

 

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

브레드크럼(Breadcrubmb; 이동 경로)을 추가하면 SEO(검색엔진 최적화)에 도움이 될 수 있습니다. 지난 달에 이 티스토리 블로그의 스킨을 Magazine으로 변경했습니다. 티스토리의 신규 스킨 Magazine으로 변경해..

avada.tistory.com

 

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

이 블로그에는 현재 최근 공개된 Book Club (북 클럽)이라는 스킨이 적용되어 있습니다. 북 클럽 스킨에서는 본문 글자 크기가 0.9375em으로 설정되어 글자가 다소 작게 느껴질 수 있습니다. 저는 스킨을 변경하면..

avada.tistory.com

 

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

작년 8월 말부터 공식 티스토리 스킨 중 하나인 북클럽 스킨을 사용하다 며칠 전에 티스토리 무료 스킨인 고래 스킨으로 변경했습니다. 이 스킨은 네이버, 구글 검색 엔진에 최적화되어 있고 구�

avada.tistory.com

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    IT세레스

    매거진 스킨 정말 괜찮은거 같습니다.

  2. thumbnail
    空空(공공)

    잔 아직 예전 스킨을 적용하고 있습니다..ㅋ

  3. thumbnail
    커피두잔째

    좋은 정보 감사합니다!

    궁금한 게 있어서 댓글 남깁니다.

    1. 매거진 스킨 본문 글자 크기를 변경하고 싶습니다. 이를 위해서

    알려주신 CSS 코드를 "스킨 편집" 중 CSS 부분 제일 마지막에 삽입하면 되는건가요?

    알려주신 코드는 아래와 같습니다.

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


    2. 위 코드를 CSS 맨 마지막 부분에 삽입할 경우, 기존에 포스팅했던 부분에도 적용 되는 건가요?

    삽입했는데, 기존 포스팅 본문 글자 크기는 변경이 없어서 질문드립니다!

  4. thumbnail
    커피두잔째

    와! 해결되었습니다!

    정말 감사합니다 :)

    좋은 포스팅 계속 보기 위해, 구독과 하트 눌렀습니다.
    다시 한번 더 감사합니다!