본문 바로가기

블로그

티스토리 소제목 꾸미기(머리말 바꾸기)

반응형

예전에 티스토리 스킨을 바꿨는데,,,

어느순간 확인해보니 소제목 스타일 설정해둔게 다날아 갔다.


근데 학교다닐때부터 웹개발 수업도 안들었고

프로젝트 할때도 웹을 안맡다보니 웹 코드 보는게 꺼려졌었다.

그래서 못생겼지만 내용이 중요하지! 하면서 가만히 놔두다가


최근에서야 갑자기 할 마음이 들어서 몇몇군데 찾아보면서 소제목을 스타일을 수정했다.

블로그를 보면서 찾긴 했는데

스킨마다 태그도 조금씩 다르고해서 찾기가 어려웠고

제대로 정리된 블로그도 사실 없었다.


html을 잘 모르는 사람은 못할 수도있겠다 싶어서

이번에 정리겸 포스팅하고자 한다.




소제목 스타일 적용 방법 2가지와 장단점

우선 소제목 스타일을 적용하는 방법은 2가지가 있는데

하나는 블로그 스킨편집에서 본문 <h>태그의 스타일을 변경하는 방법이고(CSS를 수정하는 방법),

또 하나는 글쓰기에서 html코드로 <h>태그 스타일 지정하여 서식으로 만드는 방법이다(HTML을 직접 입력하는 방법)



첫번째 방법의 장점은 사용법이 좀 더 간단하고

향후 소제목의 스타일을 일괄 변경하고 싶을 때 스킨편집에서 태그 스타일을 바꿔주기 때문에 용이하다.

단점은 스킨변경을 하였을때 내가 지정한 스타일이 날아가기 때문에 다시 설정해주어야 한다.


두번째 방법의 장점은

각 소제목 하나하나마다 직접 스타일이 지정되어 있기 때문에 스킨을 바꿔도 소제목 설정이 날아가지 않는다.

또 글 작성시에 html이 나오기 때문에 소제목 하나하나의 수정이 용이하다.

단점은 소제목 스타일을 일괄 변경하고자 할 때는 글 하나하나 들어가서 수정해줘야 한다.

글이 백개가 넘는사람은 백개의 게시물 하나하나 들어가서 수정해야된다.




블로그 스킨편집 수정방법(CSS방식)

우선 적용할 태그는 <h1>~<h4>태그를 설정할 것이다.

어차피 평소에 거의 사용하지 않는 태그이기도 하고

구 편집기 기준 좌측상단의 머리말1~머리말4가 <h1>~<h4>까지 적용되기 때문에 사용이 편리하다.

신 편집기 기준으로는 제목1~제목3이 <h1>~<h3>이 된다.

      / 


왼쪽이 구편집기, 오른쪽이 신편집기



테스트로 머리말1~4를 한번식 입력하고 html태그로 보면

<h1>~<h4>태그로 설정된 것을 알 수 있다.


그럼 이제 스킨편집으로 들어가보자

블로그 관리 메뉴에서 [꾸미기]-[스킨편집]으로 들어간다.


그다음 오른쪽 상단의 html편집 버튼을 들어간 후




CSS를 누르고


여기서 본문의 <h>태그 css를 찾아야 되는데

컨트롤+F키를 눌러 h1을 검색해주면



스크롤바에 h1의 위치가 나온다.

이 중 본문의 h1태그를 찾으면 되는데

블로그에서 찾아볼때는 .article이라는 태그를 찾으라는 글이 많았는데

내가 쓰는 스킨의 경우에는 .entry-content였다.



만약 article도 entry-content도 아니라면 하나씩 찾아줘야된다.

찾는 방법은

우선 h1태그 중 중괄호 안에 size값이 있는 태그로 좁히고

왼쪽 미리보기에서 글화면을 띄운 다음에 사이즈를 하나씩 바꿔가며 찾으면된다.

이때 적용을 누르지말고 왼쪽 새로고침을 눌러 확인해보면 블로그에 영향을 주지 않고 찾을 수 있다.

미리보기 화면은 가장 위에 있는 글을 가져오기 때문에 테스트 글을 하나 써주고 테스트하면 된다.




이제 찾았으면 여기를 꾸며주면 된다.

나는

font-size: 1.5em;

font-weight: 400;

text-height: 200%;

border-bottom: 2px solid #cccccc;

border-left: 10px solid #ccccccc;

padding: 3px 5px;

margin: 60px 0 19px;

이런식으로 값을 정해놨다.


border-bottom은 밑줄, border-left는 왼쪽줄이다.

이것도 새로고침하면서 수정해나가면 된다.



색깔은 

https://html-color-codes.info/Korean/

사이트를 이용하거나

네이버에서 html 색상표라고 치면 색을 쉽게 찾을 수 있다.



서식등록 방법(HTML 직접입력)
다음 두번째 방법은 서식으로 등록하여 사용하는 방법이다.

이것은 잘 정리해둔 포스팅을 발견해서 그 블로그를 안내한다.

https://cess88.tistory.com/181







두가지 방법을 소개했는데

개인적으로는 첫번째 방법이 조금 더 간편하고 제어가 쉽다고 판단된다.

실제로 대부분의 사람들이 첫번째 방법을 쓰는것으로 안다.


blockquote 등 기타 태그들도 위 방법대로 응용하여 수정할 수 있으니 참고 바람.

반응형