티스토리 오디세이 스킨 본문 글자 크기 조정하기 (Odyssey)

저는 티스토리 스킨을 바꾸거나 워드프레스 테마를 바꾸면 글자 크기를 키우는 작업부터 시작합니다. 이제 노안이 진행되고 있어서 글자 크기가 작으면 눈이 금방 피로해집니다.ㅠ 글자 크기를 키우는 작업은 그리 어렵지 않습니다. 기본적인 CSS만 알면 누구나 할 수 있습니다. 이 글에서는 티스토리 오디세이 스킨에서 본문 글자 크기를 조정하는 방법에 대해 살펴보겠습니다.

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

티스토리 오디세이 (Odyssey) 스킨 본문 글자 크기 조정하기

오디세이 스킨에서 본문 글자 크기가 그렇게 작은 것 같지는 않지만, 글자 크기가 작게 느껴지는 경우 간단한 CSS로 조정이 가능합니다.

오디세이 스킨에서 글자 크기 조정 전

 글자 크기를 조정하기 전의 화면인데요. 저는 글자 크기를 조금 키워보았습니다.

오디세이 스킨에서 글자 크기 조정 후

글자 크기를 조정하려면 꾸미기 > 스킨 편집을 클릭합니다.

스킨 편집 페이지가 표시되면 html 편집 버튼을 누릅니다.

CSS 탭을 클릭합니다.

맨 아래로 이동하여 다음 CSS 코드를 추가합니다.

/* 오디세이 스킨 글자 크기 조정 */
.article-view p {
    font-size: 1.2em;
    line-height: 1.9em;
}

.article-view li, .article-view li a {
    font-size: 1.15em;
    line-height: 1.8em;
}

적용 버튼을 클릭하여 저장하면 본문 글자 크기가 변경된 것을 확인할 수 있을 것입니다. 위의 코드에서 숫자값은 적절히 변경하도록 합니다. 이외에 위의 코드로 커버가 되지 않는 부분도 비슷한 방법으로 조정이 가능합니다.

모바일 화면의 글자 크기를 다르게 설정하고 싶은 경우 미디어 쿼리를 사용하도록 합니다. 오디세이 (Odyssey) 스킨을 살펴보니 모바일 기기에 대해서는 다음 미디어 쿼리가 사용되는 것 같습니다.

/* ----- media query - mobile ----- */
@media screen and (max-width: 1023px) {

// CSS 코드를 여기에 추가

}

위의 미디어 쿼리를 사용하면 기기 해상도가 1023px보다 작은 기기에 적용됩니다.

참고로 CSS 탭의 맨 아래에 코드를 추가해도 되지만, CSS 탭에서 해당 코드 부분을 찾아서 수정하는 것도 가능합니다. 하지만 그럴 경우 추후에 어느 부분의 코드가 수정되었는지 파악하기 쉽지 않을 수 있습니다. 그러므로 저는 가급적 원래 CSS 코드를 수정하기보다는 맨 아래에 수정되거나 부가되는 CSS 코드를 추가하는 방식을 선호합니다.

오디세이 스킨의 포스트 제목 태그 (h1 태그 vs. h2 태그)

오디세이 스킨을 살펴보니 포스트 제목에 H2 태그가 적용되어 있네요. 글 제목에는 H1 태그를 사용하는 것이 일반적입니다. h1 태그로 변경하고 싶은 경우 HTML 탭에서:

<h2 class="title-article">티스토리 오디세이 스킨 본문 글자 크기 조정하기 (Odyssey)</h2>

위의 라인을 찾아서 h2 부분을 h1으로 바꾸면 됩니다. 공지사항의 제목과 포스트 제목에 위의 HTML 코드가 사용되었을 것입니다.

H1 태그는 하나의 문서에 한 개만 사용하도록 합니다. 포스트 글을 작성할 때에는 H2, H3, H4... 등의 헤딩 태그를 사용할 수 있습니다. 헤딩 태그를 사용하여 소제목을 추가할 경우 목차 스크립트를 사용하여 목차를 자동 생성하는 것이 가능합니다.

티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법

마치며

이상으로 티스토리 오디세이 스킨에서 본문 글자 크기를 조정하는 방법에 대해 간략히 살펴보았습니다. 오디세이 스킨을 사용한 후에 애드센스 광고 수익이 늘었다는 분도 계시네요(우연의 일치일 수도 있겠지만...) 저는 고래스킨을 적용하여 사용하고 있습니다. 고래스킨도 SEO적인 측면에서 괜찮은 스킨 같습니다.

참고:

avada.tistory.com/2146

티스토리 오디세이 스킨에 브레드크럼 표시하기

avada.tistory.com/1828

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