티스토리 블로그 머리말1,2,3,4 서식 변경하기

티스토리 글쓰기 시 기존에 기본으로 적용되어있는 본문, 머리말1,머리말2,머리말3,머리말4 총 4가지의 본문 스타일서식을 내가 선호하는 설정으로 바꾸어보는 방법을 알아보겠습니다.

 

 

위의 그림처럼 티스토리 블로그는 기본적으로 본문적용에 본문글 1개와 머리글들 유형 4가지 총 5개의 스타일을 골라쓸 수 있게 해놓았습니다.

그런데 티스토리 기본 스타일을 따르지 않고 본문작성시에 일일이 컬러와 크기를 선호하는 식으로 일일이 바꿔주다 보니 영 불편한게 아니더군요.

그래서 이번 포스팅에서는 티스토리의 고유서식이 아닌 자신만의 본문스타일을 만들어 편리하게 적용시키는 법을 알아보겠습니다.

 

 

위의 사진은 블로그 새글쓰기 편집창에서 "1.머리말 미리보기" 라고 적은뒤 하단 미리보기 버튼을 눌러 본 머리말1 의 모습입니다.

머리말 2,3,4 모두 저렇게 생겼는데 크기만 갈수록 작아집니다.

저 모양이 싫은 분들은 CSS에 들어가서 수정해주시면 됩니다.

티스토리 관리페이지>스킨편집>HTML편집>CSS탭 으로 가시면 됩니다.

저는 다른것은 모두 그대로 두고 색만 바꾸겠습니다.

 

 

HTML/CSS에서 티스토리 블로그 머리말 꾸미기는 'CSS'로 들어갑니다.
코드의 여백을 클릭한 다음에 Ctrl + F를 사용해서 머리말 태그에 해당하는 '.article h1'을 타이핑하고 엔터를 쳐서 검색해줍니다.

 

 

위의 그림에서 border-bottom은 문장의 밑줄부분이고, border-left는 왼쪽 작은 직사각형영역입니다.

border 에서 각각 두께를 어느정도 줄지 결정하고, solid 에서 각각의 색깔을 지정하시면 됩니다.

색깔은 바로 이 편집창의 글자색부분을 클릭하여 색상표에서 고르셔도 되고 네이버 색상표를 이용해서 좀더 세밀한 색상코드를 찿으셔서 넣어도 됩니다.

 

 

 

저는 두색깔 모두 초록으로 통일하고 border-left만 15px로 조금 더 두껍게 했습니다. 현재는 연한 검은색을 쓰고 있는데 초록색이 약간은 눈을 피곤하게 하리라는 생각때문입니다.

저장하시고 나면 이제부턴 모든 머리말 1,2,3,4 가 크기만 다를뿐 바뀐 형태로 출력될 것입니다.

수고하셨습니다.

다만, 스킨 자체에서 reset값 등으로 머리말값 등을 초기화 시켜둔 스킨에서는 해당 수정항목을 찿을 수 없을 수도 있습니다. 그러한 스킨들의 경우에는 제작자나 해당 스킨의 포럼 등을 참조하여 수정해 나가야 하는 부분이 있을 수 있습니다.