블로그 스팟 폰트 크기 조정하는 방법과 HTML 편집 위치 찾기

블로그 스팟 폰트 크기가 기본 테마에서 너무 작게 보이면 글 목록이나 제목 영역의 가독성이 떨어질 수 있습니다. 특히 무료 테마나 외부에서 받은 테마를 적용한 경우에는 관리자 화면의 기본 맞춤 설정만으로 글자 크기와 굵기를 원하는 만큼 바꾸기 어려운 경우가 많습니다.

저도 블로그 스팟 테마를 수정할 때 처음에는 어디에서 폰트 값을 바꿔야 하는지 찾기가 쉽지 않았습니다. 워드프레스처럼 테마 편집 메뉴가 직관적으로 나뉘어 있지 않고, Blogger는 HTML 편집 화면 안에서 CSS 코드까지 함께 찾아야 하기 때문입니다. 다행히 크롬 개발자 도구를 이용하면 실제 화면에서 어떤 CSS가 적용되고 있는지 바로 확인할 수 있습니다.

이번 글에서는 블로그 스팟 폰트 크기를 직접 확인하고 수정하는 흐름을 정리했습니다. 개발자 도구로 제목 영역을 선택한 뒤 font-size, font-weight, line-height 값을 확인하고, Blogger 관리자 화면의 HTML 편집에서 같은 코드를 찾아 수정하는 방식입니다. 단순히 “폰트를 키우면 된다”가 아니라, 어떤 코드를 찾아야 하는지와 저장 전 어떤 부분을 조심해야 하는지까지 함께 정리했습니다.

블로그 스팟 폰트 크기가 작게 보였던 문제

테마를 적용한 뒤 글 목록 제목이 모바일 화면에서 작고 약하게 보이는 경우가 있었습니다. 본문 글자는 괜찮아도 메인 화면의 게시글 제목이 눈에 잘 들어오지 않으면 방문자가 글을 선택하기 전부터 페이지가 답답하게 느껴질 수 있습니다.

이럴 때 Blogger 맞춤 설정 메뉴에서 폰트 옵션을 먼저 찾아볼 수 있지만, 사용하는 테마에 따라 원하는 항목이 나오지 않을 때가 많습니다. 결국 실제 적용된 CSS 선택자를 찾아서 직접 수정해야 했고, 이 과정에서 가장 도움이 된 것이 브라우저 개발자 도구였습니다.

크롬 개발자 도구에서 제목 CSS 확인하기

블로그 스팟 폰트 크기를 수정하려면 먼저 어떤 CSS가 해당 글자에 적용되는지 확인해야 합니다. 크롬, 엣지, 웨일 같은 브라우저에서 블로그 화면을 연 뒤 F12 키를 누르면 개발자 도구가 열립니다. 여기서 왼쪽 위의 선택 도구를 누르고, 수정하려는 제목이나 글자 부분을 클릭하면 오른쪽 스타일 영역에서 관련 CSS 정보를 볼 수 있습니다.

이번 경우에는 글 목록 제목에 .index-post .post-info > h2 선택자가 적용되어 있었습니다. 스타일 영역을 보면 font-size, font-weight, line-height 같은 값이 함께 표시됩니다. font-size는 글자 크기, font-weight는 글자 두께, line-height는 줄 간격과 관련된 값입니다.

이 단계에서 중요한 것은 눈에 보이는 글자만 보고 대충 수정하는 것이 아니라, 실제 적용 중인 선택자를 정확히 확인하는 것입니다. 같은 h2 제목이라도 테마에 따라 .post-title, .post-info, .index-post처럼 선택자 구조가 다를 수 있기 때문입니다.

HTML 편집 화면으로 들어가는 위치

CSS 선택자를 확인했다면 Blogger 관리자 화면으로 이동합니다. 왼쪽 메뉴에서 테마로 들어간 뒤, 현재 적용 중인 테마의 메뉴를 열면 HTML 편집 항목을 찾을 수 있습니다. 여기서 테마 전체 코드가 열리기 때문에 수정 전에는 백업을 한 번 해두는 것이 좋습니다.

