본문 바로가기

[티스토리 블로그] 초보자를 위한 꾸미기 노하우 모음집

ㅇㅁㅁㅎ 2024. 6. 13.

안녕하세요. 티스토리 블로그를 더 멋지고 매력적으로 꾸미고 싶으시죠? 그렇다면 이 글을 꼭 읽어보세요. 이번 글에서는 티스토리 블로그 꾸미기 팁, 최적화된 광고 추가, 그리고 블로그 최적화 방법을 소개합니다. 이 글 하나로 티스토리 블로그를 완벽하게 꾸밀 수 있게 될 것입니다. 각 구간별로 변경 전과 변경 후 이미지를 첨부했으니 많은 도움이 되길 바랍니다.

모든 글들은 티스토리 '북클럽' 스킨을 기준으로 진행합니다. 이제 시작해 볼까요?

 

티스토리 블로그 꾸미기

 

1. 배경색 꾸미기

블로그의 첫인상을 결정하는 중요한 요소 중 하나입니다. 배경색을 변경하여 블로그의 분위기를 바꿔보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 배경색 꾸미기 전티스토리 블로그 배경색 꾸미기 후
티스토리 블로그 배경색 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

2. 헤더 배경색/글자색 꾸미기

헤더는 방문자들이 가장 먼저 접하는 부분입니다. 헤더 배경색과 글자색을 변경하면 블로그의 첫인상을 크게 바꿀 수 있습니다. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 헤더 배경색/글자색 꾸미기 전티스토리 블로그 헤더 배경색/글자색 꾸미기 후
티스토리 블로그 헤더 배경색/글자색 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

3. 검색 버튼 배경색 꾸미기

검색 버튼의 배경색을 헤더 배경색과 차이를 두세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 검색 버튼 배경색 꾸미기 전티스토리 블로그 검색 버튼 배경색 꾸미기 후
티스토리 블로그 검색 버튼 배경색 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

4. 모바일 메뉴 배경색 꾸미기

모바일 메뉴의 배경색을 변경하여 메뉴 버튼에 포인트를 주세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 모바일 메뉴 배경색 꾸미기 전티스토리 블로그 모바일 메뉴 배경색 꾸미기 후
티스토리 블로그 모바일 메뉴 배경색 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

5. 푸터 배경색/글자색 꾸미기

푸터의 배경색과 글자색을 꾸며 블로그의 마무리를 꾸며보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 푸터 배경색, 글자색 꾸미기 전티스토리 블로그 푸터 배경색, 글자색 꾸미기 후
티스토리 블로그 푸터 배경색/글자색 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

6. 카테고리 리스트 타입 변경하기

카테고리 리스트의 타입을 변경하여 더 쉽게 탐색할 수 있도록 해보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그카테고리 리스트 타입 변경 전티스토리 블로그카테고리 리스트 타입 변경 후
티스토리 블로그 카테고리 리스트 타입 변경하기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

7. 카테고리 리스트 위아래 테두리 꾸미기

카테고리 리스트에 테두리색을 변경하여 더 깔끔한 레이아웃을 만들어보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 카테고리 리스트 위아래 테두리 꾸미기 전티스토리 블로그 카테고리 리스트 위아래 테두리 꾸미기 후
티스토리 블로그 카테고리 리스트 위아래 테두리 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

8. 카테고리 리스트 글자색 꾸미기

카테고리의 글자색을 변경하여 글자가 더 잘 보이게 바꿔보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 카테고리 리스트 글자색 꾸미기 전티스토리 블로그 카테고리 리스트 글자색 꾸미기 후
티스토리 블로그 카테고리 리스트 글자색 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

9. 콘텐츠와 사이드바 테두리 꾸미기

콘텐츠와 사이드바에 테두리색을 변경하여 구분감을 주고 깔끔한 디자인으로 만들어보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 콘텐츠와 사이드바 테두리 꾸미기 전티스토리 블로그 콘텐츠와 사이드바 테두리 꾸미기 후
티스토리 블로그 콘텐츠와 사이드바 테두리 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

10. 사이드바 메뉴 설정하기

사이드바 메뉴를 설정하여 방문자들이 더 쉽게 원하는 정보를 찾을 수 있도록 하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 사이드바 메뉴 설정하기 전티스토리 블로그 사이드바 메뉴 설정하기 후
티스토리 블로그 사이드바 메뉴 설정하기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

11. 사이드바 메뉴 글자색 꾸미기

