본문 바로가기

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

2020. 4. 3. 댓글 3

이 블로그에는 현재 가장 최근에 티스토리에서 공개한 Book Club 스킨이 적용되어 있습니다. 이 스킨을 사용하기 전에 Magazine (매거진) 스킨을 적용했었습니다. 매거진 스킨도 나름 깔끔하고 괜찮은 것 같습니다.

 

티스토리의 신규 스킨 Magazine으로 변경해보았습니다

티스토리에서 지난 25일에 공개한 Magazine 스킨으로 변경해보았습니다. 레이아웃은 이전과 거의 동일합니다. 댓글 시스템은 티스토리 기본 댓글과 Disqus 댓글을 동시에 표시했었지만 Disqus 댓글 사용 빈도가 거..

avada.tistory.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

 

댓글3