티스토리 꾸미기 TIP 모음

티스토리는 자유도가 높아서 디자인과 레이아웃을 개성 있게 꾸밀 수 있는 블로그 플랫폼이에요. 깔끔하면서도 전문적인 느낌을 주는 블로그로 꾸미는 방법을 정리해볼게요!

반응형

1. 티스토리 스킨 선택 & 커스터마이징

✅ 기본 제공 스킨 활용

▪️티스토리는 기본적으로 다양한 반응형(모바일 최적화) 스킨을 제공해요.

👉 설정 방법: 티스토리 관리자 페이지 → 스킨 변경 → 원하는 스킨 선택

✅ HTML & CSS 편집으로 개성 살리기

▪️폰트 변경: 가독성 좋은 웹폰트 적용 (ex. Noto Sans, Pretendard)

▪️배경색 & 테마 조정: 다크모드 지원 or 감성적인 배경

▪️사이드바 꾸미기: 인기 글, 최근 댓글, SNS 링크 추가

👉 설정 방법: 티스토리 관리자 → HTML/CSS 편집 → 직접 수정

 

2. 글쓰기 레이아웃 & 디자인 개선

✅ 본문 가독성 높이기

▪️폰트 크기: 기본 16px 이상 유지

▪️문단 길이: 너무 길지 않게 줄바꿈 활용

▪️이미지 정렬: 중앙 정렬 or 적절한 간격 유지

 

✅ 썸네일 & 대표 이미지 활용

티스토리는 썸네일이 중요해요! 포스팅할 때 미리보기 이미지 추가 필수. 블로그 디자인에 맞는 대표 이미지 스타일 유지 (일관된 색감, 템플릿 활용)

💡 추천 사이트

▫️무료 이미지 사이트: Unsplash, Pexels, Pixabay

▫️아이콘 & 일러스트: Flaticon, Freepik

▫️썸네일 제작 도구: Canva, Figma

✅ 포스트 내 목차 & TOC(목차 자동 생성)

긴 글일 경우 목차(TOC, Table of Contents) 추가하면 SEO에도 유리. HTML 코드나 플러그인으로 구현 가능.

 

3. 블로그 아이덴티티 & 브랜드 강화

✅ 블로그 로고 & 파비콘 설정

▪️로고: 심플한 텍스트 로고 or 브랜드 이미지

▪️파비콘(Favicon): 브라우저 탭에서 보이는 작은 아이콘 (16x16px, 32x32px)

👉 설정 방법: 티스토리 관리자 → 스킨 편집 → 파비콘 업로드

✅ 프로필 & 소개 페이지 꾸미기

방문자가 처음 들어와서 "어떤 블로그인지 한눈에 알 수 있도록" 작성. 사진, 블로그 소개, SNS 링크 추가하면 신뢰도 상승

 

👉 설정 방법: 티스토리 관리자 → 페이지 관리 → 새 페이지 추가

4. SEO & 방문자 증가 전략

✅ 메타태그 최적화 (검색엔진 노출 증가)

▪️검색엔진(구글, 네이버)에서 잘 보이도록 메타태그 설정 필수

▪️티스토리 기본 SEO 설정도 가능하지만, 직접 추가하는 것이 더 효과적

 

✅ 네이버 서치 어드바이저 & 구글 서치 콘솔 등록

▪️네이버 & 구글에 블로그를 등록하면 검색 노출 증가

▪️RSS 제출 & 사이트맵 업로드 추천

👉 설정 방법:

▫️네이버: searchadvisor.naver.com

▫️구글: search.google.com/search-console

✅ SNS 공유 버튼 추가

▪️포스트를 SNS로 쉽게 공유할 수 있도록 SNS 버튼 추가

▪️HTML 코드 or 플러그인 활용

 

5. 티스토리 블로그를 감각적으로 꾸미는 핵심 정리

✔ 스킨 선택 & 커스터마이징 (HTML/CSS 편집 활용)

✔ 폰트, 색상, 이미지 등을 조정하여 가독성 향상

✔ 썸네일 & 대표 이미지 일관성 유지

✔ SEO 최적화 (메타태그, 검색엔진 등록, 목차 추가)

✔ SNS 공유 버튼 & 브랜드 아이덴티티 강조

👉 "티스토리는 자유도가 높은 만큼, 꾸미기만 잘해도 방문자가 늘어나요!"

🎨 깔끔하고 개성 있는 블로그를 만들어 보세요! 😊

 

6. HTML

 

✔ 빈 공백:  

 

✔ 목차 

 

<a href="#no1">대제목</a>

 

id="no1"

 

예: <h3 id="no0" style="padding: 2px 5px; font-weight: bold; background: linear-gradient(to top, #FF00FF 40%, transparent 40%); display: inline-block;" data-ke-size="size23">제목 1</h3>

 

✔ 테이블 폭 100%로 맞추기 

 

<table style="width: 100%;" 

 

티스토리 목차 내부 링크 만들기

티스토리 버튼(링크) 만들기 : 따라하며 배우는 초보자용

링크버튼 만들기 2

[티스토리 관리] 애드센스 수익을 증가시켜 줄 링크버튼 쉽게 만들기

티스토리 링크버튼 여러 개 만들기(ft. 버튼 제너레이터)

티스토리 | CSS 링크 버튼 서식 모음 #2

티스토리 [언어 번역] 기능 추가하기

티스토리 '진행표시줄' 또는 'Progress Bar' 만들기

티스토리 간편 유용 HTML 모음 + 소제목 꾸미기 추천 글

티스토리 간편 유용 HTML 모음 추가 10개

TISTORY 폰트 관련 스타일을 적용할 수 있는 유용한 HTML 코드 5개

티스토리 운영에 도움이 되는 팁

구글 애드센스 VS 카카오애드핏 VS 네이버 애드포스트

티스토리 - 구글서치 'Alternate page with proper canonical tag' 해결에 도움이 됐던 방법

자주 쓰는 티스토리 소제목 HTML 코드

티스토리 제목 밑줄 긋기 효과 HTML

티스토리 목록 새글 알림 아이콘 주황색으로 바꾸기

티스토리 오디세이 스킨 최근글+인기글 기존 코드 (복구 시 활용)