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

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

요즘 티스토리 블로그를 계속 쓰다보니, 읽기 쉬운 가독성 있는 블로그를 만들고 싶다는 생각이 들었습니다. 다른 블로그들을 벤치마킹하니 소제목에 서식을 입혀서 제목과 내용이 분리되어 있는 것을 보고 방법을 찾아 포스팅해봅니다.

티스코리 소제목 꾸미기 설정 

• 티스토리 소제목이란?
• 티스토리 소제목 서식 예시
• 티스토리 소제목 서식 변경하는 법
• 소제목 16진수 색이름 예시
• 소제목 적용 시기

티스토리 소제목이란?

티스토리 새 에디터 기준으로 제목1, 제목2, 제목 3이 있는데요, 제목 2를 소제목이라고 부릅니다.

제목 1은 보통 블로그 제목 이름과 같이 사용하고, 제목 2 부터는 블로그 안네 있는 내용의 문단을 나눌 때 사용하기도 합니다.

 

티스토리 소제목 서식 예시

얼마전에 작성한 넷플릭스 브리저튼에 관한 글 입니다. 소제목 (제목2)로 설정하면 이렇게 큰 글자가 되고 아래에 본문이 나오게 됩니다.

소제목 서식 미적용

CSS를 사용하여 제목2(소제목)에 서식을 입혀 준 모습입니다. 

 

이렇게 꾸며주는 제목(문단)과 본문과 분리도 되고 왠지 더 깔끔해진 느낌이에요!

소제목 서식 적용 후

티스토리 소제목 서식 변경하는 법

오늘은 CSS를 이용해 소제목 서식을 변경할꺼에요! 

CSS서식을 이용해서 소제목 서식을 설정해 놓으면, 티스토리 블로그 전체에 적용되기 때문에, 내가 전에 써놓았던 글의 서식도 변경이 됩니다.

일일이 하나씩 수정할 필요없이, 전에 작성해놓았던 글들도 소 제목서식이 적용됩니다.

 

티스토리 블로그 관리 홈으로 들어가 스킨 편집- html 편집으로 들어가 줍니다.

소제목 서식변경하는 법

html 수정으로 들어가셔서 CSS 로 이동하신 후 컨트롤+F버튼을 눌러 entry-content를 찾아주세요~

소제목 서식 CSS

그럼 entry-content 로 시작하는 h1 h2 h3 이 나옵니다.

 

이 중 소제목에 해당하는 코드는 h3 입니다.

 

소제목 서식 코드 적용

h3 아래에 아래의 코드를 복사해서 넣어주세요~

 

border-style: solid;

border-width : 0px 0px 1px 14px;

border-color: #4374D9;

background-color: #fff;

padding: 6px;

 

제 블로그는 오른쪽 마우스 쓰기 금지라, 혹시 복사 못하시는 분들은 아래 파일은 다운 받으시면 됩니다.

소제목 서식.txt

0.00MB

소제목 16진수 색이름 예시

 

여기서 다들 아시겠지만 boder-color 다음에 들어가는 코드가 소제목의 색깔을 정하게 됩니다. 

#4374D9 는 이런색이구요,  #00498C 코발트블루 #009900 녹색도 있어요.

#808080 회색 #131313 짙은 회색 #ff0000 빨강 #000000 검정색도 가능합니다.

*CSS 코드에서 적용을 누르신 후 스킨 편집으로 돌아오면 왼쪽 미리보기에서 아래와 같이 최근 글을 확인 할 수 있습니다.

소제목 서식 미리보기

 

 여러가지 색깔로 테스트 하신 후 마음에 드는 색깔을 찾으셨으면 CSS코드를 변경하신 후에는 적용- 스킨편집으로 돌아와 다시 한 번 적용을 누르셔야 진짜로 적용이 됩니다.

 

*스킨편집에서 적용 누르시지 않으면 말 그대로 적용이 안됩니다! 

소제목 적용 시기

 

나 이제 소제목 적용했다! 하면서 글을 쓰시면서 제목 2을 누르시면 아무 변화가 없습니다!

 

글을 작성하실 때는 반영이 되지 않고 완료, 발행버튼을 눌러 글이 발행되면 그 때 소제목 서식이 적용됩니다.

 

글을 마치며...

 

오늘은 티스토리의 가독성을 높일 수 있도록 소제목 서식하는 방법을 기록해 보았습니다. 소제목서식에 있는 밑줄색상은 CSS서식을 통해 언제든 바꿀 수 있어서 간편한 것 같아요! 

 

블로그 초보로서 이것 저것 기록하고 있는데, 저 같은 블로그 초보들한테 많은 도움이 되었으면 좋겠습니다! 

 

태국 애드센스 지급일 애드센스 수익 입금 되었어요!

 

2021년 새해운세 2021년 무료새해운세 바로가기