티스토리 포스터 스킨: 제목 글자 크기 변경하기

티스토리 포스터 스킨에서 포스트의 제목과 본문의 글자 크기를 변경하고 싶은 경우 간단한 CSS로 변경이 가능합니다. 다른 티스토리 스킨에서도 비슷한 방법으로 글자 크기, 색상 등을 변경할 수 있습니다. (스킨에 따라 실제 코드는 조금씩 다를 수 있습니다.)

티스토리 Poster 스킨: 제목, 본문 글자 크기 변경하기

포스터 스킨 포스트 제목 글자 크기 및 색상 변경하기

글 제목 글자 크기를 변경하려면 꾸미기 > 스킨 편집 > HTML 편집 > CSS 탭으로 이동하여 맨 아래에 다음과 같은 코드를 추가하도록 합니다.

/* 포스터 스킨 포스트 타이틀 */
.hgroup h1 {
     font-weight: 600;
    font-size: 1.5em;
    line-height: 1.4444em;
    color: #1587cc;
}

글자 크기와 폰트 굵기, 컬러 값을 원하는 대로 수정하시기 바랍니다. 위의 코드를 적용하면 다음 그림과 같이 포스트 타이틀이 변경됩니다.

포스트 본문 글자 크기 변경하기

저는 티스토리 블로그의 스킨을 변경하거나 워드프레스 테마를 변경하는 경우 가장 먼저 본문 글자 크기를 키우는 작업부터 합니다. 나이가 들다 보니(?) 이제 글자가 작은 화면을 보면 눈이 금방 피로해집니다. (나이 드신 분이 많이 방문하는 사이트라면 반드시 사이트의 글자 크기를 대폭 키우시기 바랍니다!!!)

Poster 스킨에서 포스트 본문 글자 크기를 키우려면 다음 CSS 코드를 추가합니다.

/* 포스터 스킨 포스트 본문 글자 크기 */
.entry-content p {
    font-size: 1.15em;
    line-height: 1.9em;
}

마찬가지로 글자 크기 값은 적절히 변경하세요. 행간(line-height) 값도 적절히 변경해주세요.

포스터 스킨 소제목 스타일 변경하기

포스터 스킨에서 소제목(헤딩) 스타일을 위의 그림과 같이 변경하고 싶은 경우 다음 글에서 "티스토리 소제목 (헤딩) 스타일 변경" 부분을 참고해보세요. 북클럽(Book Club) 스킨을 기준으로 설명했지만 Poster 스킨에서도 마찬가지로 적용이 가능합니다.

티스토리에 목차 표시하는 방법 (북클럽 스킨)

보너스: 글 제목 아래의 작성자 및 발행날짜 글자 크기와 색상 변경하기

글 제목 아래의 메타 정보(작성자 및 발행 날짜)의 폰트 크기와 컬러를 변경하고 싶은 경우 다음 CSS 코드를 사용할 수 있습니다.

/* 메타 정보 (포스트 작성자 및 날짜) 컬러, 글자 크기 변경 */
.hgroup .post-meta {
    font-size: 0.92em;
    color: #b2b2b2;
}

기본적인 CSS를 익히면 이런 작업은 쉽게 가능합니다. 티스토리나 워드프레스에서 기본적인 CSS 적용 방법에 대한 교육이 필요하신 분은 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

티스토리 블로그에서 CSS 코드 추가하기

티스토리에서 CSS를 수정하는 경우, 저는 직접 CSS 코드를 수정하기보다는 CSS 탭의 맨 아래에 추가하는 방식을 선호합니다. 워드프레스를 이용해 보신 분이 계시다면 아마 왜 그런지 알 것입니다. 워드프레스에서는 테마를 업데이트하면 수정 사항이 초기화되기 때문에 추가 사항이나 수정 사항은 차일드 테마를 이용하여 적용합니다. 그러면 테마를 업데이트하더라도 수정 사항이 날아가지 않습니다.

티스토리에서는 스킨을 업데이트할 일이 거의 없지만, 혹시 업데이트 할 일이 있다면 수정 사항을 처음부터 다시 적용해야 합니다. CSS 탭의 맨 아래에 수정/추가사항을 부가하는 방식으로 수정하면, 내가 수정한 코드를 쉽게 알 수 있고, 추후 스킨을 업데이트하더라도 추가한 CSS 코드만 복사하여 붙여넣기 하면 됩니다.

티스토리 블로그에서 CSS 코드를 넣으려면 티스토리에 로그인한 상태에서 꾸미기 > 스킨 편집 > html 편집 > CSS 탭을 차례로 클릭한 다음, 맨 아래에 코드를 추가하시기 바랍니다.

참고:

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

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