티스토리 고래스킨 소제목 바꾸는 법 (코드 제공)

코딩 능력자들이 무료로 제공하는 티스토리 스킨 중 고래스킨을 사용 중입니다. 깔끔하고 군더더기 없어서 참 좋은데 소제목 부분이 조금 아쉽더라고요. 고래스킨 소제목 꾸미기 방법을 알려드리고 스타일 바꾸는 코드도 제공해 드릴게요.

1. 티스토리 소제목의 중요성 (SEO)

티스토리 소제목을 꾸미는 것은 단순히 예뻐보이기 위함이 아닙니다. 색깔이나 크기를 보기 좋게 꾸며줌으로써 포스팅을 읽는 사람의 가독성을 높여주고, 결국 이탈 없이 끝까지 읽게 하여 체류 시간을 늘리고, 궁극적으로 광고 수익을 높이는 수단이 되는데요.

뿐만 아니라 소제목 없이 본문 사이즈로만 포스팅을 작성한다던지, 소제목을 잘못된 방법으로 사용하는 것보다 소제목을 제대로 사용하는 것이 구글 SEO 점수를 높게 받을 수 있어 검색 노출에 유리한 것도 티스토리 소제목의 중요성 중 하나입니다. 이내용에 대해서는 이전 포스팅에서 자세히 다뤘으니 잘 모르셨거나, 헷갈리시는 분들은 꼭 읽어보시기를 권해요.

2. 고래스킨 소제목 꾸미는 법

일반적인 티스토리 스킨은 제목 1(h2), 제목 2(h3), 제목 3(h4)의 크기가 순서대로 작아집니다. 아래 이미지 처럼요.

그런데 티스토리 고래스킨은 소제목의 크기가 제목 1부터 제목 3까지 모두 동일해요. (이 부분은 SEO 점수를 높이기 위한 약간의 꼼수인데, 개인적으로는 가독성 부분에서 좀 별로라서 소제목 스타일을 바꿔주기로 했어요.)

위의 이미지처럼 소제목 1부터 3까지 모두 같은 색깔, 같은 크기인 스타일을 아래처럼 바꿔줄 겁니다.

▼ 스타일 변경 후의 고래스킨 소제목

소제목1은-주황색-소제목2는-밝은주황색-소제목3은-노랑색 — 스타일을 적용한 소제목

2-1. CSS에서 소제목 부분 찾기

소제목 스타일을 꾸며주는 것은 일반스킨이나 고래스킨 모두 CSS에서 바꿔줍니다. 설정에서 스킨편집 → 스킨편집에서 html 편집 → CSS 편집으로 들어가면 되는데요. 찾기 어려우신 분들은 CSS 화면까지 가는 과정을 자세하게 설명한 이전 포스팅을 참고하시는 것도 도움이 되실 거예요.

CSS 편집 화면으로 들어왔다면 찾기(컨트롤+F)를 이용하여 'h2'를 검색해 줍니다. 그럼 아래 코드를 찾을 수 있을 거예요.

이 부분이 바로 고래스킨 소제목을 모두 같은 크기, 같은 색깔로 바꿔준 CSS 스타일 코드인데요.

2-2. 기존 CSS 스타일 감추기

먼저 위의 코드를 무력화시켜줍니다. 이것을 코딩에서는 '주석처리'라고 하는데요. 사람의 눈으로는 읽을 수 있지만, 컴퓨터는 읽지 못하도록 주석처리를 해주는 거예요. 방법은 아주 쉽습니다.

해당 코드 앞뒤로 /* 과 */를 넣어주기만 하면 끝이에요. 이렇게 하면 코드의 색깔이 초록색으로 바뀌면서, 우리에게는 보이지만 컴퓨터에게는 보이지 않는 상태가 됩니다. 코드를 아예 삭제해도 되지만, 혹시라도 코드가 꼬이거나 잘못 적용했을 때를 대비해 이렇게 감춰두었다가, 문제가 생기면 주석코드만 지워주면 원상 복귀되니 되도록 삭제보다는 주석처리를 권장해요.