 꾸미기){kind=link}
블로그 소제목은 검색자들로 하여금 자신이 글을 제대로 찾은 것인지 확인하는
수단이기도 합니다.
그리고 소제목을 통해서 내 글의 전문성이 드러나기 때문에 강조해주는 것이
좋겠죠!
티스토리, 워드프레스의 본문을 보면 깔끔하게 정리된 블로그들이 제법 많습니다.
블로그스팟도 이렇게 가능합니다! 코드 수정 한번만 하면 되는 작업이니
따라해보세요~
VTrick, Fiksioner v4 테마의 소제목 꾸미는 방법이 다르니 주의해서 수정하세요!
1. VTrick 본문 소제목 꾸미기
소제목(H2,H3,H4)의 형태를 수정하기 위해서는 HTML 편집으로 이동해야 합니다.
테마 > 맞춤설정 🔽 > HTML 편집
소제목을 구성하고 있는 코드를 찾아서 삭제한 후에 제가 알려드리는 코드만 복붙 하면 됩니다.
.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{font-size:17px;color:var(--title-color);line-height:1.3em;margin:0 0 1rem;font-weight:700}컨트롤 + F키를 눌러 검색창을 띄운 후에 위 기존 소제목(H2,H3,H4) 코드를 붙여넣습니다.
엔터키를 눌러주면 단번에 기존 소제목 코드를 검색하는데요!
검색된 코드는 노란색으로 표시되는데 삭제 후에 아래 코드를 붙여넣기 합니다.
.post-body h2, .post-body h3, .post-body h4 {
font-family: var(--title-font);
color: var(--title-color);
margin: 1.5em 0 1em;
}
.post-body h2 {
font-size: 28px;
background-color: #e6f2ff;
color: #0066cc;
padding: 10px 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.post-body h3 {
font-size: 24px;
border-bottom: 2px solid #3399ff;
padding-bottom: 5px;
}
.post-body h4 {
font-size: 21px;
color: #000080;
}
그리고 오른쪽 상단의 저장(💾)버튼을 눌러주시면 소제목 꾸미기가 완료됩니다.
상단에 제가 보여드린 소제목대로 본문에서 보여질겁니다 😀
그리고 :root 바로 위에 소제목 코드를 붙여넣기 합니다.
상단에 제가 보여드린 소제목대로 본문에서 보여질겁니다 😀
2.Fiksioner v4 본문 소제목 꾸미기
소제목 꾸며주는 코드는 동일합니다. 아래 코드를 복사합니다.
.post-body h2, .post-body h3, .post-body h4 {
font-family: var(--title-font);
color: var(--title-color);
margin: 1.5em 0 1em;
}
.post-body h2 {
font-size: 28px;
background-color: #e6f2ff;
color: #0066cc;
padding: 10px 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.post-body h3 {
font-size: 24px;
border-bottom: 2px solid #3399ff;
padding-bottom: 5px;
}
.post-body h4 {
font-size: 21px;
color: #000080;
}테마 > 맞춤설정 🔽 > HTML 편집
HTML 편집 메뉴로 들어가서 컨트롤+F키를 눌러서 'Indonesia'를 찾습니다.
이렇게 소제목 코드를 넣고 오른쪽 상단의 저장 버튼을 누르면 됩니다.
이제 다시 블로그스팟으로 나와서 제대로 소제목이 출력되는지 확인하면 됩니다.
