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

2021. 2. 12. 00:17 | 댓글 4

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

 

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

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

avada.tistory.com

티스토리 오디세이 (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">[##_article_rep_title_##]</h2>

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

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

 

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

티스토리 블로그에 목차를 표시하려는 경우 목차 스크립트 파일을 이용하여 목차를 추가할 수 있습니다. 보통의 경우 목차를 표시할 자리에 수동으로 HTML 코드를 추가해야 하는데, 그러면 번거

avada.tistory.com

마치며

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

참고:

avada.tistory.com/2146

 

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

브레드크럼(이동 경로)을 표시하면 SEO에 도움이 됩니다. 그리고 브레드크럼을 추가하면 구글 서치 콘솔에서 ‘itemListElement’ 입력란이 누락되었습니다와 같은 오류가 발생하지 않는 것 같습니

avada.tistory.com

avada.tistory.com/1828

 

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

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

avada.tistory.com

 

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

댓글을 달아 주세요

">
  1. thumbnail
    空空(공공)

    다른 스킨도 가능한가요?

  2. thumbnail
    허니바이브

    안녕하세요! 북클럽과 오디세이 스킨 중에 고민하고 있는데요.. 오디세이에 치명적인 버그나 오류 개선사항만 없다면 오디세이를 쓰고 싶은데.. 혹시 둘 중에 어떤게 좀더 애드센스 적용 및 수익에 나을까요?ㅠ 물론 기준은 다 다르겠지만, 소스 수정은 코딩을 할 줄 알기 때문에 거부감이 없습니다. 하지만 최대한 기본 스킨에서 많이 손을 안 대고 싶습니다. 로딩이 좀 빠르고 애드센스 자동 광고 배치했을 때 잘 뜨는 걸 찾고있어요! 모바일에서도 목록 상단, 하단 광고 다 넣을 수 있는건 북클럽 오디세이 공통인가요? 다만 오디세이는 메인 썸네일 이미지가 좀 흐리게 깨져서 그게 수정이 되는건지 좀 걸립니다..아시는 선에서 조언 주시면 감사드리겠습니다!

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2021.04.06 06:46 신고

      안녕하세요, 허니바이브님. 답장이 늦어 죄송합니다. 스킨은 말씀하신 것 중에서 어느 것이든 크게 상관 없을 것 같습니다. 북클럽 스킨으로도 애드센스 수익이 높게 나온다는 분도 계시고요. 애드센스 수익은 어떤 콘텐츠를 제공하느냐에 크게 달려 있는 것 같습니다.

      개인적으로는 북클럽 등 여러 스킨을 거쳐 현재 고래스킨으로 정착했습니다. 앞으로 한동안 이 스킨을 사용할 것 같습니다.

      https://avada.tistory.com/1828