티스토리 본문 소제목 꾸미는 방법 - CSS 서식 소스 공유

안녕하세요. 블로그 검색을 하다보면 중간에 제목을 가독성 좋게 꾸민것들을 보셨을꺼에요.

오늘은 티스토리 소제목을 꾸미는  소소를 공유하고 서식에 적용하는 방법까지 알려드릴께요.

 

티스토리 본문 소제목 꾸미기 예시화면

이렇게 서식을 이용하여 본문 중간에 소제목을 꾸며주면 우선 가독성이 좋아져요.

하지만 제가 공유하는 티스토리 소제목 꾸미기 CSS 소스는 단순히 모양만 만들어 주는 것이 아니라 h2 tag를 사용하여 검색봇이 이 부분은 제목이구나 알 수 있게 해 두었어요.

검색 엔진은 제목을 사용하여 웹 페이지의 구조와 콘텐츠를 색인화하기 때문이죠.

이렇게 사용을 하면 SEO에도 긍정적인 영향을 줄 수 있지 않을까 생각이듭니다.

 

Html Headings 소스는 <h1>  ~ </h6>까지 있고 형식은 <h1> 제목넣기 </h2> 입니다.

마지막에 꼭 </>으로 내용을 막아주어야 합니다.

h1이 가장 중요하고 대표가 되는 제목이며 h6은 제일 덜 중요한 순서입니다.

 

h1 ~ h2 태그 예시

위 이미지를 보시면 <h1> 태그가 들어간 글씨가 가장 크게 보이는 것을 알 수 있어요.

 

<h2 style="border-left: 13px solid #bd16f4; padding: 0 15px 5px 10px; font-weight: bold; border-bottom: #bd16f4 1px solid;">본문소제목넣기</h2> 
<p>본문내용넣기</p>

<h2 style="border-left: 13px solid #10cfd6; padding: 0 15px 5px 10px; font-weight: bold; border-bottom: #10cfd6 1px solid;">본문소제목넣기</h2> 
<p>본문내용넣기</p>

<h2 style="border-left: 13px solid red; padding: 0 15px 5px 10px; font-weight: bold; border-bottom: red 1px solid;">본문소제목넣기</h2> 
<p>본문내용넣기</p>

제가 공유하는 소스를 이용하시면 위 이미지와 같은 제목바가 생성이 됩니다.

색상을 바꾸고 싶으실때는 border-left: 13px solid #10cfd6  / border-bottom: #bd16f4 빨간색 부분만 바꾸어 주시면 됩니다.

border-left와 border-bottom 두 곳을 바꾸어 주셔야 합니다.

 

소제목_css.txt

0.00MB

 

제목 서식바 색상 변경하는 법

네이버 색상팔레트

제목바의 색상은 내가 원하는 색으로 변경할 수 있습니다.

원하는 색상을 얻는 방법은 네이버에서 rbg 색상표를 입력하시면 위와 같이 색상 팔레트가 나옵니다.

여기에서 원하는 색을 선택하면 화살표와 밑줄 부분에 RGB 색상값 6자리가 나온는데 그 숫자를 넣어주면 색상을 변경할 수 있어요.

 

 

티스토리 소제목 서식 만드는방법

서식을 만들때는 저 소스 3개를 한번에 복사하지 않고 단락별로 1개씩 복사하여 만들어야 합니다.

우선 소스 한 단락을 복사 후 블로그 설정으로 들어갑니다.  Q를 누르면 바로 설정페이지로 넘어갑니다.

 

티스토리 설정

이렇게 붙여넣기 한 후 하단에 완료버튼을 눌러주면 됩니다.

 

그리고 사용할때 상단에 있는 점 ...개 있는 부분 클릭 > 서식을 선택하여 내가 만든 제목바를 선택하면 됩니다.

티스토리 본문 소제목 꾸미는 방법을 정리했는데 도움이 되셨으면 좋겠어요.

혹시 궁금하신것 있으면 댓글로 문의주셔도 됩니다.

제가 아는 선에서 답변 드리도록 하겠습니다.

 

 

이 글 같이 보면 좋아요

구글 SEO 이미지 최적화하는 방법