티스토리에서 글을 작성하다 보면 소제목을 꾸미면 좀 더 눈에 제목이 들어오게 됩니다. 소제목을 꾸미는 방법은 여러가지가 있습니다. 하지만 서식으로 적용해 놓고 매 번 제목을 꾸미는 방법은 너무 번거롭기 때문에 CSS를 통해서 한번에 적용하는 방법을 알려드리도록 하겠습니다. 물론 서식으로 매번 불러와서 쓰는 것도 가능합니다.
소제목을 쓰는 이유
글을 쓸 때 기본적으로 구조화해서 제목들의 계층을 정하고 글을 쓰는 건 이유가 있습니다. 바로 seo를 위해서 하는 건데요. 글의 h태그를 다는 방법과 이유에 대해서는 아래글을 참조해주시기 바랍니다
소제목 디자인 변경하기
위 글에서 우리는 h1코드를 변경하는 방법까지 알려드렸었죠. 이번에는 그럼 소제목을 어떤 방식으로 꾸미는지 알려드리겠습니다. 이 블로그에서는 #1 스킨을 기준으로 설명드리지만 다른 스킨에서도 동일하게 변경할 수 있는 방법도 알려드릴게요. 게시글의 소제목을 변경하는 방법은 스킨 편집창에서 CSS 코드를 수정하는 방식입니다. 글에서 매번 서식을 설정해서 하실 분들은 그렇게 하셔도 됩니다.
디자인 변경 예시
소제목을 바꾸는 방법은 그야말로 무한합니다. 그림처럼 좌측에 막대기만 나오게 할 수도 있구요, 좌측 하단에 길게 바를 댈 수도 있고, 박스를 쳐서 색칠을 할 수도 있고, 모서리를 둥글게, 선을 점선으로 다 할 수 있습니다. 그 세부 방법은 마지막에 알려드리고 일단 가장 심플한 좌측 세로 바를 대는 방식으로 바꾸는 방법을 중점적으로 알려드리도록 하겠습니다.
스킨편집 – HTML
관리자 창에서 꾸미기 – 스킨편집으로 들어갑니다
우측의 html 편집으로 들어갑니다
자 먼저 우리는 티스토리의 스킨에서 본문에 해당하는 부분을 검색해서 그걸 감싸고 있는 div class 의 내용을 확인할 겁니다. 스킨마다 명칭이 다르기 때문에 단어는 달리 보이는 분들도 있을 거에요.
먼저 내부를 한 번 클릭하고 컨트롤 F를 눌러서 ‘##_article_rep_desc_##’ 를 검색합니다. 그럼 #1스킨 기준으로 바로 위에 <div class=”area_view”>라고 보이실 거에요. 바로 이 “area_view” 부분이 이 스킨에서 글을 쓰는 본문에 해당하는 치환자입니다. area_view를 복사해주세요. 참고로 많이들 쓰시는 북클럽 스킨같은 경우는 이 부분이 “entry-content”로 되어 있습니다.
CSS 로 들어가세요
내부를 마우스로 한번 클릭을 한 다음에 컨트롤 f를 눌러서 area_view를 검색합니다.
그럼 검색 결과가 이렇게 나오게 됩니다.
참고로 글의 타이틀은 h1 입니다. 이건 건들지 않을 거에요. 그리고 글을 쓸 때 설정에서 하는 제목 1은 h2, 제목 2는 h3, 제목 3은 h4 입니다. 저는 h2, h3, h4만 수정할 예정입니다. 지금 위 이미지에서 폰트 사이즈 24px, 20px, 16px로 되어 있는 부분을 아래와 같이 코드를 변경해주세요. 마지막에 우상단에 적용 눌러 주시구요.
.skin_view .area_view h2 { font-size:24px; border-left:6px solid #333333; padding: 1px 10px; }
.skin_view .area_view h3 { font-size:20px; border-left:6px solid #2687F1; padding: 1px 10px; }
.skin_view .area_view h4 { font-size:16px; border-left:6px solid #FFBF36; padding: 1px 10px; }
border-left:6px solid #333333; padding: 1px 10px; 이 부분을 제가 더 추가한겁니다.
간단하게 설명드리면, border-left의 숫자는 왼쪽에 생긴 바의 굵기를 말합니다. #333333 은 칼라 색상 번호구요. 패딩의 앞의 숫자(1px)는 위아래 길이, 뒤에 숫자(10px)는 바와 글씨의 간격을 설정하는 겁니다. 본인이 맞게 수정해주시면 됩니다.
색상표
만약 원하는 컬러의 번호를 확인하고 싶으시면 아래 링크를 통해 확인하실 수 있습니다.
결과보기
그럼 반영 이전과 이후의 변화를 한 번 보도록 하겠습니다.
예전에 이렇게 썼던 본문이 아래와 같이 변하게 됩니다.
이렇게 CSS를 건드리면 기존에 썼던 모든 글의 모든 h태그가 달린 글의 디자인이 한방에 바뀌게 됩니다. 간단하죠? 그럼 이제 많이 쓰는 다른 스킨과 다른 디자인에 대한 예시를 본격적으로 들어보겠습니다.
다른 스킨 예시
다른 스킨이라 하더라도 CSS의 단어만 다를 뿐이지 경로와 방법은 모두 같습니다. 심지어 티스토리의 오래된 스킨을 사용하시는 분들은 아예 h2, h3등의 코드가 없는 경우도 있는데요. 위의 방법대로 본문에 해당하는 class 이름만 확인하게 되면 그 뒤에 임의로 h2, h3를 붙여서 반영하면 모두 일괄 반영됩니다.
위에서 간단하게 언급했던 대로 티스토리의 반응형 스킨 중에는 본문의 치환자가 .entry-content 로 되어 있는 경우도 있습니다. 그럴 경우 아래와 같이 수정이 가능하겠네요.
.entry-content h3 {
clear: both;
margin: 29px 0 22px;
font-size: 1.3125em;
line-height: 1.5;
color: #000;
border-bottom: 2px solid #5b88b7;
border-left: 10px solid #306dad;
padding: 5px 15px ;소제목 디자인 변경하기
일단 디자인을 수정하려면 어디를 수정해야하는지 궁금하시죠. 아래를 참고해주세요.
수정값 설명
자 그럼 어떤 단어가 뭘 수정해야되는지를 먼저 알려드리면 더 도움이 되시겠죠? 먼저 박스를 만드는 요소에 대한 코드입니다.
- border-style : 선모양을 나타냅니다. solid(직선), dashed(네모 점선), dotted(동그란 점선), double(두줄선)
- border-width : 선 위치에 따른 선 굵기입니다. 선 굵기 순서는 위, 오른쪽, 아래, 왼쪽 입니다.
예를 들면 0px 0px 1px 14px; 이면 위 오른쪽은 0이니까 선이 없고 아래 왼쪽만 있는 거에요 - 테두리는 위의 코드처럼 border-bottom(아래) / top(위) / border-left / border-right 로 표시하기도 합니다.
- border-color : 선 색깔
- background-color : 배경색
- padding : 상자와 글씨 사이의 간격을 말합니다. 6px 이렇게 하나만 있으면 좌우 여백이고, 5px 15px 이런 식으로 두개가 있으면 상하, 좌우 순입니다.
padding: 0.5em 0.5em 0.4em 0.5em 이렇게 4개가 있으면 시계 방향으로 상단(0.5em), 우측(0.5em), 하단(0.4em), 좌측(0.5em) 여백을 나타냅니다. - border-radius : 테두리 모서리를 둥글게 하는 정도입니다. 순서는 왼쪽위, 오른쪽위, 오른쪽아래, 왼쪽아래
- margin : 이 박스와 외부의 다음 줄과의 간격을 말합니다.
- font-weight : bold(굵게 표현)
디자인 변경 예시
소제목 디자인은 자유 자재로 바꿀 수 있습니다. 일반적으로 많이 쓰는 예시를 보여드릴게요. 위의 코드를 참조하셔서 본인만의 디자인을 만들어 보세요.
font-size: 1.3125em;
color: #000000;
padding: 0.4em 1em 0.4em 0.5em;
background: #efe8f2;
margin: 0.5em 0em;
border-left: #918ACE 10px solid;
그라데이션은 아래와 같이 코드를 넣고 원하는 색상 두가지를 넣으시면 됩니다.
background: linear-gradient(to right,#123751,#4e286c);
color: #fff;
font-size: 22px;
font-weight: bold;
margin-top: 30px;
margin-bottom: 15px;
padding: 15px 20px;
border-radius: 25px 2px 25px 2px;
font-size: 22px
padding: 0.4em 1em 0.1em 0.2em;
margin: 0.5em 0em;
color: #000000;
border-bottom: 4px #0000FF solid;
font-weight: bold;"버튼 꾸미는 방법
티스토리에서 링크를 넘길때 시각적으로 버튼을 만들어서 클릭을 하게 하면 CTR을 높일 수 있습니다. 아래와 같은 버튼은 티스토리에서 서식으로 만들어서 링크와 문구를 바꿔서 쓰시면 됩니다. 하단의 코드로 서식을 만드셔도 되고, 위 방법들을 응용해서 자신만의 버튼을 만드셔도 됩니다.
<center>
<p data-ke-size="size16"><a style="background-color: #0040ff; color: #fff; border-radius: 15px; padding: 16px 32px; font-size: 20px; font-weight: bold; text-decoration: none;" href="https://mimmi.tistory.com">버튼 문구</a></p>
</center>서식 만드는 방법
티스토리에서는 자주 쓰는 양식은 서식이라는 기능을 통해 저장해 놓고 쓸 때마다 불러오시면 편합니다. 주로 글 중간에 들어가는 에드센스 광고코드, 혹은 앵커텍스트 버튼을 만들때, 혹은 글의 서론 본론 결론을 일정한 포맷화해서 쓸 때 서식화 기능을 사용하게 됩니다. 서식 만드는 방법은 하단의 링크를 참조해주세요
마치며
여러 디자인이 있지만 저는 가장 심플한 게 좋더라구요. 참고로 나중에 구글 애드센스 광고를 다실 때는 소제목 밑에 넣는 것도 괜찮은 방법 중의 하나입니다.