티스토리 Letter 스킨 모바일 본문 제목 폰트 크기 변경

안녕하세요.

티스토리 Letter 스킨의 본문 제목 폰트 크기는 PC와 모바일 화면 모두 36px로 설정되어 있습니다. PC 화면에서는 폰트 사이즈가 적당해 보이지만, 모바일 화면에서는 너무 큰 것처럼 느껴집니다. 이번 포스팅에서는 모바일 화면 본문 제목의 폰트 사이즈를 바꾸는 방법을 알아보겠습니다.

좌측 : PC 화면 / 우측 : 모바일 화면

크롬 개발자 도구의 선택 도구를 활용하여 본문 제목을 선택해보면 PC, 모바일 모두 36px의 크기로 설정되어 있음을 알 수 있습니다.

(크롬 개발자 도구의 화살표 모양의 선택 도구 옆에 있는 아이콘을 클릭하면 모바일 화면 확인이 가능합니다.)

본문 제목을 선택하여 개발자 도구의 CSS 창을 보면 본문 제목의 속성은 위의 그림과 같이 설정되어 있습니다. 여기서 font-size를 모바일 화면에서는 다른 값으로 설정해야 합니다. Letter 스킨의 경우 모바일 화면은 가로 해상도 820px까지로 설정되어 있습니다. 제목의 폰트 사이즈는 해상도 구분 없이 설정되어 있으므로, 820px의 해상도까지 보여질 폰트 사이즈에 대한 CSS 속성을 추가하여야 합니다. 

.area_view_content .link_title {

font-size: 21px;

}

티스토리 HTML 편집기 CSS 창에서 2165행을 찾습니다. 그럼 @media screen and (max-width: 820px)라는 속성 값을 볼 수 있습니다.

이 영역 안에 위의 font-size 속성 값을 새로이 추가해주어야 합니다. 2169행부터 위의 속성 값을 추가하고 적용을 클릭합니다.

이제 블로그 모바일 화면을 새로 고침 해보면 위의 그림과 같이 폰트 사이즈 21px로 설정되었음을 확인할 수 있습니다. 폰트 사이즈는 개인 취향에 맞추어 적절하게 변경하시면 됩니다.

 

행복한 하루 보내세요.

감사합니다.