티스토리 소제목 꾸미기
원래 html을 잘 모르지만, 생존을 위해 티스토리 소제목을 꾸미다 보니 알게 된 것을 기록할 겸 공유할 겸 남깁니다.
작성일 기준, 티스토리 제목1, 제목 2, 제목 3 서식의 기본값을 변경하여 아래와 같은 모양으로 자동으로 작성되게 해 놓은 상태입니다. 다만 이 코드를 다른 코드로 변경하려다 보니, 나중에 다시 찾기 불편할 것 같아서 포스팅을 하기로 했습니다. 코드라는 단어를 썼지만, 사실 맞는 단어인지도 모를 정도로 생존형 자료이니, 읽으시는 분의 상황에 따라 도움이 될 수도 안 될 수도 있겠습니다.
소제목 꾸미기 방법
위와 같이 서식을 넣을 때는 티스토리 설정을 바꿔주면 됩니다. 처음에는 막막하지만, 해보니 해볼만 합니다.
1. 설정-꾸미기-스킨편집 진입
2. 스킨편집-html편집-CSS 진입
3. 입력 위치 찾기
- CSS 창 아무데나 한 번 누르고 Ctrl+F키 눌러서 검색창 띄우기
- '.entry-content' 검색
- .entry-content h2, .entry-content h3, .entry-content h4, 구역을 바꿔주면 제목1, 제목2, 제목3 영역의 서식이 바뀝니다.
티스토리 꾸미기 CSS코드
.entry-content h2 {
clear: both;
margin: 29px 0 22px;
font-weight: 700;
font-size: 1.5em;
line-height: 0.5;
color: #000;
padding: 7px 15px;
background: linear-gradient(to right,#d9e1f7,#d9e1f7);
border-radius: 25px 2px 25px 2px;
box-shadow: 1px 1px 1px #999;
}
.entry-content h3 {
clear: both;
font-size: 1.3125em;
line-height: 1.5;
color: #000;
border-style: solid;
border-width : 0px 0px 1px 14px;
border-color: #86a0d6;
background-color: #fff;
padding: 4px 5px;
margin: 0.5em 0em;
}
.entry-content h4 {
clear: both;
font-weight: 500;
font-size: 1.125em;
line-height: 1.35;
color: #000;
border-style: solid;
border-width : 0px 0px 1px 0px;
border-color: #869fd670;
background-color: #fff;
padding: 5px 5px;
margin: 0.5em 0em;
}
주요 코드 설명
주요 코드를 설명드리겠습니다. 예제로 주어진 모양이 별로이기 때문에 마음에 들지 않으실 수 있으나, 현재의 모양이 안 예뻐도, 자신에게 맞게 커스텀 하면 예뻐질 것입니다. 코드 창의 내용을 위에서 설명한 곳에 붙여 넣으시면 됩니다. 백업은 필수이니 먼저 자신의 스킨을 백업해 두세요.
/* 제목1 */
.entry-content h2 {
clear: both;
margin: 29px 0 22px;
font-weight: 700;
font-size: 1.5em;
line-height: 0.5;
color: #000;
padding: 7px 15px; /* 글자에서 박스까지의 가로 거리, 상하거리 */
background: linear-gradient(to right,#d9e1f7,#d9e1f7); /* 그라데이션 박스, 색깔 2개 고르면 왼쪽에서 오른쪽으로 그라데이션 적용됨, 현재는 같은색으로 입력되어 단일색상으로 표현 됨 */
border-radius: 25px 2px 25px 2px; /* 네 귀퉁이 곡률, 반지름 픽셀값 */
box-shadow: 1px 1px 1px #999; /* 그림자 */
}
/* 제목2 */ .entry-content h3 {
clear: both;
font-size: 1.3125em;
line-height: 1.5;
color: #000;
border-style: solid;
border-width : 0px 0px 1px 14px; /* 아래는 1픽셀 선, 왼쪽에는 14픽셀 두꺼운 선 */
border-color: #86a0d6; /* 테두리 색 */
background-color: #fff; /* 배경 색 */
padding: 4px 5px; /* 글자에서 상하좌우 거리 */
margin: 0.5em 0em;
}
/* 제목3 */ .entry-content h4 {
clear: both;
font-weight: 500;
font-size: 1.125em;
line-height: 1.35;
color: #000;
border-style: solid;
border-width : 0px 0px 1px 0px; /* 아래에만 1픽셀 선(밑줄처럼 보임), 상,하,우는 0픽셀이므로 선이 없음 */
border-color: #869fd670;
background-color: #fff; /* 배경색은 투명 */
padding: 5px 5px;
margin: 0.5em 0em;
}
마무리
생존형 꾸미기 노하우입니다. 저도 처음에는 제 마음에 딱 드는 코드를 찾아다니느라 검색만 며칠을 했습니다. 결과적으로는, 적당한 코드를 익힌 후 저에게 커스텀하는 방식으로 갈 수밖에 없었습니다. 단순한 내용이지만, 꾸미기를 시작하시는 분께는 소제목 꾸미기에 도움이 되실 겁니다.
반응형