안녕하세요. 2023년 3월 7일, 경제적 자유 프로젝트 중인 무월입니다.
티스토리 블로그를 하며 SEO를 생각하며 서술식으로 글을 작성하다 보니 가독성이 떨어지고 스스로가 만족스럽지 않아서 서식을 추가해 봤습니다. 보기에 좀 낫습니다. 본인이 잊을까 봐서 그리고 혹 필요한 분이 있을까 봐 기록해 둡니다.
티스토리 서식 작성(제목 3종)
1. 블로그관리 홈의 좌측 메뉴에서 '서식 관리'를 선택합니다. 우측 상단의 '서식 쓰기'를 클릭하여 서식 에디터로 이동합니다.
2. 카테고리가 서식으로 고정되어 있는 기본모드의 서식에디터를 우측 상단의 기본모드를 클릭해 HTML로 변경해 줍니다.
3. HTML 모드에서 제목과 HTML 코드를 입력하고 완료를 클릭해 서식을 저장합니다.
• 서식 1
![]() |
<h3 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #6E6E6E 1px solid; margin: 5px 0px; border-left: #6E6E6E 15px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;" data-ke-size="size26"><b>제목2</b></h3> |
border-bottom: #6E6E6E = 밑줄 색상 border-bottom: #6E6E6E 1px solid = 1px 밑줄 굵기 border-left: #6E6E6E = 회색 좌측 네모바 색상 border-left: #6E6E6E 15px solid = 15px 좌측바 굵기 |
• 서식 2
![]() |
<h3 style="font-weight: 600; border-left: 30px solid #6E6E6E; line-height: 1.5; padding: 5px 10px; background-color: #efefef;" data-ke-size="size23">제목2</h3> |
border-left: 30px solid #6E6E6E = 회색바 border-left: 30px solid #6E6E6E = 30px 회색바 굵기 background-color: #efefef = 네모 회색 색상 |
• 서식 3
![]() |
<h4 style="box-sizing: border-box; border-right-width: 0px; margin: 5px 0px; border-left: #6E6E6E 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;" data-ke-size="size26"><b>제목2</b></h4> |
border-left: #6E6E6E 10px solid = 10px 회색바 굵기 margin: 5px 0px = 바깥 여백 영역 상하 5px, 좌우 0px padding: 3px 5px 3px 5px = 정의된 경계로부터의 거리 상 3, 우 5, 하 3, 좌 5px(2가지 값 입력시 상하, 좌우) line-height: 1.5 = 왼쪽선 높이 ※ 폰트 관련 <b><span style="fone-size: 26px; font-family: 'Noto Sans Demilight', 'Noto Sans KR'; color: #FF0000;">제목2</span></b> 나눔 고딕 Nanum Gothic, 궁서체 GungSeo, serif, 본명조 Noto Serif KR |
4. 위의 서식 3가지를 서식에디터에 각각 입력하고 저장하면 아래와 같이 서식 관리에 3개의 서식이 보입니다.
5. 서식에서 바 또는 밑줄 또는 배경 색은 아래처럼 색상 팔레트의 RGB코드를 참고해 원하는 색상으로 변경합니다.
작성한 서식 사용하기
1. 블로그 에디터의 우측 상단 점3을 선택해 서식을 클릭합니다.
2. 사용하고 싶은 서식을 선택하면 에디터에 서식이 적용됩니다. 제목을 수정해서 사용하면 본문처럼 적용됩니다.
좀 더 깔끔해져서 보기에 좋군요. 굵기나 높이 색상 등은 RGB 색상표를 참고하여 원하는 서식으로 변경하여 사용하면 더욱 가독성 있는 포스팅이 될 것 같습니다.
'콘텐츠 플랫폼' 카테고리의 다른 글
유튜브 영상에 최종화면 넣는 방법 (0) | 2023.03.16 |
---|---|
티스토리 공감버튼 수정하기(가운데정렬, 크게, 유도문구) (0) | 2023.03.10 |
유튜브 동영상 업로드 및 저화질 주의사항 (0) | 2023.03.02 |
유튜브 시작하기(브랜드채널 만들기, 개인채널 만들기) (0) | 2023.03.01 |
그림 AI 2탄, 아트브리더(artbreeder) 사용방법 및 사용료 (0) | 2023.02.21 |
댓글