사이드바 메뉴의 글자색을 변경하여 블로그의 스타일을 맞춰보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 사이드바 메뉴 글자색 꾸미기 전티스토리 블로그 사이드바 메뉴 글자색 꾸미기 후
티스토리 블로그 사이드바 메뉴 글자색 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

12. 카테고리 추가하기

새로운 카테고리를 추가하여 블로그의 내용을 더 잘 분류할 수 있게 해보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 카테고리 추가하기 전티스토리 블로그 카테고리 추가하기 후
티스토리 블로그 카테고리 추가하기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

13. 카테고리 글자색/테두리 꾸미기

카테고리 글자색과 테두리를 꾸며 더 나은 시각적 효과를 주어보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 카테고리 글자색, 테두리 꾸미기 전티스토리 블로그 카테고리 글자색, 테두리 꾸미기 후
티스토리 블로그 카테고리 글자색/테두리 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

14. 커버 이미지 꾸미기

 

커버 이미지를 꾸며 블로그의 첫인상을 강하게 만들어보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 커버 이미지 꾸미기 전티스토리 블로그 커버 이미지 꾸미기 후
티스토리 블로그 커버 이미지 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

15. 제목(h2, h3, h4) 꾸미기

제목의 스타일을 꾸며 글의 가독성과 디자인을 향상시키세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 제목(h2, h3, h4) 꾸미기 전티스토리 블로그 제목(h2, h3, h4) 꾸미기 후
티스토리 블로그 제목(h2, h3, h4) 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

16. 굵은 글씨 밑줄 효과 주기

굵은 글씨에 밑줄 효과를 주어 강조하고 싶은 내용을 더 부각시켜보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 굵은 글씨 밑줄 효과 주기 전티스토리 블로그 굵은 글씨 밑줄 효과 주기 후
티스토리 블로그 굵은 글씨 밑줄 효과 주기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

17. 리스트 꾸미기

리스트를 꾸며 내용이 더 명확하게 구분되도록 하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 리스트 꾸미기 전티스토리 블로그 리스트 꾸미기 후
티스토리 블로그 리스트 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

18. 따옴표 인용문 꾸미기

따옴표 인용문을 꾸며 인용된 내용을 더 강조해보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 따옴표 인용문 꾸미기 전티스토리 블로그 따옴표 인용문 꾸미기 후
티스토리 블로그 따옴표 인용문 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

19. 블록 인용문 꾸미기

블록 인용문을 꾸며 인용된 내용을 블록 형태로 강조하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 블록 인용문 꾸미기 전티스토리 블로그 블록 인용문 꾸미기 후
티스토리 블로그 블록 인용문 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

20. 박스 인용문 꾸미기

 

박스 인용문을 꾸며 중요한 내용을 박스로 강조해보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 박스 인용문 꾸미기 전티스토리 블로그 박스 인용문 꾸미기 후
티스토리 블로그 박스 인용문 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

21. 표 꾸미기

표를 꾸며 데이터를 더 깔끔하게 정리하고 시각적으로 표현하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 표 꾸미기 전티스토리 블로그 표 꾸미기 후
티스토리 블로그 표 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

22. 글 버튼 모음 꾸미기

공감 버튼들을 블로그 스타일에 맞게 꾸며보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그글 버튼 모음 꾸미기 전티스토리 블로그글 버튼 모음 꾸미기 후
티스토리 블로그 글 버튼 모음 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

23. 네임카드 꾸미기 및 없애기

네임카드를 꾸미거나 제거하여 블로그를 더 깔끔하게 관리하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그글 네임카드 꾸미기 및 없애기 전티스토리 블로그글 네임카드 꾸미기 및 없애기 후
티스토리 블로그 네임카드 꾸미기 및 없애기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

24. 댓글 테두리 꾸미기

댓글의 테두리를 꾸며 댓글 영역을 더 구분감있게 만들어보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그글 댓글 테두리 꾸미기 전티스토리 블로그글 댓글 테두리 꾸미기 후
티스토리 블로그 댓글 테두리 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

25. 댓글 글자색 꾸미기

댓글의 글자색을 변경하여 댓글 영역을 더 돋보이게 하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그글 댓글 글자색 꾸미기 전티스토리 블로그글 댓글 글자색 꾸미기 후
티스토리 블로그 댓글 글자색 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

26. 댓글 마우스 오버 효과 주기

댓글에 마우스를 올렸을 때 효과를 추가하여 사용자 경험을 향상시키세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그글 댓글 마우스 오버 효과 주기 전티스토리 블로그글 댓글 마우스 오버 효과 주기 후
티스토리 블로그 댓글 마우스 오버 효과 주기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

27. 홈(커버) 만들기

 

