본문 바로가기
디지털노마드

티스토리 제목 서식 꾸미기 - 코드블럭 공유 및 적용방법

by 곰이고미 2022. 9. 25.
반응형

티스토리 블로그는 HTML과 CSS 편집을 통해서 디자인을 마음껏 디자인할 수 있습니다. 그러나 티스토리 제목 서식 꾸미기는 코딩의 어려움으로 좌절하실 수 있는데, 소제목 꾸미기 코드 블록 공유 및 적용 방법을 알려드리려고 합니다.

 

제목-스타일-변경-썸네일
제목-스타일-변경-썸네일

 

 

티스토리 제목 서식 꾸미기 코드 블록 공유

 

기존의 제목은 글자를 전달하는 가독성은 좋은 편이지만, 디자인 적인 요소 없이 줄글의 형태로 작성할 수밖에 없기 때문에 뭔가 아쉬운 느낌이 많이 들 것입니다.

 

 

결국 체류시간을 높이는 것이 양질의 블로그라는 것을 증명할 수 있는 방법이고, 그 결과로써 검색순위에 상위 링크될 수 있습니다. 구글 SEO글쓰기는 당연히 계속 배워나가고 적용해 나가야 하는 것이지만, 아무리 페이지를 SEO에 맞추더라도 단순히 글만 나열되어 있는 가독성이 떨어지는 페이지는 문제가 있습니다.

 

 

보라색이나, 파란색으로 소제목에 포인트를 준다면 조금 더 가독성이 좋아지는 효과를 누릴 수 있으며, 초보 티스토리 블로거 분들이 해결하고 싶어 하는 디자인 요소도 반영할 수 있습니다.

 

 

아래에 소제목 디자인 및 코드 블록 첨부파일을 보라색, 파란색 두 가지 버전으로 공유드리니, 복사, 다운로드하여 사용하시기 바랍니다.

 

 

 

 

 

1. 보라색 소제목 코드 블록 공유

 

보라-소제목.txt
0.00MB

 

 

보라 소제목

 

 

<코드 블록> 더보기 클릭

더보기

<코드 블록>

 

<h2 id="001" style="box-sizing: border-box; border-right-width: 0px; border-bottom: #462 A88 1px solid; margin: 5px 0px; border-left: #462 A88 15px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;" data-ke-size="size26"> 소제목 </h2> 

 

 

 

 

 

2. 파란색 소제목 코드 블록 공유

 

파랑-소제목.txt
0.00MB

 

 

파랑 소제목

 

 

<코드 블록> 더보기 클릭

더보기

<코드 블록>

 

<h2 id="001" h2 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #0000 FF 2px solid; margin: 5px 0px; border-left: #0000 FF 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;" data-ke-size="size23"> </h2> 

 

 

티스토리 제목 서식 꾸미기 적용 방법

 

 

위에서 받으신 첨부파일의 경우 티스토리 블로그 서식에 등록 후 삽입하여 사용하시면 됩니다.

 

※ 티스토리 소제목 서식 꾸미기 적용 방법 세부 순서

 

1. 티스토리 블로그 관리 홈 접속

 

2. 콘텐츠 → 서식관리 탭 클릭

 

3. 오른쪽 상단의 서식 쓰기 버튼 크릭

 

4. HTML 모드 변경 후 코드 블록 붙여 넣기 → 임시저장 → 기본 모드로 다시 변경

 

5. 소제목 서식 적용 완료

 

 

현재 코드 블록의 문자 태그는 h2로 설정되어 있습니다. 이 코드 블록을 목차나 기타 다른 용도로 사용하고 싶은 분께서는 h2 코드를  h3 혹은 h4로 수정 후 사용하시면 됩니다.

 

오늘도 도움이 되셨기를 바랍니다. 감사합니다.

 

 

 

※ 함께 보면 좋은 글

 

#1. 티스토리 구글 서치 콘솔 등록방법 어렵지 않아요

#2. 티스토리 네이버 검색 사이트 등록방법

#3. 다음 티스토리 블로그 다음 최적화 기간 및 확인 방법

#4. 티스토리 블로그 애드센스 조건, 거절 문제 해결 방법

#5. 티스토리 블로그 방문자수 늘리기 방법

#6. 티스토리 블로그 광고 수익 - 카카오 애드 핏 vs 구글 애드센스

#7. 티스토리 블로그 구글 노출과 네이버 최적화에 관하여

#8. 티스토리 블로그 광고 수익 - 카카오 애드 핏 vs 구글 애드센스

#9. 애드센스 승인 거절 후 승인 재신청 시 알아야 할 내용

 

반응형

댓글