티스토리 블로그를 운영할 때 그냥 글만 쓰는 것 보다 가독성이 좋게 꾸미는 것도 중요하다 생각합니다.
물론 너무 꾸미는 것은 SEO상 좋지 않겠지만, 눈에 띌 수 있고 구분이 될 정도면 되지 않을까 합니다.
그래서 오늘은 티스토리 소제목 꾸미는 방법에 대해 알아보겠습니다.
여기에서는 H2, H3 (글을 쓰면서 설정할 수 있는 제목 1, 제목 2 등입니다)를 CSS를 통해 변경할겁니다.
현재 제가 사용하고 있는 서식이기도 하죠. 그러면 시작하겠습니다.
티스토리 소제목 꾸미기
- 블로그 설정 - 스킨 편집 - CSS
- Ctrl + F
- 'entry' 검색
이 과정을 거치시면 아래와 같은 것들이 보이실겁니다.
h1부터 h4까지 양식이 나와있는 화면이 말이죠.
보통 위 화면에서 h1처럼 되어있을텐데, 저는 글의 제목인 h1을 제외하고 h2 ~ h4를 위와 같이 변경했습니다.
물론 글씨 크기나 색상, 선 두께 등은 변경하실 수 있습니다.
저도 처음 받은 양식과 다르게 변경한 부분이니까요.
참고로
- h1 : 전체 글 제목
- h2 : 티스토리 본문 내의 '제목 1'
- h3 : 제목 2
- h4 : 제목 3
이라고 생각하시면 될 것 같습니다.
당연히 스킨마다 약간의 차이는 있을 수 있습니다.
변경 방법은 크게 2가지입니다.
전부 일괄적으로 변경하는 방법과, 각각 다른 설정으로 변경하는 방법이 있습니다.
참고로 저는 h2, h3, h4를 다르게 설정했지만, 이건 취향 문제이므로 알아서 선택하시면 되겠습니다.
1. 일괄 변경
아래 양식을 복사하신 다음, CSS 내에 아무 곳에나 붙여넣기 하시면 됩니다.
/* 본문 소제목 꾸미기 */
.article-view h1,
.article-view h2,
.article-view h3,
.article-view > h4 {
margin : 52px auto 10px 0px
padding: 2px 10px 2px 0px;
border-bottom: 3px solid; /* 하단 선 두께 3px */
border-left: 15px solid; /* 좌측 선 두께 15px */
border-color: #000066;
color: #000066; /* 글자 색 */
}
그러면 일괄적으로 적용됩니다.
2. 개별 변경
각 소제목마다 설정을 다르게 적용하고 싶으신 분들도 분명 계실겁니다.
그런 분들은 entry를 검색하신 후, 각 h2 h3 h4를 찾으셔서 아래 양식을 붙여넣기 해주시면 됩니다.
.entry-content h2 {
clear: both;
margin: 29px 0px 22px;
font-size: 1.5em;
line-height: 1.5;
color: rgb(10, 41, 19);
border-bottom: 3px solid; /* 하단 선 두께 3px */
border-left: 12px solid; /* 좌측 선 두께 12px */
border-color: #0A2913;
font-weight: bold!important;
}
폰트 크기부터 선 두께, 색상 등 본인 취향껏 입력하시면 됩니다.
여기까지 티스토리 소제목 꾸미는 방법에 대해 알아보았습니다.
CSS를 이용하는 방법이긴 하지만, 어렵지 않게 꾸밀 수 있으니 도움이 되었으면 좋겠네요.
