티스토리 제목, 부제목, 소제목 밑줄 배경색 꾸미는 방법

이번 내용은 티스토리 블로그의 본문에 들어가는 제목, 부제목, 소제목의 폰트 디자인을 다양하게 변경하는 방법입니다. 어떻게 바꾸라가 아닌, 이 부분을 만지면 이렇게 바뀐다라는 구조에 관련된 내용에 더 가깝습니다.

 

🥕광고 차단 프로그램을 OFF 하여 주시면 좋은 콘텐츠를 제작하는 데 있어 많은 힘이 됩니다.

안녕하세요, 마녀의 숲속 블로그의 마숲입니다 ~ ^ ^

 

 

티스토리 제목, 부제목, 소제목 디자인 바꾸기

반응형

티스토리 블로그에서 글쓰기 모드로 들어가면, 상단 탭 메뉴에 본문 글의 단락마다 제목을 설정할 수 있도록 '제목 1', '제목 2', '제목 3'의 형식이 있습니다. 이것은 본문에 삽입되는 제목, 부제목, 소제목의 기능을 담당합니다.

 

 

이 작은 제목의 디자인을 꾸미는 방법은 간단한 편입니다. (주의: CSS를 편집하기 전에 메모장에다 기존의 코드를 복사하여 반드시 백업부터 해놓으시기 바랍니다.)

 

1. 티스토리 관리 페이지에서 좌측 메뉴에 있는 '스킨 편집'을 선택합니다.

 

2. 우측 화면에 있는 스킨 편집 창에서  'HTML 편집' 버튼을 누릅니다.

 

3. 경고 창이 나타나면 '예'를 누른 다음, 상단에 있는 'CSS'를 선택합니다.

 

4. CSS 코드가 적혀있는 아무 곳이나 한번 클릭한 다음 Ctrl F를 클릭하면 검색 칸이 나타납니다. 이곳에서 다음을 입력하여 검색합니다.

👉 Entry Content

 

5. 두 번째 검색 결과 정도에 아래와 같은 제목 1, 제목 2, 제목 3에 해당하는 코드가 나타납니다.

 

6. 여기서 h1는 블로그 글의 제목에 해당하는 것이니 건드리지 않고, h2, h3, h4..... 를 만지면 본문에 작성되는 제목의 디자인을 변경할 수 있습니다. 대개 제목 1이 h2이고, 제목 2가 h3..... 순서가 되는데, 이 부분은 각 블로그의 세팅마다 바뀔 수 있기 때문에, 더 확실하게 하기 위해선 다음의 방법으로 확인을 해봅니다.

 

 

 📌 본문 제목 h1, 2, 3 코드 속성 확인하는 방법

 

①  글쓰기 모드에 들어간다.

②  '제목 1', '제목 2', '제목 3'의 형식으로 본문 안의 제목을 작성해 본다.

③  우측 상단에 있는 '기본모드'를 'HTML'로 변경한다.

④ 각 제목의 형식마다 h 속성을 확인한다.

 

※ 여기서 '제목 1'의 속성이 'h1'으로 되어 있다면, 포털 사이트의 검색 결과에 h1 요소가 두 개 이상 존재한다면서 오류가 발생됩니다. SEO 검색 최적화에도 문제가 생기니 아래의 방법으로 반드시 수정하여 줍니다. 우리의 블로그는 매우 소중하니까요.

 

📌 H1 요소가 2개 이상 발견 꼭 해결해야 합니다!

 

7. h 속성 요소 확인이 끝났으면, 변경하고자 하는 본문 제목의 디자인을 다음을 참고하여 바꿉니다.

 

.entry-content h2 {

 clear: both;

 margin: 29px 0px 22px;

 font-size: 1.5em;  /* 폰트 크기 조정 */

 line-height: 2.0;

 color: rgb(0, 0, 0);

 padding-left: 10px ;

 background-color: #f1f1f1;  /* 배경색 지정 */

 border-left: 12px solid #8fc7ff;   /* 제목 왼쪽 꾸미기, px는 줄 굵기, #은 컬러 코드 */

}

.entry-content h3 {

  clear: both;

  margin: 29px 0 22px;

  font-size: 1.3em;

  line-height: 1.5;

  color: rgb(0, 0, 0);

  border-bottom:2px solid #8fc7ff;

  border-left: 10px solid #9edfff;

  padding: 5px 15px;

}

 

 

 

✔️ 위 예시의 h2 코드대로 하면 다음과 같이 본문 제목이 변경됩니다.

 

✔️ 위 예시의 h3 코드는 아래와 같습니다.

 

✔️ border-left 외에 다른 디자인으로 변경하고 싶으면 아래의 코드를 추가할 수도 있습니다.

• border-top → 위쪽 줄 꾸미기
• border-right → 오른쪽 줄 꾸미기
• border-bottom → 아래쪽 줄 꾸미기

 

어떻게 본문의 제목을 꾸밀지는 수많은 디자인이 있기 때문에 직접 마음에 드는 걸 인터넷 서칭을 통하여 자료를 찾는 것도 좋은 방법일 것입니다.

 

 

8. 본문 제목의 디자인을 변경할 때마다, 좌측 화면에 있는 '미리 보기' 화면을 통하여 확인을 합니다.

 

 

9. 본문 제목 디자인 변경이 완료되었으면, 우측 상단의 '적용'을 누르고 완료합니다.

 

 

내용을 마치며

오늘 내용은 마숲 블로그의 '✏️ 자유게시판(방명록)'에 본문 제목 꾸미는 방법이 궁금하다는 글을 남겨주셔서 바로 콘텐츠로 쉽게 만든다고 제작하여 봤습니다. 마숲도 아직 블린이 레벨이지만, 블로그를 이제 막 시작한 분들에게 조금이라도 도움이 되었을까요?

 

그럼, 항상 즐겁고 수익이 많이 발생하는 블로거가 되시기를 진심으로 바랍니다.

 

🔗 티스토리 블로그 글자에 형광펜 색연필 긋는 방법 (본문 글에 색 입히기)

 

🔗📌 애드센스 블로그, 베스트 TIP 모음