블로그 스팟은 HTML 편집 화면에서 실수로 괄호나 세미콜론을 지우면 레이아웃이 깨질 수 있습니다. 그래서 바로 수정하기보다 먼저 검색으로 위치를 찾고, 필요한 값만 바꾸는 방식이 안전합니다. 특히 처음 수정할 때는 글자 크기 하나만 바꾼 뒤 저장하고 화면을 확인하는 식으로 진행하는 편이 좋습니다.

HTML 편집에서 CSS 코드 검색하기

HTML 편집 화면이 열리면 코드가 길게 나오기 때문에 눈으로 스크롤하면서 찾는 것은 비효율적입니다. 개발자 도구에서 확인한 선택자 일부를 복사한 뒤 Ctrl + F로 검색하면 훨씬 빠르게 해당 위치를 찾을 수 있습니다.

예를 들어 이번 화면에서는 .index-post .post-info > h2 선택자를 검색했습니다. 다만 Blogger HTML 편집기에서는 띄어쓰기나 줄바꿈이 조금만 달라도 검색이 되지 않는 경우가 있습니다. 이럴 때는 전체 선택자를 그대로 붙여 넣기보다 .post-info > h2처럼 일부만 검색하거나, font-size:22px처럼 주변 값으로 다시 찾아보면 더 잘 나올 수 있습니다.

블로그 스팟 폰트 코드 위치를 찾은 뒤 수정할 값

검색으로 위치를 찾으면 아래와 비슷한 CSS 코드가 나옵니다. 여기서 블로그 스팟 폰트 크기와 관련된 핵심 값은 font-size, font-weight, line-height입니다.

.index-post .post-info > h2 {
  float: left;
  width: 100%;
  overflow: hidden;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4em;
  text-decoration: none;
  margin: 0;
}

font-size: 22px; 값은 글자 크기를 의미합니다. 제목이 너무 작다면 24px 또는 26px처럼 조금씩 올려볼 수 있고, 모바일에서 너무 크게 보이면 20px 정도로 낮출 수도 있습니다. font-weight: 800;은 글자 굵기라서 600, 700, 800 사이에서 조정하는 경우가 많습니다. line-height: 1.4em;은 제목이 두 줄로 표시될 때 줄 사이 간격에 영향을 줍니다.

한 번에 여러 값을 크게 바꾸면 결과를 판단하기 어려워집니다. 먼저 font-size만 조정해보고, 제목이 너무 무겁게 보이면 그 다음에 font-weight를 낮추는 방식이 안전했습니다.

저장하기 전에 확인할 부분

CSS 값을 바꿨다면 오른쪽 위 저장 버튼을 눌러 테마에 반영합니다. 이때 중괄호 { }, 콜론 :, 세미콜론 ;이 빠지지 않았는지 확인해야 합니다. 폰트 크기 숫자만 바꿔야 하는데 실수로 선택자나 괄호를 지우면 저장 후 화면이 깨질 수 있습니다.

저장 후에는 PC 화면과 모바일 화면을 모두 확인하는 것이 좋습니다. PC에서는 좋아 보이는 크기라도 모바일에서는 제목이 두 줄 이상으로 밀리거나 카드 영역을 벗어날 수 있습니다. 반대로 모바일에 맞추면 PC에서 너무 작아 보일 수 있기 때문에, 실제 방문자가 많이 보는 화면 기준으로 조정하는 편이 낫습니다.

수정 후 달라진 점

블로그 스팟 폰트 크기를 조정한 뒤에는 글 목록 제목이 이전보다 더 또렷하게 보였습니다. 특히 모바일 화면에서 제목이 작게 눌려 보이던 문제가 줄었고, 글 카드 안에서 제목과 설명 영역의 구분도 더 분명해졌습니다.

이 작업은 큰 기능을 추가하는 설정은 아니지만, 블로그 첫 화면의 가독성에 직접 영향을 줍니다. 방문자가 글 목록을 볼 때 제목이 잘 보이면 클릭할 글을 고르기 쉬워지고, 사이트 전체가 조금 더 정돈된 느낌을 줍니다.

자주 묻는 질문

관련 글 추천

• 플립보드 블로그 공유가 필요한 이유와 Flip it 확장 프로그램 사용 방법
• 블로그스팟 이미지 앨범 찾는 방법과 원본 사진 저장하기
• 블로그스팟 댓글 비활성화 방법과 스팸 댓글 차단 설정
• 블로그 SEO 관련 질문 추가했더니 검색 구조가 달라졌던 경험