오늘은 티스토리 블로그를 막 시작하신 분들께 도움이 될만한 글을 써볼까 합니다. 물론 저도 아직 블린이지만 제가 여태 모은 서식 자료들을 공유해보려고요😁
애드센스 승인받기 전부터 고수분들 블로그를 둘러보면서 나도 승인받고 나면 저렇게 꾸며야지 생각하며 하나씩 모은 자료들입니다. 대단한 건 아니지만 그래도 같이 나누면 도움이 될 것 같아서 공유해봅니다. 제 글이 도움이 되셨다면 아시죠?!👌
오늘은 아래 목차는 그냥 넘겨주세요. 자동 목차 적용되어있어서 목차가 지저분한 점 양해 바랍니다.
목차
1. 대제목 H2 서식
글자가 크고 제목에 포인트가 들어가서 눈에 잘 띄어서 H2 제목으로 사용하기 좋은 서식들입니다.
모든 제목의 색상 변경은 HTML 색상표를 검색하셔서 색상 코드를 복사 후 서식에 적용하시면 됩니다.
✅ 대제목 음영
대제목 - 음영
✅ 대제목 옆밑줄
대제목 - 옆밑줄
✅ 대제목 쉐도우박스
대제목 - 쉐도우박스
🔻 아래 텍스트 파일을 다운로드하시면 대제목 H2의 서식을 확인하실 수 있습니다.
2. 소제목 H3 서식
위의 H2 제목들보다 사이즈가 작은 서식들입니다. H3로 사용하면 괜찮을 서식들입니다.
✅ 소제목 옆밑줄 검정
소제목 -옆밑줄 검정
✅ 소제목 옆밑줄 그레이
소제목 - 옆밑줄 그레이
✅ 소제목 옆밑줄 블루
소제목 - 옆밑줄 블루
✅ 소제목 옆밑줄 라피스 블루
소제목 - 옆밑줄 라피스블루
🔻 아래 텍스트 파일을 다운로드하시면 소제목 H3의 서식을 확인하실 수 있습니다.
3. 소소제목 H4 서식
옆쪽에 포인트 옆줄이 들어가거나 글자만 본문보다 크고 진하게 표시되는 제목들로 H4 제목으로 사용하기에 적당한 서식입니다.
✅ 소소제목 옆줄 그레이
소소제목 - 옆줄 그레이
✅ 소소제목 옆줄 그린
소소제목 - 옆줄 그린
✅ 소소제목 글자만
소소제목 - 글자만
🔻 아래 텍스트 파일을 다운로드하시면 소소제목 H4의 서식을 확인하실 수 있습니다.
4. BOX 서식
아래는 각종 BOX 서식들입니다. BOX 색상 변경 역시 제목과 마찬가지로 HTML 색상표 코드를 적용하시면 됩니다.
✅ BOX 점선박스
사각점선박스
✅ BOX 안내문구 노랑
안내문구
✅ BOX 관련 글
관련 글
URL
🔻 아래 텍스트 파일을 다운로드하시면 각종 BOX 서식을 확인하실 수 있습니다.
5. 목차 서식 적용
목차 서식 적용 전에 기존의 HTML 코드를 복사 후 메모장에 붙여 넣어 꼭 저장해두시고 작업을 진행하시길 추천드립니다. 코드 부분의 위치나 오류가 발생하면 기존에 적용 중이던 코드들이 꼬여 복잡해질 수 있습니다.
✅ A. TOC 파일 업로드
▶ 🔻아래 첨부 파일을 다운로드한 후 압축을 풀고 티스토리 블로그 '스킨편집 → HTML편집 → 파일업로드'에 파일 2개를 모두 업로드해주세요.
✅ B. 목차 서식 HTML 복사 붙여넣기
▶ TOC 파일을 업로드 완료하신 후 🔻아래의 '목차 서식' 텍스트 파일을 다운로드하여주세요.
▶ 다음으로 다운로드한 텍스트 파일 내용 (2) 부분을 참고하셔서 자신이 적용 중인 스킨에 맞게 <!--목차 코드 시작-->부터 <!--목차 코드 끝-->까지 HTML 코드를 복사 후 '스킨편집 → HTML편집 → HTML'로 이동 후 <body>와 </body> 사이에 붙여넣기 해주시면 됩니다. 저는 맨 마지막 </body> 바로 위에 붙여넣기했습니다.
▶ 파일의 HTML 코드는 목차에 H2, H3, H4 제목이 모두 표시되게 적용되어 있습니다.
if($toc.length > 0) {
$toc.toc({content: ".e-content", headings: "h2,h3,h4"});
➡ 코드에서 위에 색깔 표시된 부분의 h2, h3, h4를 삭제, 추가하시면 목차에 표시되는 제목을 수정하실 수 있습니다.
EX) h4를 목차에 표시하고 싶지 않다면, h4를 삭제
✅ C. 목차 서식 CSS 복사 붙여넣기
▶ 텍스트 파일의 (3) 부분의 /* 목차(TOC) 스타일 */부터 (4) 시작 전까지의 CSS 코드를 복사 후 '스킨편집 → HTML편집 → CSS' 로 가서 맨 마지막 부분에 코드를 붙여 넣어주시면 됩니다.
✅ D. 글쓰기 목차 서식 만들기
▶티스토리 '서식 관리'로 이동 → 글쓰기 → ' 기본모드 → HTML '로 변경 → 텍스트 파일의 (4) 서식 만들기 코드를 복사 후 붙여넣기 → 제목 정하고 저장
✅ E. 목차 서식 참고
▶ 목차 HTML코드와 CSS코드만 적용 후 저장한 서식을 글에 직접 삽입하지 않으면 글 제일 상단에 자동으로 목차가 생성됩니다. 글의 적절한 위치에 직접 목차 서식을 사용해 위치를 변경해주세요.
'-' 카테고리의 다른 글
| 애플페이 출시일 현대카드 추천 (0) | 2022.12.16 |
|---|---|
| 2023 계묘년 신년운세, 손 없는 날 (0) | 2022.12.12 |
| BTS 진 입대 전역 예정일 (0) | 2022.12.12 |
| 12월 6일 16강 경기 결과 / 파울루 벤투 감독 재계약 (0) | 2022.12.06 |
| 애드센스 승인 방법 및 후기 (3) | 2022.11.29 |
댓글