[CSS] 블로그 테마 리뉴얼하기

줄곧 네이버블로그만 사용하던 나.. 

이번에 개발 블로그를 만들면서 티스토리를 처음 접했는데, 네이버와는 상당히 다른 느낌이다.

특히 테마를 직접 수정할 수 있다는 점이 매력적으로 느껴졌다.

 

그동안은 기본 테마를 활용하면서 이미지를 넣는 정도로만 수정했는데,

이번에는 아예 html 수정 기능을 활용해서 전체적인 레이아웃과 디자인, 폰트까지 전부 바꿔보았다.

 

아래는 바꾸기 전의 블로그이다. 

 

리뉴얼 전의 블로그 메인 페이지

 

기본 테마를 활용하면서 직접 찍은 사진을 넣어두었다.

폰트도 나름 직접 pretendard로 수정하기는 했었는데.. 크게 티는 안났던 것 같다 ㅋㅋ(나만 아는 깔끔함)

 

이 디자인이 내가 쓰기에는 크게 이상하지 않았지만,

방문자의 입장에서 들어와보니 카테고리별 분류가 한 눈에 보이지 않아서 불편했다.

다시 생각해보니 나도 글이 60개가 넘게 쌓이면서 카테고리를 열심히 분류하고 있었는데,

그 점이 노출되지 않으면 분류의 의미가 퇴색되는 것이 아닐까, 하는 생각이 들었다.

그래서 과감하게 레이아웃부터 바꾸기로 했다.

 

 

 

티스토리 내에 블로그 관리에 들어가면 스킨을 변경할 수 있는 페이지가 있다

기본적으로 10개의 스킨 중 원하는 것을 사용할 수 있는데, 나는 그 중 Odyssey 테마를 선택했다

헤더를 상단에 고정하고 하단에 본문과 카테고리 섹션이 구분되어 있어 이걸로 결정!

 

아무 수정도 거치지 않고 바로 테마를 적용하면

왼쪽에 글 리스트, 오른쪽에 프로필과 카테고리가 있다.

 

 

 

그리고 수정한 최종본!

 

 

 

나 포함 대부분의 사람들에게는 목차가 왼쪽, 내용이 오른쪽에 있는 게 편안하게 느껴질 것 같았다. 그래서 카테고리를 왼편에 두고 글을 오른쪽에 배치했다. 

헤더 이미지도 새로 나온 따끈따끈한 구글 웹폰트를 넣어주었다 ㅎㅎ 이 폰트 넘나 귀여운 것...몽글몽글...ㅋㅋㅋ

 

새로 나온 건 또 바로 써줘야 제맛

 

가장 상단의 로고(블로그명) 역시 폰트를 손글씨로 바꿔주고 색상을 통일했다.

전체 폰트도 손글씨로 통일할까.. 하다가 가독성이 떨어질 것 같아 그대로 두었다.

 

그 외에도 프로필 밑에 깃허브와 인스타 a태그를 넣는다던가,

 필요 없는 공지사항/댓글/방문자 수 등의 기능은 삭제한다던가 하는 식으로 조금씩 손을 봤다

 

결론적으로 내 취향도 잘 반영되고, 가독성도 높아진 것 같아 만족!

다음 번에는 더 파격적으로 이리저리 바꿔보고 싶다 ㅎㅎ

 

---

TIL 끝!