개성 넘치는 블로그는 방문자들의 눈길을 사로잡고 기억에 오래 남습니다. 특히 티스토리 블로그를 운영하면서 자신만의 스타일을 표현하고 싶어 하는 분들이 많으실 텐데요. 블로그의 첫인상을 결정짓는 중요한 요소 중 하나가 바로 카테고리 디자인입니다.
카테고리 꾸미기 :기본 설정도 깔끔하지만 카테고리 글자색이나 테두리 색상을 변경하는 것만으로도 블로그 전체의 분위기를 확 바꿀 수 있습니다
블로그 카테고리 수정하기
티스토리 블로그 카테고리의 글자색과 테두리 색상을 변경하는 방법은 간단한 CSS 편집을 통해 이루어집니다. 아래 단계를 차근차근 따라 하시면 누구나 쉽게 적용할 수 있습니다.
1단계: 티스토리 관리
페이지 접속 및 스킨 편집 메뉴 이동 가장 먼저 티스토리 관리 페이지로 접속합니다. 좌측 메뉴에서 [꾸미기]를 클릭한 후 하위 메뉴 중 [스킨 편집]을 선택합니다.
2단계: html 편집창 열기
스킨 편집 화면 우측 상단에 있는 [html 편집] 버튼을 클릭 후 css를 클릭합니다. 이곳에서 블로그의 디자인과 관련된 다양한 스타일을 수정할 수 있습니다.
3단계: 카테고리 관련 CSS 코드 찾기
CSS 편집창 안에는 복잡하고 긴 코드들이 나열되어 있습니다. 당황하지 마시고 키보드의 [Ctrl + F] (Mac 사용자는 [Cmd + F]) 키를 눌러 찾기 기능을 활성화합니다. 검색창에 category 또는 카테고리를 입력하고 검색하여 카테고리 관련 CSS 코드를 찾습니다.
카테고리 관련 코드는 스킨마다 조금씩 다를 수 있지만 일반적으로 다음과 유사한 형태로 시작합니다.
▼ 카테고리 글자 색상을 바꾸기 위해서는 코드. sidebar. category ul li a 이 위치 기본 설정입니다.
▼ 카테고리 글자색상 변경과 폰트 사이즈를 추가하여 글자 크기를 수정 후 확인해 보면 메인 카테고리 폰트 색상이 변경되었습니다.
▼ 서브 카테고리 글자색 변경은. sidebar. category ul li ul li ul li a 위치에서 글자 색상 변경과 글자 사이즈를 크거나 작은 사이즈를 원하시면 font-size를 추가해서 수정해 주시면 됩니다.
▼ 서브 카테고리에 있는 테두리 색상과 굵기 수정은. sidebar. category ul li ul li ul li:before 위치에서 테두리 색상과 테두리 굵기를 수정합니다.
위 코드에서 1px은 테두리 두께, solid는 실선 스타일을 의미하며 원하는 색상코드에 원하는 테두리 색상 코드를 입력합니다. 테두리 스타일은 solid (실선), dashed (점선), dotted (짧은 점선), double (두 줄 실선) 등 다양하게 설정할 수 있습니다.
변경 사항 저장 및 확인
원하는 글자색과 테두리 색상을 모두 설정했다면 CSS 편집창 하단의 [저장] 버튼을 클릭합니다. 저장이 완료되면 블로그에 접속하여 카테고리 디자인이 변경된 것을 확인합니다.
- 개발자 도구 활용: 크롬, 웨일 등 웹 브라우저의 개발자 도구(F12 키)를 활용하면 특정 요소의 CSS 스타일을 미리 확인하고 수정해 볼 수 있습니다. 원하는 카테고리 요소에서 마우스 우클릭 후 "검사" 또는 "요소 검사"를 선택하면 해당 요소의 CSS를 실시간으로 확인하고 수정하면서 미리 보기가 가능합니다.
- 색상 조합: 글자색과 테두리 색상을 선택할 때는 블로그 전체 디자인과의 조화를 고려하는 것이 중요합니다. 너무 튀거나 촌스러운 색상 조합은 오히려 가독성을 떨어뜨릴 수 있으니 신중하게 선택하세요.
- 백업: CSS를 수정하기 전에 혹시 모를 상황에 대비하여 현재 스킨을 백업해 두는 것을 추천합니다. 스킨 편집 화면 우측 상단의 [스킨 저장] 버튼을 클릭하여 백업할 수 있습니다.
지금까지 티스토리 블로그 카테고리의 글자색과 테두리 색상을 변경하는 방법을 자세히 알아보았습니다. 간단한 CSS 편집만으로도 여러분의 블로그에 독창적인 개성을 더할 수 있습니다. 오늘 알려드린 방법을 활용하여 여러분의 블로그 카테고리를 멋지게 꾸며보시고 더욱 매력적인 블로그를 만들어나가시길 바랍니다.
