티스토리 제목(h1, h2..) 스타일 입히기

티스토리 문단모양의 문제점

티스토리에서 글을 작성할 때 편집기에서 제공하는 문단모양 기능을 활용할 때가 있어요.

아래와 같이 제목과 본문에 미리 정의되어있는 스타일을 적용하는 기능이에요.

문단모양에서 제목을 선택하면 아래와같이 스타일이 적용되는데요.

글자 크기만 조금 커졌을 뿐 제목이라는 생각이 들지 않을 때가 있어요.

그래서 제목에 스타일을 입혀서 조금 더 제목같이 보이도록 만들어볼 생각입니다.

스킨 편집 기능으로 제목을 제목답게 만들기

어떤 css를 수정해야할지 확인하기

크롬 기준으로 내 블로그의 적당한 페이지에 들어가서 우클릭을 하고 검사를 클릭합니다.

그럼 아래와 같은 화면을 보실 수 있는데요, 여기서 저희는 제목을 수정하고 싶기 때문에 아래 캡쳐의 화면 가운데 화살표 그림을 클릭하고 왼쪽 화면의 제목을 클릭합니다.

그럼 해당 제목에 적용된 스타일을 보실 수 있어요.

제가 쓰는 테마의 스타일은 .skin_view .area_view 를 수정하면 되겠군요.

css를 수정해서 위 화면을 아래와 같이 바꿀거에요.

css 수정하기

티스토리의 블로그 관리 화면에 가면 왼쪽 사이드바에서 꾸미기 -> 스킨편집 메뉴로 들어갈 수 있어요.

스킨 편집화면에서는 아래 그림과 같이 HTML을 편집할 수 있는 기능이 있어요.

HTML 편집 기능으로 들어가면 CSS를 편집할 수 있는 탭이 생기는데 CSS를 눌러봅니다.

여기서 아까 찾은 .skin_view .area_view 를 찾아갑니다.

이렇게 정의되어있네요. 이 부분을 변경할거에요.

먼저 기존 버전으로 돌아올 수 있는 방법을 마련하기 위해서 주석처리를 해주고 수정을 해볼게요.

이렇게 변경을 했어요.

/* .skin_view .area_view h1, */
.skin_view .area_view h1 { color: cadetblue; border-bottom: 2px solid cadetblue; border-left: 10px solid cadetblue; padding: 5px 15px; }
/* .skin_view .area_view h2, */
.skin_view .area_view h2 { color: cadetblue; border-bottom: 2px solid cadetblue; border-left: 10px solid cadetblue; padding: 5px 15px; }
/* .skin_view .area_view h3, */
.skin_view .area_view h3 { color: cadetblue; border-bottom: 2px solid cadetblue; border-left: 10px solid cadetblue; padding: 5px 15px; }
/* .skin_view .area_view h4 { font-size:26px; line-height:30px; margin:52px auto 28px } */

잘 적용되었는지 확인해보기위해 우측 위의 적용을 누르고 내 블로그의 글을 클릭해 봅니다.

이렇게 잘 적용된것을 확인하실 수 있어요.

이제 어떤식으로 css를 수정하면 되는지 방법을 알아봤으니 블로그 제목을 이쁘게 꾸며볼 수 있겠네요 :)