홈(커버)을 쉽게 만들고 설정하는 방법을 알아보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그글 홈(커버) 만들기 전티스토리 블로그글 홈(커버) 만들기 후
티스토리 블로그 홈(커버) 만들기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

28. 홈(커버) 글자색/여백/테두리 꾸미기

홈(커버) 글자색, 여백, 테두리를 꾸며 더 매력적인 페이지를 만드세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그글 홈(커버) 글자색, 여백, 테두리 꾸미기 전티스토리 블로그글 홈(커버) 글자색, 여백, 테두리 꾸미기 후
티스토리 블로그 홈(커버) 글자색, 여백, 테두리 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

29. 카테고리/홈(커버) 썸네일 꾸미기

카테고리와 홈(커버)의 썸네일을 꾸며 시각적으로 효과를 높이세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그글 카테고리, 홈(커버) 썸네일 꾸미기 전티스토리 블로그글 카테고리, 홈(커버) 썸네일 꾸미기 후
티스토리 블로그 카테고리와 홈(커버) 썸네일 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

30. 자동 목차 만들기

 

자동 목차를 추가하여 글을 더 쉽게 탐색할 수 있도록 하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그글 자동 목차 만들기 전티스토리 블로그글 자동 목차 만들기 후
티스토리 블로그 자동 목차 만들기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

31. 프로그레스바 만들기

프로그레스바를 추가하여 페이지 로딩 상황을 시각적으로 표시하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그글 프로그레스바 만들기 전티스토리 블로그글 프로그레스바 만들기 후
티스토리 블로그 프로그레스바 만들기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

32. 댓글 오류 안내창 꾸미기

댓글 오류 안내창을 꾸며 사용자가 한눈에 알아볼 수 있도록 하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그글 댓글 오류 안내창 꾸미기 전티스토리 블로그글 댓글 오류 안내창 꾸미기 후
티스토리 블로그 댓글 오류 안내창 꾸미기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

33. 로딩 화면 만들기

로딩 화면을 추가하여 페이지 로딩 시 사용자 경험을 개선하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그글 로딩 화면 만들기 전티스토리 블로그글 로딩 화면 만들기 후
티스토리 블로그 로딩 화면 만들기 미리보기. [왼쪽 : 변경 전 / 오른쪽 : 변경 후]

 

티스토리 블로그 광고

 

1. 페이지 성능 최적화된 상단 광고 2개 삽입 방법

상단에 광고를 삽입하여 페이지 성능을 향상하면서 수익을 창출하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 페이지 성능 최적화된 상단 광고 2개 삽입 후
티스토리 블로그 페이지 성능 최적화된 상단 광고 2개 미리보기.

 

2. 페이지 성능 최적화된 카테고리 인피드 광고 삽입 방법

카테고리 내 인피드 광고를 삽입하여 자연스럽게 광고를 노출하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 페이지 성능 최적화된 카테고리 인피드 광고 삽입 후
티스토리 블로그 페이지 성능 최적화된 카테고리 인피드 광고 미리보기.

 

3. 페이지 성능 최적화된 홈(커버) 인피드 광고 삽입 방법

홈(커서) 내 인피드 광고를 삽입하여 사용자 경험을 유지하며 광고 수익을 창출하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

티스토리 블로그 페이지 성능 최적화된 홈(커버) 인피드 광고 삽입 후
티스토리 블로그 페이지 성능 최적화된 홈(커버) 인피드 광고 미리보기.

 

티스토리 블로그 최적화

1. 2차 도메인 연결 시 댓글 오류 해결 방법

2차 도메인 연결 시 댓글 오류를 해결하는 방법을 알아보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

 

2. 이미지 지연 로드 설정

이미지 지연 로드를 설정하여 페이지 로딩 속도를 개선하세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

 

3. 이미지 최적화 방법

이미지 최적화를 통해 페이지 성능을 향상하는 방법을 알아보세요. 자세한 방법은 여기를 클릭하면 게시글로 이동됩니다.

 

결론

이 모음집 하나로 티스토리 꾸미기와 페이지 성능을 향상시키고, 수익 창출할 수 있도록 소개해드렸습니다. 제가 직접 다 해보고 글을 작성한 것이니 여러분들도 블로그를 꾸미시거나, 페이지 성능을 올리고 싶다면 꼭 적용해 보시길 권장드립니다.

 

다음 글도 기대해 주시고, 궁금한 점이나 도움이 필요하면 언제든지 댓글로 알려주세요!
다른 유용한 블로그 설정 방법은 여기를 클릭하세요!

 

댓글


loading